菜单
React UI component best practices for building consistent, accessible, and maintainable component libraries. Use this skill when writing, reviewing, or optimizing React components, styling patterns, or component APIs.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Learning memos: concept → use case → example. Output markdown | mdx | html. Back = scenario OR code snippet. Trigger: memo, flashcard, /do-memo. Too broad → split first.
Conversion copywriter for homepage/landing/pricing/feature/about page copy. Use for "write copy," "improve this copy," "rewrite this page," "headline help," "CTA copy," "value prop," "tagline," "above the fold," "this copy is weak," "make this more compelling." Not for email copy (emails skill), popup copy (popups skill), pure line-edit of existing copy (copy-editing skill).
Accessibility auditor for HTML markup or live URLs. Trigger on "check accessibility", "audit a11y", "review HTML", "check-html", or pasted URL/code for a11y review.
Requirements Inference & Specification Architect. Use it when you're not sure that your requirements are clear enough for the engineering team to start working on them. This skill will ask you a series of questions to clarify any ambiguities in your requirements and produce a final, detailed specification document.
Generate a commitlint-compliant commit message with a description, prompt user for approval, and run git commit. Use when user asks to commit, create a commit, generate a commit message, or wants to stage and commit changes. NEVER runs git push. Uses git diff --cached to understand staged changes.
Generate a comprehensive UX/UI design document from the product MVP definition. Use when designing UI/UX, defining design tokens, creating view layouts, or when asked to create a ux-ui.md document.
| name | react-best-practices |
| description | React UI component best practices for building consistent, accessible, and maintainable component libraries. Use this skill when writing, reviewing, or optimizing React components, styling patterns, or component APIs. |
| license | MIT |
| metadata | {"author":"polubis","version":"1.0.0","organization":"gon-stack","date":"April 2026","abstract":"Comprehensive React UI component best practices guide for Tailwind CSS + Radix UI stacks. Contains rules across 7 categories, prioritized by impact from critical (component API design) to incremental (animation). Each rule includes incorrect vs. correct TSX examples with explanations to guide automated code generation and component review."} |
Comprehensive React UI component guide for Tailwind CSS and Radix UI stacks. Contains rules across 7 categories, prioritized by impact to guide component authoring, code generation, and reviews.
Reference these guidelines when:
| Priority | Category | Impact | Directory |
|---|---|---|---|
| 1 | Component API Design | CRITICAL | ui-components/props-api, ui-components/controlled-uncontrolled, ui-components/ref-as-prop-react-19, ui-components/arrow-syntax-only |
| 2 | Design System & Tokens | HIGH | ui-components/design-tokens |
| 3 | Accessibility & UX States | HIGH | ui-components/interactive-states |
| 4 | Styling Patterns | MEDIUM-HIGH | ui-components/cn-classnames, ui-components/variants |
| 5 | Component Architecture | MEDIUM-HIGH | ui-components/compound-components, ui-components/context-shared-state |
| 6 | Code Organization | MEDIUM | ui-components/file-structure, ui-components/typography |
| 7 | Animation & Motion | LOW | ui-components/transitions |
Read individual rule files for detailed explanations and TSX examples:
references/ui-components/props-api.md
references/ui-components/design-tokens.md
references/_sections.md
Each rule file contains: