Generate Production-Ready React/React Native Components

React/React Native Component Scaffolding turns component requirements into a coordinated set of implementation artifacts. It begins with a specification describing the component's name, category, props, optional state, hooks, styling choice, and platform. Categories include functional, page, layout, form, and data-display components; targets can be web, native, or universal.

The illustrated generator produces a component, optional TypeScript definitions, styles, optional tests, optional Storybook stories, and an index for exports. Prop definitions include names, types, required flags, defaults, and descriptions. Web generation combines imports, prop interfaces, state hooks, optional effects, accessibility-related properties, JSX content, and exports.

Native generation uses React Native primitives and StyleSheet rather than assuming the web component structure transfers unchanged. Prop mappings distinguish strings, numbers, booleans, arrays, objects, and callbacks; the native view has an accessibility label. Styling alternatives span CSS modules, styled-components, and Tailwind classes.

Use it when a React or React Native task needs reusable component patterns, consistent structure, and supporting files. The user supplies the actual requirements through the skill's arguments. The workflow is scoped to component scaffolding rather than unrelated development work.

The generator classes are partial illustrative scaffolds. Helper methods, certain interfaces, the useA11y hook, axe imports and matchers, and project aliases are not bundled working implementations. They need completion and typechecking before use. Native components also need native testing tools: DOM tests and ARIA roles are not automatically applicable.

The input specification determines which files and features are generated. Generator switches are illustrated as:

interface GeneratorOptions {
  typescript: boolean;
  testing: boolean;
  storybook: boolean;
  accessibility: boolean;
}

The intended outputs are component code, type definitions, styles, behavior tests, stories, and barrel exports. Tests in the examples check rendering, visible content, callback invocation, and detected automated accessibility violations. An axe result is not treated as a complete accessibility compliance judgment; behavior still needs validation.

Generation must validate component and prop identifiers, parse types, and serialize strings and default values safely. Raw untrusted text is not inserted into source. False, zero, and empty-string defaults are preserved rather than replaced through truthiness checks.

Storybook generation includes metadata, prop controls, default arguments, and an interactive story. Testing examples use React Testing Library, Jest-style mocks, and axe-related assertions. Styles can use theme values or project CSS variables. These integrations remain dependent on the real project's imports, aliases, dependencies, and platform configuration.