Mockgen Shadcn

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 accepts a module name to limit generation to screens for that module only (e.g., `/mockgen-shadcn hub_middleware v1.0.3 module:Location Information`). When module is specified, only page components for that module are generated/updated; layout components, sidebars, server files, and other module pages are left untouched. Automatically excludes strikethrough (deprecated/removed) items.

mkdir -p ~/.claude/skills/mockgen-shadcn
curl -L https://claudskills.com/skills/mockgen-shadcn/SKILL.md \
  -o ~/.claude/skills/mockgen-shadcn/SKILL.md