Generate Production-Ready React/React Native Components

Scaffolds production-ready, accessible React and React Native components. It first analyzes a freeform component request to extract a structured specification (name, type - functional, page, layout, form, or data-display - props, state, hooks, styling approach, and target platform), then generates the component implementation, TypeScript prop types, styles, tests, and Storybook stories together from that spec. For React it emits functional components with typed props, optional state hooks and useEffect wiring, and an accessibility hook (useA11y) that infers an ARIA role and label from the spec; for React Native it emits a typed functional component using View, Text, TouchableOpacity, and AccessibilityInfo with accessible/accessibilityLabel props and a StyleSheet. Test generation produces React Testing Library suites (render, screen, fireEvent) covering rendering, content, callback props (any prop matching an on-prefixed naming convention or function type), and an axe accessibility check. Style generation supports three approaches - CSS modules, styled-components, or Tailwind utility classes - and Storybook generation produces a typed Meta/StoryObj file with argTypes inferred from each prop's type (text, number, boolean, or object control) plus Default and Interactive story variants.

Use it for react/react native component scaffolding tasks - generating a new component's implementation, types, styles, tests, and documentation together with consistent structure and architecture. Do not use it for tasks unrelated to react/react native component scaffolding or for a different domain or tool outside this scope.

Input is a freeform component request, from which the analyzer extracts name, type, prop definitions (name/type/required/defaultValue/description), optional state and hooks, a styling choice of css-modules/styled-components/tailwind, and a platform of web/native/universal, plus generator options controlling whether TypeScript, tests, Storybook stories, and accessibility support are produced. Output is a complete set of component files: the component implementation, TypeScript type definitions (when enabled), styles, a test suite with coverage (when enabled), Storybook stories for documentation (when enabled), and a barrel index file for clean imports - the goal is production-ready, accessible, and maintainable components following modern React patterns, not a single generated file.

Generated React tests use @testing-library/react (render, screen, fireEvent) plus axe for accessibility assertions; generated stories target Storybook via @storybook/react's Meta/StoryObj types; React Native output imports react-native primitives (View, Text, StyleSheet, TouchableOpacity, AccessibilityInfo), mapping web prop types to their native equivalents; an internal useA11y hook supplies accessibility props to generated React components.

Frontend engineers who want consistent, type-safe, accessible React or React Native components scaffolded with matching styles, tests, and Storybook documentation rather than writing each file by hand.