mcpField
S
ss-page

ss-page

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

ss-page について

ss-page は、StyleSeed プロジェクトで新しいページを作成するスキルです。レジストリまたは旧設定からデザイン手法を読み込み、既存のパターンやコンポーネントを組み合わせ、生成後の採点と検証を求めます。

主な機能

  1. 01レジストリまたは旧デザイン設定の解決
  2. 02既存のシェルやコンポーネントによるページ構成
  3. 03レシピに基づくレイアウトとコンテンツ構造の選択
  4. 04セマンティックカラーとセーフエリア余白の使用
  5. 05生成後の採点と検証

活用シーン

  1. 01既存の StyleSeed プロジェクトでページを作成
  2. 02選択したデザインレシピに沿ったページ構築
  3. 03レイアウト、タッチ領域、トークン使用の確認

インストール

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

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

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

詳細

このワークフローを始める前に、セッションごとに1回実行する更新の事前確認に従ってください。

製品ページのスキャフォールダー

レジストリ優先のアーティファクト境界

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

使用しない場合

  • 既存のページ内に単一の構成済みパターンを作成する場合 → /ss-pattern を使用
  • 複数ページにわたるナビゲーション構造の場合 → 先に /ss-flow を使用
  • 既存ページを調整する場合 — ファイルを直接編集

新しいページを作成：$0 説明：$ARGUMENTS

手順

  1. 有効なデザイン手法を解決して読み込みます。

    • いずれかのレジストリファイルが存在する場合は、完全で有効なレジストリを必須とし、--artifact <id> で選択したアーティファクトを解決します。.styleseed/bundles/<id>.md と .styleseed/manifests/<id>.json を読み込みます。エラー発生時にセットアップをやり直したり、レガシー形式にフォールバックしたりしないでください。
    • どちらのレジストリファイルも存在しない場合に限り、STYLESEED.md を解決し、.styleseed/effective-rules.md と .styleseed/manifest.json を読み込みます。
    • この承認済みのビルドで出力が不足または古くなっている場合は、承認済みの判断を変更せず、対応するプロジェクト所有の設定から解決し、再確認します。
    • ページレイアウトには components/patterns/page-shell.tsx
    • ヘッダーパターンには components/patterns/top-bar.tsx
    • ナビゲーションには components/patterns/bottom-nav.tsx

  2. ページ構造のテンプレート：

import { PageShell, PageContent } from "@/components/patterns/page-shell"
import { TopBar, TopBarAction } from "@/components/patterns/top-bar"
import { BottomNav } from "@/components/patterns/bottom-nav"

export default function PageName() {
  return (
    <PageShell recipe="enterprise-workbench">
      <TopBar
        logo={/* logo or page title */}
        subtitle={/* optional subtitle */}
        actions={/* optional action buttons */}
      />
      <PageContent>
        {/* Compose the grammar's focal point and recipe-fit sections */}
      </PageContent>
      <BottomNav items={[/* nav items */]} activeIndex={0} />
    </PageShell>
  )
}

  1. 選択したアダプターとレシピを適用します。

    • PageShell に recipe="<manifest selection.recipe>" を設定するか、カスタムアーティファクトのルートに data-styleseed-recipe="<id>" を設定します。
    • ロックのビューポートとアダプターのレスポンシブ仕様を使用します。モバイル幅を 430px と決めつけないでください。
    • 同梱パターンに適合する場合は、ss-page-padding、ss-page-gutter、ss-pattern-stack、ss-pattern-surface、ss-pattern-inset、ss-pattern-control、ss-pattern-icon を使用します。
    • レシピに応じてコンポーネントを選択します。ワークベンチには整列したパネルや行、公共サービスにはフラットなステップ、エディトリアルには読書の流れ、クリエイティブツールには焦点を絞ったキャンバスやツール群を使用し、ソフトなグルーピングはレシピで指定されている場合に限ります。
    • ページにはカード、パネル、罫線、余白、行、テーブル、またはキャンバスを含められます。すべてのコンテンツブロックを無理にカードにしないでください。

  2. すべての色にセマンティックトークンを使用し、16進数値をハードコードしないでください。

  3. 可能な限り既存のコンポーネント（ui/ と patterns/）を組み合わせてページを作成します。

  4. セーフエリア：最新のデバイス向けに env(safe-area-inset-*) のパディングを含めます。

  5. 生成後の検証（必須）： /ss-score を実行してから /ss-verify を実行します。次の点を確認してください。

    • 最初のビューポートで、文法のユーザータスクと1つの焦点が明確に示されている
    • 囲み、形状、コントロール、コンテンツ群、密度、ナビゲーションがレシピに適合している
    • 識別できる主要アクションが1つある。追加の色には仕様で定義された役割がある
    • 16進数値がハードコードされていない（すべてセマンティックトークン）
    • セクションの種類が交互になっている（同じ種類が連続しない）
    • 余白に、繰り返し適用できるレシピに適合したリズムを使用している
    • タッチ操作面ではタッチターゲットが 44px 以上。ポインター優先のデスクトップ用コントロールは、承認済みアダプター／コンポーネント仕様に従い、36～40px が許容される場合があります 制約付きビルドゲートのループに従ってください。ゲートを通過しなかった場合も、実際の結果と残っている失敗を報告してください。ループを終了するために、承認済みの判断を置き換えたり、受け入れられたと主張したりしないでください。

コメント

Markdown 対応