SAIスキル大辞典Agent Skills Dictionary
⌕
文字
トップ›Skill›vercel-composition-patterns
UI/UX

vercel-composition-patterns

Reactコンポーネント設計パターン

Reactのコンポーネントを柔軟に組み合わせ、保守しやすいAPIへ設計するための指針です。

AIスキル大辞典による日本語要約
品質評価86/100評価確度：十分
人気度（GitHub Star） 100発掘スコア 56
01

このSkillでできること

  • ✓boolean propの増えすぎを見直す
  • ✓Compound Componentの構成を検討する
  • ✓Contextやrender propsの使い分けを考える
  • ✓React 19 APIを含む設計方針を確認する
02

使い方

01
STEP 1

対象コンポーネントの責務とpropsを確認する

02
STEP 2

組み合わせによる設計へ分解できる箇所を探す

03
STEP 3

状態管理と公開APIを整理する

04
STEP 4

既存利用箇所への影響を確認する

03

Skillのインストール

初心者におすすめ

AIにこのSkillを追加してもらう

GitHub URLごとCodexやClaude Codeへ渡し、現在の環境に合う方法を判断してもらいます。

このGitHubリポジトリにあるSkillを確認し、現在の環境に適した方法でインストールしてください。
インストール後、正常に利用できることを確認し、基本的な使い方も簡潔に説明してください。

Repository:
https://github.com/vercel-labs/agent-skills
04

このSkillを使うプロンプト例

Skill名を明示すると、意図したSkillを使わせやすくなります。自動発動型では必須とは限りません。

このReactコンポーネントのboolean propが増えすぎています。composition patternを使った設計案を出して。
05

安全性チェック

自動解析による参考情報です。Skillの安全性を保証するものではありません。

外部API通信検出あり
Shellコマンド実行検出あり
ファイル読み取り明確な記述なし
ファイル書き込み明確な記述なし
ネットワークアクセス検出あり
認証情報明確な記述なし
検出根拠を見る
  • shell: el.com/claim-deployment?code=... ``` ## Installation ```bash npx skills add vercel-labs/agent-skills ``` ## Usage Skills are automatically available
  • shell: act per skill. Build the same artifacts locally with: ```bash npm ci --ignore-scripts node scripts/build-discovery-index.mjs https://example.com/skills
  • network: de block omitted] Deployment successful! Preview URL: https://skill-deploy-abc123.vercel.app Claim URL: https://vercel.com/claim-deployment?code=... `
  • network: L: https://skill-deploy-abc123.vercel.app Claim URL: https://vercel.com/claim-deployment?code=... ``` ## Installation ```bash npx skills add vercel-l
06

関連Skill