菜单
Establish a two-layer UI model (primitives vs product wrappers) for ShadCN components. Use when importing or modifying ShadCN components, deciding whether to adapt primitives or create wrappers, or when aligning typography/tokens with the design system.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Debug and repair code using minimal, reviewable patches instead of full-file rewrites. Use this whenever the user is fixing a bug, iterating on failing tests, asks for a surgical code change, wants a minimal diff, or is in a tight debug loop where output size and token cost matter. Prefer this even if the user does not explicitly say "patch."
Build or use a tight automated test-fix loop that repairs one failing test at a time with minimal patches and narrow context. Use whenever the user wants a repair harness, constrained bug-fixing loop, failing-test repair workflow, or a prompt that turns the model into a surgical fix engine instead of a general coding assistant.
Interact with local Chrome browser session (only on explicit user approval after being asked to inspect, debug, or interact with a page open in Chrome)
Reduce cognitive load when implementing or refactoring code for readability.
Use Conventional Commits when creating reviewing or fixing commit messages.
Audit and refactor React UI components to match DataConnect UI implementation rules (Text component, tokens, Tailwind, naming) and Vercel React/composition guidance. Use when the user asks for a UI audit, React audit, composition review, or to fix UI implementation issues in components.
| name | shadcn-primitives-wrappers |
| description | Establish a two-layer UI model (primitives vs product wrappers) for ShadCN components. Use when importing or modifying ShadCN components, deciding whether to adapt primitives or create wrappers, or when aligning typography/tokens with the design system. |
Keep ShadCN primitives stable and token-normalized in src/components/ui, and express product typography/semantics in wrappers in src/components/typography or src/components/elements.
Touch the primitive when:
text-sm, rounded-md, gap-4, default ShadCN colors).Wrap the primitive when:
Text or textVariants.src/components/ui.tailwind-shadcn-adaptation (typography/spacing/radius) and class sorting.src/components/typography or src/components/elements:
Text or textVariants.asChild/Slot patterns to avoid coupling.tailwind-shadcn-adaptation first.ui primitives.src/components/ui.Badge normalized once in src/components/ui/badge.tsx.EyebrowBadge in src/components/typography composes Badge + Text intent="eyebrow".