react-components

Skill: React Components

Purpose

Create or modify React components using TypeScript with strict accessibility compliance (WCAG 2.2 Level AA), semantic HTML, and type safety.

Inputs

• componentName: PascalCase component identifier
• functionality: Description of component behavior and interactions
• props: Expected component props with types
• accessibility: Specific accessibility requirements (keyboard, screen reader, ARIA)

Outputs

• Component file (.tsx)
• TypeScript prop interface
• Accessibility attributes and handlers
• Optional: test file, style file

Procedures

1. Validate Component Name

Ensure name follows PascalCase convention.

Check for conflicts with existing components in the target directory.

2. Load Accessibility Guidelines

Read: .agents/skills/react-components/references/a11y-wcag22.md

Identify applicable WCAG requirements based on component type (button, form, modal, etc.).

3. Define TypeScript Interface

Create interface for component props:

• Required props without ?
• Optional props with ?
• Use specific types (avoid any)
• Include event handler types (e.g., onClick?: (event: React.MouseEvent) => void)

Refer to: .agents/skills/react-components/references/react-ts-patterns.md

4. Choose Semantic HTML

Select appropriate HTML element:

• <button> for actions
• <a> for navigation
• <input>, <select>, <textarea> for form fields
• <nav>, <header>, <main>, <footer> for landmarks
• <article>, <section> for content structure

Avoid <div> or <span> for interactive elements.

5. Implement Keyboard Support

For interactive components:

• Add onKeyDown handler for Enter and Space keys.
• Implement arrow key navigation for lists or menus.
• Manage focus for modals (trap focus, restore on close).
• Ensure all interactive elements are reachable via Tab.

Pattern:

const handleKeyDown = (event: React.KeyboardEvent) => {
  if (event.key === 'Enter' || event.key === ' ') {
    event.preventDefault()
    handleAction()
  }
}