mcpField
S
ss-pattern

ss-pattern

github.com/bitjaruデザイン・UI993828 回インストール1 日前に更新
リポジトリ

ss-pattern について

ss-patternは、再利用可能なUIパターンを作るStyleSeedスキルです。選択した種類に応じて既存コンポーネントを組み合わせ、セマンティックトークンを使い、ページとの関係も評価します。

主な機能

  1. 01レイアウト・データ・操作パターンを提供
  2. 02既存コンポーネントからパターンを構成
  3. 03レシピに沿ってセマンティックトークンを使用
  4. 04動的コンテンツ用のプロパティを持つコンポーネントを作成
  5. 05ページとの関係をスコアで確認

活用シーン

  1. 01データテーブルやランキングリストの作成
  2. 02フィルターバーや検索ヘッダーの作成
  3. 03公共サービスのタスク手順の構成
  4. 04再利用可能なページパターンの作成

インストール

コマンドをコピーしてターミナルで実行します。

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

インストール後、Claude Code で/ss-patternを入力して読み込まれたか確認します。

詳細

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

UI パターンジェネレーター

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

.styleseed/project.json と .styleseed/artifacts/index.json が存在する場合は、まず要求された成果物 ID を解決してから、.styleseed/bundles/<artifact-id>.md と .styleseed/manifests/<artifact-id>.json のみを読み込んでください。レジストリを使用するプロジェクトでは、グローバルなレガシーバンドルにフォールバックしないでください。レガシープロジェクトで .styleseed/effective-rules.md を使用できるのは、レジストリが存在しない場合のみです。

使用しない場合

  • 単一のプリミティブコンポーネントの場合 → /ss-component を使用
  • モバイル画面全体の場合 → /ss-page を使用
  • 複数ページにわたるユーザーフロー全体の場合 → /ss-flow を使用
  • デザイントークンや色・間隔の決定の場合 → /ss-tokens を使用

パターンの種類：$0 説明：$ARGUMENTS

利用可能なパターンの種類

レイアウトパターン
  • focal-summary：主要な状態、概要説明、成果物、または決定事項を1つ際立たせる
  • panel-section：関連するコントロールや根拠をまとめた、整列された作業パネル
  • flat-step：明確なラベル、ヘルプ、復旧手段を備えた公共サービスのタスクステップ
  • reading-section：アプリカードを使わず、範囲を定めた文章、図、キャプション、引用、または出典グループを配置する
  • resource-collection：レシピとユーザーの目的に応じて選択する行、テーブル、グリッド、または並び
  • canvas-tools：補助的なツールグループを控えめに配置した、焦点となる成果物／キャンバス
データ表示パターン
  • data-table：ヘッダーと行を備えたテーブル
  • detail-card：キーと値のペア表示
  • chart-card：Recharts チャートを囲むカード
  • ranking-list：強調表示を含む番号付きランキング
インタラクティブパターン
  • action-sheet：アクションボタンを備えたボトムシート
  • filter-bar：横並びのフィルター／タブバー
  • search-header：ヘッダー領域の検索入力欄

手順

  1. どちらかのレジストリファイルが存在する場合は、有効なレジストリが完全に揃っていることを必須とします。--artifact <id> で選択した成果物を解決し、.styleseed/bundles/<id>.md と .styleseed/manifests/<id>.json のみを読み込んでください。出力が不足している、または古い場合は、対象を限定して解決し、再確認してください。 設定が無効でも、フォールバックやセットアップの再実行は許可されません。 どちらのレジストリファイルも存在しない場合に限り、レガシーの STYLESEED.md を解決し、 .styleseed/effective-rules.md と .styleseed/manifest.json を読み込んでください。 次に、以下を確認します。

    • 利用可能なプリミティブについて components/ui/
    • 既存のパターンについて components/patterns/

  2. 既存のコンポーネントを組み合わせてパターンを作成してください。プリミティブを再作成してはいけません。

  3. 既定のカード表現を一律に適用せず、選択したレシピに従ってください。

    • コンテインメントが適切な場合に限り、ss-pattern-surface を使用してください。
    • 固定幅の共通ガターをハードコードせず、ss-page-gutter または ss-page-padding を使用してください。
    • レシピに合わせた形状には、ss-pattern-inset、ss-pattern-control、ss-pattern-icon を使用してください。
    • 公共サービス向けおよびエディトリアル向けのレシピでは、通常、フラットなフロー、罫線、余白を優先します。
    • エンタープライズ／開発者向けのレシピでは、整列されたパネル、行、テーブル、コンパクトなコントロールを優先します。
    • 落ち着いたコンシューマー向けのレシピでは柔らかなグループ表現を使用できます。表現力豊かなブランド向けでは、製品固有の構成を加えてください。

  4. すべてのビジュアルプロパティにセマンティックトークンを使用してください。

  5. 動的コンテンツ用の props を備えた、再利用可能なコンポーネントとしてパターンを作成してください。

  6. /ss-score を実行し、パターンが独立した見栄えのよいカードではなく、ページと機能的に連携していることを確認してください。

コメント

Markdown 対応