mcpField
U
ui-page

ui-page

github.com/sickn33デザイン・UI48.7k76 回インストール今日更新
リポジトリ

ui-page について

既存の StyleSeed プロジェクトでモバイルページを作成するスキルです。プロジェクトのレイアウト規約に沿って画面を組み立て、指定された視覚・操作ルールを確認します。

主な機能

  1. 01StyleSeed パターンでページを作成
  2. 02既存の UI とページコンポーネントを再利用
  3. 03セマンティックカラーと間隔の規則に準拠
  4. 04タッチ領域とページレイアウトを確認
  5. 05生成ページをデザインルールに照らして検証

活用シーン

  1. 01モバイルアプリの新規ページ作成
  2. 02プロジェクトのコンポーネントで画面を構築
  3. 03新規ページがデザインルールに沿うか確認

インストール

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

$npx skills add https://github.com/sickn33/agentic-awesome-skills --skill ui-page

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

詳細

モバイルページのスキャフォールディング

使用するタイミング

StyleSeed のレイアウトパターンを使って新しいモバイルページ／画面をスキャフォールディングする必要がある場合に、このスキルを使用します。

使用しないタイミング

  • 既存ページ内の単一の組み合わせパターンの場合 → /ss-pattern を使用します
  • デスクトップ専用の画面の場合 — このスキルはモバイルファーストです
  • 複数ページにわたるナビゲーション構造の場合 → まず /ss-flow を使用します
  • 既存ページを調整する場合 — ファイルを直接編集します

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

手順

  1. デザインシステムのリファレンスを読みます：

    • ファイル構造と規約については CLAUDE.md
    • ページレイアウトについては components/patterns/page-shell.tsx
    • ヘッダーパターンについては components/patterns/top-bar.tsx
    • ナビゲーションについては components/patterns/bottom-nav.tsx

  2. ページ構造の例（コンパイル前に、コメントのみの JSX プロパティをすべて実際の値に置き換えてください）：

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>
      <TopBar
        logo={/* logo or page title */}
        subtitle={/* optional subtitle */}
        actions={/* optional action buttons */}
      />
      <PageContent>
        {/* Page sections with space-y-6 */}
      </PageContent>
      <BottomNav items={[/* nav items */]} activeIndex={0} />
    </PageShell>
  )
}

  1. レイアウトのルール：

    • コンテナー：max-w-[430px]（モバイルのビューポート）
    • ページの背景：bg-background
    • セクションの水平方向のパディング：px-6
    • セクション間の垂直方向の間隔：space-y-6
    • ナビゲーション用の下部パディング：pb-24
    • カード：bg-card rounded-2xl p-6 shadow-[var(--shadow-card)]

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

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

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

  5. 生成後の検証（必須）： ページを作成した後、ゴールデンルールに照らして検証します：

    • すべてのコンテンツがカード内に配置されている（背景に直接コンテンツを置かない）
    • アクセントに使用する色は --brand のみ（他のアクセントカラーは使用しない）
    • 16 進数値をハードコードしていない（すべてセマンティックトークンを使用）
    • セクションの種類が交互になっている（同じ種類を連続させない）
    • 数値と単位の比率が 2:1 になっている
    • 間隔に 6px の倍数を使用している（p-1.5、p-3、p-6）
    • 単一のカードには mx-6、グリッド／カルーセルには px-6 を使用している
    • すべてのインタラクティブ要素でタッチターゲットが 44px 以上になっている 違反が見つかった場合は、ページをユーザーに提示する前に修正します。

制限事項

  • タスクが上流のソースおよびローカルプロジェクトのコンテキストに明確に合致する場合にのみ、このスキルを使用してください。
  • 変更を適用する前に、コマンド、生成コード、依存関係、認証情報、外部サービスの動作を確認してください。
  • 例を、環境固有のテスト、セキュリティレビュー、または破壊的もしくは高コストな操作に対するユーザーの承認の代わりとして扱わないでください。

実行範囲

このガイドは、既存の StyleSeed プロジェクトを対象としています。記載されているプロジェクトのパス、コンポーネント、トークン、/ss-* コマンドは、この単一ファイルのエントリーポイントには含まれていません。実際のプロジェクトルートを見つけ、編集前に前提条件を確認してください。存在しないリソースは作り上げず、報告してください。ホストがサポートする呼び出し方法と、既存のプロジェクト規約を使用してください。レイアウトの数値はデザインシステム上の選択であり、普遍的なユーザビリティの保証ではありません。実際のインターフェースで、キーボード操作、レスポンシブ表示時のオーバーフロー、動きの軽減設定をテストしてください。

コメント

Markdown 対応