ss-component

このワークフローを実行する前に、セッションごとに一度だけ行う更新前の確認に従ってください。

UI コンポーネントジェネレーター

レジストリー優先の成果物境界

.styleseed/project.json または .styleseed/artifacts/index.json のいずれかが存在する場合は、完全で有効なレジストリーが必要です。コンポーネントを書き込む前に、要求された成果物 ID を解決してください。範囲が曖昧な場合は確認してください。レジストリーが不完全、無効、またはコンパイル済み出力がないことを理由に、グローバルなレガシーバンドルにフォールバックしたり、STYLESEED.md を作成したり、セットアップをやり直したりしないでください。

インストール済みの ss-resolve スキルディレクトリ（以下では <ss-resolve> と表記）を特定し、対象プロジェクトのルートから、アクティブなエージェント（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

Instructions

1. 上記のレジストリとレガシーの境界に従い、実際の実装コンテキストを確認します。

   • レジストリアーティファクトの場合は、implementation.sourceRoots と implementation.tokenFiles から確認を始めます。レガシープロジェクトの場合は、プロジェクトのソースから 既存のコンポーネントとスタイルシートのエントリーポイントを特定します。
   • 有効なスタイルシートのインポートをたどり、このアーティファクトで使われているトークン定義とレシピヘルパーを確認します。 css/theme.css と css/recipes.css は例であり、必須の配置場所ではありません。
   • 近くにある既存のプリミティブ（プロジェクトのボタンなど）と、実際のインポート、 props、バリアント、状態を確認します。既存のコンポーネントが要件に合う場合は、それを再利用します。
   • プロジェクトで承認済みのトークンとコンポーネント API を維持します。必要なコンテキストが不足している場合や、未サポートの場合は、 ファイル、エイリアス、トークン、置き換えを独自に追加する前に、不足点を報告します。

2. 次の規約に厳密に従います。

   • const ではなく、function 宣言を使います。
   • data-slot="component-name" 属性を追加します。
   • プロジェクトに既存の cn() ユーティリティと、確認済みのインポートパスを使って className を結合します。
   • props の型付けには React.ComponentProps<> を使います。
   • オーバーライド用の className prop を必ずサポートします。
   • コンポーネントにバリアントがある場合は、CVA（class-variance-authority）を使います。
   • セマンティックカラーのトークン（bg-card、text-foreground）を使い、インラインの 16 進数カラーは使いません。

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]
   • w-* h-* の代わりに size-* の短縮形を使います。
   • ml-*/mr-* の代わりに ms-*/me-* を使います（論理プロパティ）。

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 に配置します。