菜单
Add or use shadcn/ui components in this Next.js portfolio (New York style, Tailwind v4). Use when asked to "add a button/dialog/table/form", "install a shadcn component", "use a UI primitive", or build UI from shadcn components. Trigger on "shadcn", "ui component", "add a <component>".
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
next-intl i18n conventions for the portfolio — locale routing, message catalogs (3 locales), translation helpers, locale switcher, and middleware locale detection. Use when adding or translating pages, adding message keys, or touching anything under src/i18n or messages.
Create a new page section/block component for this Next.js + next-intl portfolio, following the project's Server/Client split, i18n, and angular-frame design conventions. Use when asked to "add a section", "new block", "create a component for the page", "add About/Projects/Skills-style section", or build any new piece of the portfolio UI.
Add or update internationalized (i18n) copy across all locales in this next-intl portfolio. Use whenever introducing or changing any user-facing string, label, section title, or data key. Trigger on "add text", "new copy", "translate", "add a key", "update wording", "i18n", "new section title", or any task that surfaces visible text.
Project file organization, naming conventions, and import patterns. Use when creating new files, organizing code, or deciding where to place modules.
React component patterns — server vs client components, styling with cn(), props interfaces. Use when creating page sections or shared components.
Use before writing or referencing any stack library — fetches version-accurate docs via the context7 MCP server so call signatures, hooks, and APIs match what is installed. Invoke on first usage of any stack library, on any non-trivial Next.js API, or when uncertain whether an API is current.
| name | add-shadcn-ui |
| description | Add or use shadcn/ui components in this Next.js portfolio (New York style, Tailwind v4). Use when asked to "add a button/dialog/table/form", "install a shadcn component", "use a UI primitive", or build UI from shadcn components. Trigger on "shadcn", "ui component", "add a <component>". |
Config is in components.json: style new-york, RSC enabled, base color stone, icons via lucide-react. Primitives live in src/components/ui/.
npx shadcn@latest add <component>
This drops the file into src/components/ui/. Existing ones: button, card, carousel, drawer, input, select, tabs, textarea.
@/components, @/components/ui, @/lib, @/lib/utils (the cn() helper), @/hooks.@/components/ui/<name>.cn() for conditional classes; use theme tokens, not raw colors.src/app/globals.css) — there is no tailwind.config.add-translations skill).AngularFrame corners rather than editing the base primitive.npm run lint.