mcpField
P
pma-web

pma-web

github.com/zzci開発2390 回インストール3 日前に更新
リポジトリ

pma-web について

PMA 管理の SPA や社内ツール向けに、React、TypeScript、Vite と関連するルーティング、データ、UI 技術の実装基準を示すスキルです。作業に応じたリファレンスを読み込み、構成からテスト、アクセシビリティ、セキュリティ確認まで案内します。

主な機能

  1. 01React と TypeScript のフロントエンド基準
  2. 02TanStack Router のファイルベースルーティング
  3. 03クエリ状態とクライアント状態の境界
  4. 04タスク別リファレンスの読み込み
  5. 05テスト・アクセシビリティ・セキュリティ確認

活用シーン

  1. 01PMA 管理 SPA の立ち上げ
  2. 02ルート、レイアウト、テーマの変更
  3. 03API 連携とクエリ状態の実装
  4. 04マージ前のテストと UI セキュリティ確認

インストール

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

$npx skills add https://github.com/zzci/skills --skill pma-web

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

agents/
openai.yaml
references/
baseline.md
review.md
routing-and-ui.md
runtime-and-data.md

詳細

Web フロントエンド実装ガイド

このスキルは /pma と併用してください。/pma はワークフロー、承認、タスク追跡を管理し、このガイドでは作業の承認後に適用する実装の基準を定めます。

このエントリーファイルは簡潔に保ちます。現在のタスクに必要なリファレンスパックのみを読み込んでください。

対象範囲

PMA が管理する SPA および内部ツールのフロントエンドプロジェクトで、以下を使用するものが対象です。

  • React + TypeScript + Vite
  • ファイルベースの型安全なルーティングに TanStack Router
  • サーバー状態に TanStack Query
  • UI 専用のクライアント状態に Zustand
  • @base-ui/react と Tailwind CSS を使用する shadcn/ui（base-nova）— 許可される唯一の UI エコシステム（references/baseline.md の UI Library Policy）

これらはすべて最新の安定版を使用します。このスキルではバージョンを指定しません（/pma references/workflow.md の Dependency Freshness を参照してください）。

単一アプリの構成をデフォルトとします。リポジトリが実際に複数のアプリや共有パッケージを含む場合に限り、Bun モノレポを使用してください。Rust または Go のサービスに単一の SPA を追加するだけであれば、ワークスペースは必要ありません。

SSR を優先するサイト、コンテンツサイト、PMA 以外のプロジェクトは対象外です。

読み込み順

  1. 必ず最初に references/baseline.md を読み込みます。
  2. ルート構成、プロバイダー、テーマ設定、Tailwind、shadcn/ui を変更する場合は、references/routing-and-ui.md を読み込みます。
  3. API 連携、クエリ状態、i18n、Vite の設定、またはフロントエンド側の開発スクリプトを変更する場合は、references/runtime-and-data.md を読み込みます。nsl プロトコルの全体（登録パターン、--strip、NSL_PORT、フォールバック）については、/pma references/dev-environment.md を読み込んでください。
  4. リリースチェック、テスト、アクセシビリティ、またはセキュリティに関わる UI の動作を変更する場合は、references/review.md を読み込みます。

クイックルーティング

  • 新しいアプリのセットアップ、またはリポジトリの再構成（単一アプリかモノレポか）→ references/baseline.md
  • ルーター、レイアウト、プロバイダー、エントリーポイント、shadcn、Tailwind、テーマ → references/routing-and-ui.md
  • ランタイム（HTTP クライアント、クエリクライアント、i18n、Vite の設定）→ references/runtime-and-data.md
  • 開発 URL ルーティング（nsl）→ references/runtime-and-data.md（プロトコル全体 → /pma references/dev-environment.md）
  • テスト → references/review.md
  • CI とデリバリー（lint、typecheck、build、アクセシビリティ、セキュリティレビュー）→ references/review.md

リファレンスパック

  • references/baseline.md スタックのデフォルト、品質ゲート、ワークスペースのレイアウト、規約、基本スクリプト。
  • references/routing-and-ui.md TanStack Router のレイアウト、プロバイダーの構成、エントリーポイント、shadcn/ui、Tailwind、テーマ設定。
  • references/runtime-and-data.md クエリクライアント、HTTP レイヤー、状態の境界、i18n、Vite の設定、フロントエンド側からの nsl 呼び出し。nsl プロトコルの全体は /pma references/dev-environment.md に記載されています。
  • references/review.md 検証ゲート、および UI 変更のアクセシビリティとセキュリティのレビューチェックリスト。

受け入れチェックリスト

マージ前に確認します。

  • lint、typecheck、build が成功する
  • カバレッジを含めてテストが成功する。目標は 80% 以上
  • UI の制約が守られている。Radix やその他のコンポーネントエコシステムを使用していない（references/review.md の grep ゲート）
  • 新しいコンポーネントが references/baseline.md の UI Library Policy にある調達順序に従っている
  • ルーティングが src/app/routes/ 以下のファイルベースであり、routeTree.gen.ts が生成される
  • テーマ設定がデュアルチャネル（:root / .dark 変数と @theme inline マッピング）を維持しており、コンポーネントで色をハードコードしていない
  • nsl の開発ルーティングが動作する（bun run dev が <name>.localhost を提供し、API が /api で到達可能）

プロジェクトが意図的にこれらのデフォルトから逸脱する場合は、提案でその逸脱を明示し、リポジトリの既存パターンに一貫して従ってください。

コメント

Markdown 対応