Communitygithub.com

React 組合模式

可擴展的 React 組合模式。適用於重構具有大量布林 props 的元件、建構靈活的元件庫或設計可重複使用的 API。觸發於涉及複合元件、render props、Context Provider 或元件架構的任務。包含 React 19 API 變更。

React 組合模式 是什麼?

該技能為 React 開發者提供了一套經過實證的組合模式,旨在構建靈活且易於維護的元件。其核心目標是解決布林 props 泛濫的問題,通過採用複合元件、提升狀態和組合內部實作等方式,使程式碼庫在擴展時對人類和 AI 代理都更加友好。技能內容按優先級分為四大類別:元件架構(高優先級)、狀態管理(中優先級)、實作模式(中優先級)和 React 19 API(中優先級,僅限 React 19+)。每個類別包含具體的規則,例如避免布林 props、使用複合元件、定義通用 Context 介面以及利用 use() 取代 useContext()。該技能支援 Claude Code、Cursor 等平台,開發者可以通過引用對應的規則文件來獲得詳細的程式碼範例和解釋。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/PhuongDeveloper/landingpage/tree/HEAD/.agents/skills/vercel-composition-patterns

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

React 組合模式 是做什麼的?

用於構建靈活、可維護 React 元件的組合模式。避免布林 props 泛濫,採用複合元件、提升狀態和組合內部實作。這些模式使程式碼庫在擴展時,對人類和 AI 代理都更易於處理。

何時套用

請在以下情況參考這些指南:

  • 重構具有大量布林 props 的元件
  • 構建可重複使用的元件庫
  • 設計靈活的元件 API
  • 審查元件架構
  • 處理複合元件或 Context Provider

按優先級分類的規則

優先級類別影響力前綴
1元件架構高architecture-
2狀態管理中state-
3實作模式中patterns-
4React 19 API中react19-

快速參考

1. 元件架構 (高優先級)

  • architecture-avoid-boolean-props - 不要添加布林 props 來自訂行為;請使用組合
  • architecture-compound-components - 使用共享 Context 構建複雜元件

2. 狀態管理 (中優先級)

  • state-decouple-implementation - Provider 是唯一知道狀態如何管理的地方
  • state-context-interface - 定義包含 state、actions、meta 的通用介面以進行依賴注入
  • state-lift-state - 將狀態提升到 Provider 元件中,以便兄弟元件存取

3. 實作模式 (中優先級)

  • patterns-explicit-variants - 建立明確的變體元件,而非使用布林模式
  • patterns-children-over-render-props - 使用 children 進行組合,而不是 renderX props

4. React 19 API (中優先級)

⚠️ 僅限 React 19+。 如果使用 React 18 或更早版本,請跳過此部分。

  • react19-no-forwardref - 不要使用 forwardRef;使用 use() 代替 useContext()

如何使用

閱讀單個規則檔案以獲取詳細說明和程式碼範例:

rules/architecture-avoid-boolean-props.md
rules/state-context-interface.md

每個規則檔案包含:

  • 為何重要的簡短說明
  • 錯誤的程式碼範例及解釋
  • 正確的程式碼範例及解釋
  • 其他上下文和參考資料

完整彙編文件

如需包含所有規則展開的完整指南:AGENTS.md

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

PhuongDeveloper/landingpage

Deploy applications and websites to Vercel. Use when the user requests deployment actions like "deploy my app", "deploy and give me the link", "push this live", or "create a preview deployment".

PhuongDeveloper/landingpage

Postgres best practices maintained by Supabase, for Postgres running anywhere. Load this skill BEFORE writing or changing anything that lives in a Postgres database: creating or altering tables and columns (including choosing column types), schema design, migrations and declarative schema files, RLS policies and the tests that verify them, indexes, triggers, database functions, queues and scheduled jobs (pg_cron, pgmq), vector/semantic search (pgvector), and restoring dumps (pg_restore) or importing data. Also load it when diagnosing slow queries, high CPU, timeouts, EXPLAIN plans, connection exhaustion, locking, bloat, or rows visible to the wrong user or tenant. This is not just a performance guide — schema, migration, security, and SQL authoring tasks need these rules too, even for a one-column change or a single query.

PhuongDeveloper/landingpage

Use when doing ANY task involving Supabase. Triggers: Supabase products (Database, Auth, Edge Functions, Realtime, Storage, Vectors, Cron, Queues); client libraries and SSR integrations (supabase-js, @supabase/ssr) in Next.js, React, SvelteKit, Astro, Remix; auth issues (login, logout, sessions, JWT, cookies, getSession, getUser, getClaims, RLS); Supabase CLI or MCP server; schema changes, migrations, declarative schemas, security audits, Postgres extensions (pg_graphql, pg_cron, pg_vector); debugging and troubleshooting errors or unexpected behavior on Supabase projects (HTTP errors, Postgres errors, RLS surprises, permission denied, schema cache issues, timeouts, Edge Function crashes, Realtime drops, Storage failures) and reading or querying logs (Logs Explorer, ClickHouse).

PhuongDeveloper/landingpage

Deploy and manage projects on Vercel using token-based authentication. Use when working with Vercel CLI using access tokens rather than interactive login — e.g. "deploy to vercel", "set up vercel", "add environment variables to vercel".

相關技能