Agent skill · software engineering · aiskillstore
react-component
Use when creating UI components in React - functional components, hooks, custom hooks, or component composition patterns. NOT when backend logic, API routes, or non-React frameworks are involved. Triggers: "create component", "build widget", "KPI card", "form", "modal", "custom hook", "useContext", "useState", "useEffect".
Why this skill is useful
Provides specific patterns and TypeScript best practices for building React components that the AI wouldn't reliably generate on its own.
What it needs
About 5k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
React Component Skill Overview Expert guidance for building React functional components, hooks, and composition patterns. Focuses on TypeScript, performance, accessibility, and modern React best practices. When This Skill Applies This skill triggers when users request: UI Components: "Create a student KPI card", "Build a modal", "Form component" Hooks: "Custom attendance hook", "useContext for theme", "useState for data" Patterns: "Component composition", "HOC", "render props" ERP Widgets: KPI cards, forms, data tables, dashboards Core Rules 1. Functional Components Always Requirements: Always use functional components (no class components) Type all props interfaces explicitly Use React.memo for components receiving same props frequently Use React.forwardRef when ref forwarding is needed 2. Hooks Usage Requirements: useState: For local component state only useEffect: For side-effects with proper cleanup functions useContext: For global state (theme, auth, language) Always include all dependencies in dependency array Use useCallback/useMemo for expensive operations in lists 3. Custom Hooks Requirements: All custom hooks must start with use prefix Extract reusable logic into hooks Return typed interfaces for hook results Include loading, error states, and retry mechanisms Keep hooks focused on single responsibility 4. Component Composition Requirements: Prefer composition over inheritance Use children prop for flexible content Use render props when component needs to share data Use HOCs sparingly and with proper TypeScript types Keep components small and focused (single responsibility) Output Requirements Code Files 1. Component file (ComponentName.tsx): Functional component with typed props Hooks applied correctly Exported as named export Default export when appropriate 2. Test file (ComponentName.test.tsx): Jest/Vitest + React Testing Library Test component renders with props Test user interactions Test loading/error states Accessibility tests 3. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/react-component