react-component-builder

Skill: React Component Builder

Purpose

Create or modify React components with TypeScript, ensuring accessibility compliance and adherence to project conventions.

Inputs

• componentName: Name of the component (PascalCase).
• specification: Component behavior, props, and requirements.
• targetFolder: Location within the project for the new component.

Outputs

• Component file (.tsx).
• Optional: associated test file, Storybook story, or style file.
• Verification command suggestions.

Procedure

Step 1: Validate Inputs

1. Ensure componentName follows PascalCase convention.
2. Verify targetFolder exists and is within project scope.
3. Check for naming conflicts with existing components.

Step 2: Load Skill

Read: .agents/skills/react-components/SKILL.md

Follow the procedures defined in that skill.

Step 3: Generate Component Structure

1. Create the component file at <targetFolder>/<componentName>.tsx.
2. Define TypeScript interface for props with explicit types:
   • Use discriminated unions for variant props
   • Mark readonly properties appropriately
   • Use React.ReactNode for children
   • Provide JSDoc comments for complex props
   • Example:

   interface ButtonProps {
     /** Visual style variant */
     variant: 'primary' | 'secondary' | 'danger'
     /** Button click handler */
     onClick: (event: React.MouseEvent<HTMLButtonElement>) => void
     /** Disable button interaction */
     disabled?: boolean
     children: React.ReactNode
   }
   

3. Implement the component with semantic HTML.
4. Add accessibility attributes (ARIA roles, labels, keyboard handlers).
5. Use explicit return type: const Component = (props: Props): JSX.Element => { ... }
6. Avoid any types - use unknown with type guards if needed.

Refer to:

• .agents/skills/react-components/references/a11y-wcag22.md for WCAG 2.2 requirements
• ../../../AGENTS.md for TypeScript best practices

Step 4: Apply Project-Specific Overrides