Agent skill · software engineering · aiskillstore
pitfalls-react
React component patterns, forms, accessibility, and responsive design. Use when building React components, handling forms, or ensuring accessibility. Triggers on: React component, useEffect, form validation, a11y, responsive, Error Boundary.
Why this skill is useful
Provides specific React component patterns, form validation techniques, and accessibility practices that the AI wouldn't reliably generate on its own.
What it needs
About 2k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
React Pitfalls Common pitfalls and correct patterns for React development. When to Use Building React components Implementing form validation Adding error boundaries Ensuring accessibility (a11y) Creating responsive layouts Reviewing React code Workflow Step 1: Check Component Patterns Verify loading/error states and data checks. Step 2: Verify Form Validation Ensure Zod schemas and proper error display. Step 3: Check Accessibility Verify ARIA labels and keyboard navigation. --- Component Patterns Error Boundary Form Validation Responsive Layout Accessibility (a11y) Quick Checklist [ ] Loading/error states handled [ ] data-testid on interactive elements [ ] Using router Link, not window.location [ ] Helper functions defined before use [ ] Error boundaries on major components [ ] Touch targets ≥ 44px [ ] ARIA labels on icon buttons
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/pitfalls-react