mockgen-shadcnlisted

Generate React + shadcn/ui mockup screens from PRD.md files for UI/UX human designer review. Creates a Vite + React 19 + TypeScript + shadcn/ui mockup application with admin dashboard layout (collapsible sidebar navigation, header with logo/notifications/locale/user menu, footer with copyright/version) using React Router v7 for client-side navigation, organized by user role in a mockup/ folder. Input: application name (mandatory), version (mandatory), module (optional). Output: mockup/ folder in the application's context folder containing MOCKUP.html index page, Vite + React project files, layout components, shadcn/ui components, and role-specific page components. Trigger on keywords: "generate mockup shadcn", "generate shadcn mockup", "create shadcn mockup screens", "shadcn UI mockup", "React mockup from user stories", "mockup from PRD.md shadcn", "generate shadcn screens", "create shadcn UI screens". Accepts application name and version as input (e.g., `/mockgen-shadcn hub_middleware v1.0.3`). Optionally ac
rashidee/co2-skills · ★ 3 · Web & Frontend · score 77

Install: claude install-skill rashidee/co2-skills

# Mockgen shadcn/ui Generate a Vite + React 19 + TypeScript + shadcn/ui mockup application from PRD.md for UI/UX designer review. Layout uses React components (header, sidebar, footer) composed in a shared layout route. Pages are React Router routes rendered inside the layout. All navigation is client-side via React Router `<Link>` and `useNavigate`. ## Stack | Layer | Technology | |-------|------------| | Build tool | Vite 6 | | UI framework | React 19 + TypeScript 5 | | Component library | shadcn/ui (Radix UI + Tailwind CSS) | | Routing / navigation | React Router v7 | | Styling | Tailwind CSS v3 (PostCSS) | | Icons | Lucide React | | Dark mode | next-themes | ## Input This skill uses standardized input resolution. Provide: | Argument | Required | Example | Description | |----------|----------|---------|-------------| | `<application>` | Yes | `hub_middleware` | Application name to locate the context folder | | `<version>` | Yes | `v1.0.3` | Version to scope processing (filter user stories <= this version) | | `module:<name>` | No | `module:Location Information` | Limit generation to a single module | ### Application Folder Resolution The application name is matched against root-level application folders: 1. Strip any leading `<number>_` prefix from folder names (e.g., `1_hub_middleware` â†’ `hub_middleware`) 2. Match case-insensitively against the provided application name 3. Accept snake_case, kebab-case, or title-case input (all match the same folder) 4. If no ma