c3sc0-v4113/scaffold

shadcn-component-boundaries

Trigger: components/ui, shadcn, component placement, common components, feature components, atomic design.

查看源码

使用方法

  1. 复制安装命令,在自己的智能体环境安装前先检查源码包。
  2. 从原始文档核对所需工具、凭据和支持的宿主。
  3. 说明输入材料与期望交付物,并对照来源检查输出。
npx skills add https://github.com/c3sc0-v4113/scaffold --skill shadcn-component-boundaries

开始前需了解

  • 安装不包含模型订阅、API 额度或访问文件的权限。
  • 仓库星数和安装量反映活跃情况,不等于独立质量或安全测试。
仓库原始内容

按源仓库内容呈现,保留标题、案例、代码、表格、链接以及原文引用的演示图片。

shadcn Component Boundaries

Activation Contract

Load this skill when creating, moving, wrapping, or reviewing UI components in a project that uses shadcn.

Hard Rules

  1. Resolve paths from components.json (its aliases for components and ui) or the installed shadcn skill's project-context command. Never assume components/ versus src/components/.
  2. Reserve the resolved ui directory for registry-managed primitives installed from shadcn or compatible registries.
  3. Never place product-owned wrappers, composites, sections, domain components, or feature behavior in the ui directory.
  4. Put reusable product-owned components under common/ in the resolved components directory.
  5. Put feature-owned components in a named feature folder or colocate them with that feature.
  6. Compose: wrap a registry primitive from common/ or a feature folder instead of adding product behavior to the primitive.
  7. Keep dependencies one-way: feature → common → ui. The ui directory never imports from common or feature folders.
  8. Use semantic tokens from the global stylesheet. Treat tokens as quarks and registry primitives as atoms; do not force molecule or organism names into paths.
  9. When @shadcn/lint is configured, shadcn/no-restyle enforces the ui boundary: call sites may pass layout classes through className, but look comes from variants and sizes. Add a variant to the primitive instead of restyling at the call site.

Decision Gates

Component ownershipDestination
shadcn or compatible registry primitiveresolved ui directory
reusable product-owned component<components>/common/
feature-specific component<components>/<feature>/ or feature colocation
route or page compositionframework route/page directory
theme tokenglobal stylesheet variables

Execution Steps

  1. Read components.json and resolve the components and ui aliases to directories.
  2. Search installed primitives before creating custom markup.
  3. Classify ownership and reuse scope with the table above.
  4. Place the component; see references/placement-examples.md for edge cases.
  5. Verify no product-owned file entered ui and no reverse import was introduced.

Output Contract

State the ownership classification and final path for every component created or moved, and confirm the dependency direction holds.

References

按任务相关推荐

来自同一仓库

更多 Skills

全部 Skills