菜单
Translates a UI_Component_Inventory.md artifact into modern ShadCN + Tailwind components AND fully scaffolded Next.js pages. Use when building the frontend design system and routing infrastructure.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Enforces data governance by verifying Knowledge Catalog Aspects before recommending BigQuery tables.
Ensures the game has a fun easter egg that turns the screen black and white, sepia or gameboy monotone colours. Use when creating or modifying a game.
Ensures platformer games have polished movement, responsive controls, and balanced jump mechanics. Use ONLY when the game type is "platformer".
Guides the creation of a new game and is the high-level orchestrator skill that MUST be invoked first. Use when tasked with creating a new game.
Arcade game must have a retro asthetic. Use when creating or modifying a game to ensure that the game looks retro and maintains a consistent look and feel with all games.
Game will always use the same control scheme/buttons and mapping of the gamepad and keyboard. Use when creating or modifying a game.
| name | scaffolding-ui-and-pages |
| description | Translates a UI_Component_Inventory.md artifact into modern ShadCN + Tailwind components AND fully scaffolded Next.js pages. Use when building the frontend design system and routing infrastructure. |
Locate and read all artifacts in docs/legacy-audit/ directory.
Implement high-fidelity, modern React components using ShadCN and Tailwind, AND wire them together into fully functional Next.js pages (src/app/**/page.tsx) based on the requirements and Route Topology extracted from legacy Pug templates.
Copy this checklist and track your progress:
Task Progress:
- [ ] Step 1: Initialize ShadCN
- [ ] Step 2: Build Shared Layout Components (src/components/layout/)
- [ ] Step 3: Scaffold Domain Components (src/components/articles/, etc.)
- [ ] Step 4: Extract Route & Page Topology
- [ ] Step 5: Scaffold Pages (src/app/**/page.tsx)
- [ ] Step 6: Verification (Visual smoke-test)
npx shadcn@latest init and configure the Tailwind theme (colors, fonts).Navbar, Footer, and MobileMenu.
getServerSession.NavigationMenu, Avatar, Button, Card) instead of raw Bootstrap/CSS classes.CommentList and ArticleCard using the legacy field mapping.docs/legacy-audit/UI_Component_Inventory.md and explicitly extract the list of intended pages and URLs.src/app/[path]/page.tsx (e.g. /articles needs src/app/articles/page.tsx). Hook up all business logic, server actions, UX intent, and data fetching components required.Output Result: Ensure all components are exported from src/components/ and all pages are functionally implemented in src/app/.
If the design system uses @base-ui/react primitives (standard in ShadCN v4+), you MUST follow these patterns for asChild support:
render prop on Base UI primitives to implement asChild.Button or MenuItem acts as a Link (via asChild), you MUST set nativeButton={false} on the primitive to suppress semantics warnings and avoid invalid nested interactive elements.
<ButtonPrimitive nativeButton={false} render={(props) => <Link {...props} />}>React.cloneElement or direct Prop spreading into the render callback to ensure ref, className, and event handlers are correctly merged onto the child.