القائمة
shadcn/studio component library with MCP integration, theme generation, and block patterns. This skill should be used when building UI with shadcn components, selecting dashboard layouts, or generating landing pages. Canonical source for all shadcn-based work.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Use when working with mise - creating/editing mise.toml or .mise.toml files, defining tasks with usage field arguments, managing dev tools and environments, configuring hooks, or when user mentions mise configuration.
Prisma 7 ORM with PostgreSQL — schema design, migrations, seeding, and Railway deployment patterns. This skill should be used when setting up Prisma in a new project, writing migrations, managing database schemas, or deploying Prisma-backed services to Railway.
Railway deployment and infrastructure management skill. This skill should be used when deploying applications to Railway, managing Railway services, checking deployment status, viewing logs, configuring environment variables, or troubleshooting Railway deployments.
NestJS 11 backend patterns with Fastify, modular architecture, guards, pipes, and Railway deployment. This skill should be used when building NestJS APIs, setting up backend services, or creating REST/GraphQL endpoints with NestJS.
Theme generation with tweakcn for shadcn/ui and Magic UI animations. Use when setting up project themes, customizing color schemes, adding dark mode, or integrating animated components.
Build MCP Apps - interactive UI components that render inside AI hosts like Claude, ChatGPT, and VSCode. This skill should be used when creating tools with rich UI, building dashboards or forms for AI interactions, or adding visual interfaces to MCP servers.
| name | ui-shadcn-studio |
| description | shadcn/studio component library with MCP integration, theme generation, and block patterns. This skill should be used when building UI with shadcn components, selecting dashboard layouts, or generating landing pages. Canonical source for all shadcn-based work. |
Production UI development using shadcn/studio — an enhanced distribution of shadcn/ui with copy-paste components, blocks, templates, and an MCP server for AI-assisted generation.
Canonical source: https://shadcnstudio.com/docs/getting-started/introduction
npx shadcn@latest init
Select: TypeScript, Tailwind CSS v4, default style, CSS variables.
npx shadcn@latest mcp init --client cursor
Restart Cursor after installation. The MCP enables AI-assisted component generation directly in the IDE.
| Command | Purpose | When to Use |
|---|---|---|
/cui | Customize existing shadcn/studio block | Reuse a block layout with custom content |
/iui | Generate inspired UI (Pro) | Creative, unique designs from scratch |
/rui | Refine/edit an existing block | Tweaking or updating generated components |
/ftc | Install blocks from Figma design | Converting Figma mockups (requires Figma MCP) |
Generate one block at a time for precision:
/cui Create a hero section for my SaaS landing page using Hero 2.
/cui Create a pricing section with 3 tiers for my app using Pricing 5.
/cui Create a testimonial section using Testimonials 1.
For a complete landing page in one pass:
/cui Create a landing page for my SaaS. Use hero section like Hero 2,
feature section like Features 8, testimonial section like Testimonials 1,
call to action section like Call to Action 3, pricing section like Pricing 5.
npx shadcn@latest add button card dialog input
npx shadcn@latest add sidebar chart table
Components install to src/components/ui/ by default. Configuration lives in components.json.
Four pre-built dashboard layouts for project bootstrapping. Each includes sidebar navigation, header, and content area.
Full-featured admin panel with user management, billing, and settings.
Key blocks: Application Shell, Sidebar Navigation, Data Tables, Stats Cards, User Management views.
Layout: Collapsible sidebar + top header + breadcrumbs
Pages: Overview, Users, Billing, Settings, Activity Log
Components: sidebar, card, table, badge, avatar, dropdown-menu
Data-heavy layout with charts, metrics, and filterable tables.
Key blocks: Chart containers, KPI cards, Date range pickers, Export controls.
Layout: Fixed sidebar + header with date picker + grid content
Pages: Overview, Reports, Funnels, Retention, Events
Components: chart, card, table, select, calendar, popover
Product and order management with inventory tracking.
Key blocks: Product grids, Order tables, Inventory status, Revenue charts.
Layout: Sidebar + header with search + tabbed content
Pages: Products, Orders, Customers, Inventory, Revenue
Components: table, card, badge, dialog, tabs, input
Clean skeleton with authentication and empty dashboard — the blank canvas.
Layout: Sidebar + header
Pages: Dashboard (empty), Settings
Components: sidebar, card, button, avatar
Use the shadcn/studio theme generator for consistent theming:
src/app/globals.css@layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 240 5.9% 10%;
--radius: 0.5rem;
}
.dark {
/* Dark mode overrides */
}
}
Reference for available shadcn/studio blocks when building pages:
/rui to iterate — Refine generated blocks rather than regeneratingThis skill handles component sourcing and generation. For design philosophy, spacing, typography, and craft principles, reference the ui-design-system skill. Both skills complement each other: