Admin Panel Agent Skill
CRUD generators, data tables, user management, role-based access, and bulk operations.
The Skill
Full content, every format. Copy it, download it, or install with one command.
---
description: CRUD generators, data tables, user management, role-based access, and bulk operations.
homepage: https://yepapi.com/skills/admin-panel
metadata:
tags: [admin, crud, dashboard, management]
---
# Admin Panel
## Rules
- Data tables: server-side pagination, sorting, and filtering — never load all rows client-side — use `?page=1&limit=25&sort=createdAt&order=desc`
- CRUD pattern: list (table), create (form/modal), read (detail view), update (edit form), delete (confirm dialog) — consistent layout across all resources
- Role-based access: define roles (admin, editor, viewer) with permission matrix — check permissions server-side on every API route, not just UI
- Bulk operations: select multiple rows, batch action (delete, export, status change) — confirm destructive actions, process in background for large batches
- Search: debounced text search (300ms) across key fields — combine with column filters for precise queries
- User management: list users, view details, change roles, disable/enable accounts, impersonate (admin only with audit log)
- Audit log: record who changed what and when — `{ userId, action, resource, resourceId, changes, timestamp }`
- Layout: sidebar navigation (collapsible), breadcrumbs, page title with action buttons — responsive but desktop-optimized
## Permission Check Pattern
```typescript
const PERMISSIONS = {
admin: ["users:read", "users:write", "users:delete", "data:read", "data:write", "data:delete"],
editor: ["data:read", "data:write"],
viewer: ["data:read"],
} as const;
function can(role: string, permission: string): boolean {
return PERMISSIONS[role]?.includes(permission) ?? false;
}
// Middleware
if (!can(user.role, "users:write")) return Response.json({ error: "Forbidden" }, { status: 403 });
```
## Data Table API Pattern
```
GET /api/admin/users?page=1&limit=25&sort=createdAt&order=desc&search=john&role=admin
```
Return: `{ data: [...], total: 150, page: 1, limit: 25, totalPages: 6 }`
## Avoid
- Client-side-only permission checks — always enforce on the server
- Loading all data then paginating in the browser — use server-side pagination
- No confirmation for destructive actions — always confirm deletes and bulk operations
- Missing audit trail — you need to know who changed whatInstall
Why Use the Admin Panel Skill?
Without this skill, your AI guesses at admin panel patterns. It might hallucinate deprecated APIs, use outdated conventions, or miss best practices entirely. With it, your AI follows a proven ruleset — every suggestion aligns with current standards.
Drop this skill into your project and your AI instantly knows the rules. Better code suggestions, fewer errors, faster shipping.
Try These Prompts
These prompts work better with the Admin Panel skill installed. Your AI knows the context and writes code that fits.
"Build a full admin panel with a data table, search, filters, and bulk actions"
"Create a user management page with role-based access control and activity logs"
"Add a CRUD interface for managing products with inline editing and image uploads"
Admin Panel skill — FAQ
It provides patterns for CRUD generators, data tables with sorting and filtering, role-based access control, and bulk operations. Your AI builds complete admin interfaces that follow consistent conventions.
Run `npx skills add YepAPI/skills --skill admin-panel` in your project root. This copies the skill file into your repo where your AI coding tool can read it automatically.
Yes. The patterns are framework-agnostic for the data layer and work with shadcn/ui, Ant Design, or any other component library for the UI. The skill focuses on CRUD logic, table patterns, and access control.