AgentSkillsCN

add-component

按照组件设计规范，新增设计系统组件。当您在软件包或设计领域中创建 Modal、UserCard，或任何基础组件与区块时，可选用此方法。

SKILL.md
--- frontmatter
name: add-component
description: Add a new design system component following constitution patterns. Use when creating Modal, UserCard, or any primitive/block in packages/design.
argument-hint: "[ComponentName]"

Add a new design system component to packages/design following project constitution.

Component structure (per constitution):

  • •ComponentName.tsx – main UI
  • •ComponentName.skeleton.tsx – skeleton variant
  • •ComponentName.error.tsx – error variant (when applicable)
  • •index.ts – exports
  • •Add design-system.css variants if needed

Rules:

  • •Generic only: no API/SDK imports; standard TypeScript and React types
  • •Props: string, number, boolean, ReactNode, ReactElement, Record<string, unknown>
  • •Tailwind only; use design-system.css tokens (btn, card, input-base, skeleton)
  • •British English, full words

Component to add: $ARGUMENTS

  1. •Create the component directory under primitives/, components/, blocks/, or layout/
  2. •Implement main component, skeleton, error (if needed), index
  3. •Export from packages/design/src/index.ts
  4. •Add a Storybook story in apps/storybook with skeleton and error variants