mcpField
S
ss-component

ss-component

github.com/bitjaru设计与 UI993836 次安装1 天前更新
代码仓库

关于 ss-component

ss-component 是面向已配置 StyleSeed React/Tailwind v4 项目的组件生成技能。它先解析注册表或旧版配置，再依据项目实际令牌、组件 API 和无障碍约定生成组件。

主要功能

  1. 01解析注册表或旧版配置
  2. 02读取已批准的设计令牌与组件上下文
  3. 03遵循项目组件 API 与样式约定
  4. 04支持变体、className 与无障碍属性
  5. 05按指定实现范围放置命名导出组件

适用场景

  1. 01在现有设计系统中创建新组件
  2. 02为已有组件添加符合项目规范的变体
  3. 03按项目令牌生成可访问的 React 组件

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/bitjaru/styleseed --skill ss-component

安装后在 Claude Code 中输入/ss-component确认已加载。

详细介绍

在此工作流之前，请先执行一次本会话的更新预检。

UI 组件生成器

注册表优先的产物边界

如果 .styleseed/project.json 或 .styleseed/artifacts/index.json 中任一文件存在，则要求注册表完整且有效。编写组件前，解析请求的产物 ID；如果范围不明确，请询问。绝不回退到全局旧版包、创建 STYLESEED.md，也不要因为注册表不完整、无效或没有编译输出而重新开始设置。

找到已安装的 ss-resolve 技能目录（下文显示为 <ss-resolve>），然后在目标项目根目录中使用当前 Agent（codex、claude 等）运行此只读检查：

node "<ss-resolve>/scripts/resolve-context.mjs" --project-root . --artifact <artifact-id> --agent <agent> --check

对于有效注册表，如果编译输出缺失或已过时，请在不带 --check 的情况下运行同一命令，然后再次检查。遇到无效配置或安装错误时，请停止；不要为了让检查通过而更改已批准的选项。成功后，仅将所选的 .styleseed/bundles/<artifact-id>.md 和 .styleseed/manifests/<artifact-id>.json 作为编译方法和溯源依据读取。影响多个产物的共享组件需要分别解析并检查每个受影响的产物，不要合并它们的包。

只有在两个注册表文件均不存在时，旧版项目才使用以下路径。保留 STYLESEED.md；如果该文件缺失，请先运行设置，再编写组件代码。

node "<ss-resolve>/scripts/resolve-context.mjs" --project-root . --from-lock STYLESEED.md --agent <agent> --check

如果旧版输出缺失或已过时，请在不带 --check 的情况下运行同一命令，然后再次检查。仅在成功后读取 .styleseed/effective-rules.md 和 .styleseed/manifest.json。

不适用场景

  • 用于整页搭建 → 使用 /ss-page
  • 用于组合式多组件模式 → 使用 /ss-pattern
  • 用于调整现有组件 — 直接编辑文件即可
  • 用于未配置 StyleSeed React/Tailwind v4 组件系统的项目

生成新组件：$0 描述：$ARGUMENTS

说明

  1. 应用上文所述的注册表／旧版项目边界规则，然后阅读实际实现上下文：

    • 对于注册表工件，从其 implementation.sourceRoots 和 implementation.tokenFiles 入手。对于旧版项目，从项目源码中找出现有组件和 样式表的入口。
    • 沿着启用的样式表导入关系，找到此工件使用的令牌定义和配方辅助函数。 css/theme.css 和 css/recipes.css 只是示例，并非必需位置。
    • 阅读附近的现有基础组件（例如项目的按钮）及其实际导入、属性、变体和状态。 如果现有组件已符合需求，请复用。
    • 保留项目批准使用的令牌和组件 API。如果缺少必需的上下文或不受支持，请在 臆造文件、别名、令牌或替代方案之前报告缺口。

  2. 严格遵循以下约定：

    • 使用 function 声明（不要使用 const）
    • 添加 data-slot="component-name" 属性
    • 使用项目现有的 cn() 工具和已验证的导入路径来合并 className
    • 使用 React.ComponentProps<> 进行属性类型定义
    • 始终支持用于覆盖样式的 className 属性
    • 如果组件有变体，使用 CVA（class-variance-authority）
    • 使用语义化颜色令牌（bg-card、text-foreground），绝不要使用内联十六进制颜色值

  3. 设计令牌用法：

    • 颜色：text-foreground、bg-card、text-brand、text-muted-foreground、border-border
    • 图案表面：ss-pattern-surface；内嵌区域／控件／图标使用对应的 ss-* 类
    • 基础组件使用项目的令牌刻度；不要硬编码单一的圆角或阴影风格
    • 间距遵循所选配方中可重复使用的节奏
    • 动效：duration-[var(--duration-fast)]、ease-[var(--ease-default)]

  4. 字体排版规则：

    • 展示文字（36–48px）：leading-none tracking-[-0.02em]
    • 标题（18–24px）：leading-snug tracking-[-0.01em]
    • 正文（14–17px）：leading-normal（默认字距）
    • 全大写说明文字（10–13px）：tracking-[0.05em]
    • 使用 size-* 简写，而不是 w-* h-*
    • 使用 ms-*/me-*，而不是 ml-*/mr-*（逻辑属性）

  5. 无障碍要求：

    • 触控热区：最小 44x44px（min-h-11 min-w-11）；优先面向指针操作的桌面控件可以使用契约批准的 36–40px 尺寸，同时保留键盘访问能力并满足适用的无障碍下限
    • 支持透传 aria-* 属性
    • 键盘焦点使用 focus-visible:ring-2 focus-visible:ring-ring
    • 动画应遵循 prefers-reduced-motion

  6. 将组件导出为具名导出（不要使用默认导出）

  7. 将文件放在第 1 步确定的现有组件目录中，并置于受影响工件的实现范围内。 src/components/ui/ 是常见布局，不是每个项目都应创建的路径。将组合式模式放在 /ss-pattern。

评论

支持 Markdown