format-storybook

format-storybook

カタログ用スタブ — スキルの完全版はこちら：mikemai2awesome/agent-skills

判断ツリー

1. スキルの完全版はすでにインストールされていますか？

   • グローバル：grep -q "^das:" ~/.agents/skills/format-storybook/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
   • プロジェクト：grep -q "^das:" .agents/skills/format-storybook/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
   • das: ブロックがない → スキルの完全版がインストール済みです。呼び出して作業を進めてください
   • das: ブロックがある → ステップ 2 に進みます

2. スコープを検出してからインストールします：

   [ -e ~/.agents/skills/format-storybook ] && echo "global" || echo "project"
   

   グローバル：

   npx skills add mikemai2awesome/agent-skills --skill format-storybook -g -y
   

   プロジェクト：

   npx skills add mikemai2awesome/agent-skills --skill format-storybook -y
   

   Claude Code： 次のいずれかのコマンドを、先頭に ! を付けたチャットメッセージとして送信すると、会話を離れずに実行できます。

概要

コンポーネントライブラリ全体で、スケーラブルで保守しやすい Storybook のパターンを徹底します。

• ファイル構成 — ストーリーをコンポーネントと同じ場所に配置します。stories/component.stories.js + stories/template.js + 任意の component.docs.mdx
• テンプレートの合成 — マークアップを重複させず、子コンポーネントのテンプレートをインポートします。コンポーネントごとに信頼できる唯一の情報源を維持します
• コントロールと args — 段階的な情報開示：適切なデフォルト値と、特殊なケース向けの任意のコントロールを用意します。arg の型と説明も設定します
• ビジュアルリグレッション — Chromatic の統合パターンとスナップショットテストの戦略
• CSF の規約 — Component Story Format 3.0、デフォルトエクスポートのメタデータ、名前付きストーリーのエクスポート
• ドキュメント — MDX ドキュメントページ、コンポーネント API テーブル、使用例、推奨・非推奨のパターン

使用しない場合

• React Native の Storybook ストーリーに特化した場合 → storybook-rn-skill を使用します
• デザイントークンの生成 → design-tokens-skill を使用します
• コンポーネントをゼロから実装する場合 → shadcn-ui または baseline-ui を使用します