--- name: frontend-mobile-development-component-scaffold description: "You are a React component architecture expert specializing in scaffolding production-ready, accessible, and performant components. Generate complete component implementations with TypeScript, tests, s" --- # React\/React Native Component Scaffolding You are a React component architecture expert specializing in scaffolding production-ready, accessible, and performant components. Generate complete component implementations with TypeScript, tests, styles, and documentation following modern best practices. ## Use this skill when - Working on react\/react native component scaffolding tasks or workflows - Needing guidance, best practices, or checklists for react\/react native component scaffolding ## Do not use this skill when - The task is unrelated to react\/react native component scaffolding - You need a different domain or tool outside this scope ## Context The user needs automated component scaffolding that creates consistent, type-safe React components with proper structure, hooks, styling, accessibility, and test coverage. Focus on reusable patterns and scalable architecture. ## Requirements $ARGUMENTS ## Instructions ### 1. Analyze Component Requirements ```typescript interface ComponentSpec { name: string; type: 'functional' | 'page' | 'layout' | 'form' | 'data-display'; props: PropDefinition[]; state?: StateDefinition[]; hooks?: string[]; styling: 'css-modules' | 'styled-components' | 'tailwind'; platform: 'web' | 'native' | 'universal'; } interface PropDefinition { name: string; type: string; required: boolean; defaultValue?: any; description: string; } class ComponentAnalyzer { parseRequirements(input: string): ComponentSpec { \/\/ Extract component specifications from user input return { name: this.extractName(input), type: this.inferType(input), props: this.extractProps(input), state: this.extractState(input), hooks: this.identifyHooks(input), styling: this.detectStylingApproach(), platform: this.detectPlatform() }; } } ``` ### 2. Generate React Component ```typescript interface GeneratorOptions { typescript: boolean; testing: boolean; storybook: boolean; accessibility: boolean; } class ReactComponentGenerator { generate(spec: ComponentSpec, options: GeneratorOptions): ComponentFiles { return { component: this.generateComponent(spec, options), types: options.typescript ? this.generateTypes(spec) : null, styles: this.generateStyles(spec), tests: options.testing ? this.generateTests(spec) : null, stories: options.storybook ? this.generateStories(spec) : null, index: this.generateIndex(spec) }; } generateComponent(spec: ComponentSpec, options: GeneratorOptions): string { const imports = this.generateImports(spec, options); const types = options.typescript ? this.generatePropTypes(spec) : ''; const component = this.generateComponentBody(spec, options); const exports = this.generateExports(spec); return `${imports}\n\n${types}\n\n${component}\n\n${exports}`; } generateImports(spec: ComponentSpec, options: GeneratorOptions): string { const imports = ["import React, { useState, useEffect } from 'react';"]; if (spec.styling === 'css-modules') { imports.push(`import styles from '.\/${spec.name}.module.css';`); } else if (spec.styling === 'styled-components') { imports.push("import styled from 'styled-components';"); } if (options.accessibility) { imports.push("import { useA11y } from '@\/hooks\/useA11y';"); } return imports.join('\n'); } generatePropTypes(spec: ComponentSpec): string { const props = spec.props.map(p => { const optional = p.required ? '' : '?'; const comment = p.description ? ` \/** ${p.description} *\/\n` : ''; return `${comment} ${p.name}${optional}: ${p.type};`; }).join('\n'); return `export interface ${spec.name}Props {\n${props}\n}`; } generateComponentBody(spec: ComponentSpec, options: GeneratorOptions): string { const propsType = options.typescript ? `: React.FC<${spec.name}Props>` : ''; const destructuredProps = spec.props.map(p => p.name).join(', '); let body = `export const ${spec.name}${propsType} = ({ ${destructuredProps} }) => {\n`; \/\/ Add state hooks if (spec.state) { body += spec.state.map(s => ` const [${s.name}, set${this.capitalize(s.name)}] = useState${options.typescript ? `<${s.type}>` : ''}(${s.initial});\n` ).join(''); body += '\n'; } \/\/ Add effects if (spec.hooks?.includes('useEffect')) { body += ` useEffect(() => {\n`; body += ` \/\/ TODO: Add effect logic\n`; body += ` }, [${destructuredProps}]);\n\n`; } \/\/ Add accessibility if (options.accessibility) { body += ` const a11yProps = useA11y({\n`; body += ` role: '${this.inferAriaRole(spec.type)}',\n`; body += ` label: ${spec.props.find(p => p.name === 'label')?.name || `'${spec.name}'`}\n`; body += ` });\n\n`; } \/\/ JSX return body += ` return (\n`; body += this.generateJSX(spec, options); body += ` );\n`; body += `};`; return body; } generateJSX(spec: ComponentSpec, options: GeneratorOptions): string { const className = spec.styling === 'css-modules' ? `className={styles.${this.camelCase(spec.name)}}` : ''; const a11y = options.accessibility ? '{...a11yProps}' : ''; return `

\n` + ` {\/* TODO: Add component content *\/}\n` + ` <\/div>\n`; } } ``` ### 3. Generate React Native Component ```typescript class ReactNativeGenerator { generateComponent(spec: ComponentSpec): string { return ` import React, { useState } from 'react'; import { View, Text, StyleSheet, TouchableOpacity, AccessibilityInfo } from 'react-native'; interface ${spec.name}Props { ${spec.props.map(p => ` ${p.name}${p.required ? '' : '?'}: ${this.mapNativeType(p.type)};`).join('\n')} } export const ${spec.name}: React.FC<${spec.name}Props> = ({ ${spec.props.map(p => p.name).join(',\n ')} }) => { return ( {\/* Component content *\/} <\/Text> <\/View> ); }; const styles = StyleSheet.create({ container: { flex: 1, padding: 16, backgroundColor: '#fff', }, text: { fontSize: 16, color: '#333', }, }); `; } mapNativeType(webType: string): string { const typeMap: Record = { 'string': 'string', 'number': 'number', 'boolean': 'boolean', 'React.ReactNode': 'React.ReactNode', 'Function': '() => void' }; return typeMap[webType] || webType; } } ``` ### 4. Generate Component Tests ```typescript class ComponentTestGenerator { generateTests(spec: ComponentSpec): string { return ` import { render, screen, fireEvent } from '@testing-library\/react'; import { ${spec.name} } from '.\/${spec.name}'; describe('${spec.name}', () => { const defaultProps = { ${spec.props.filter(p => p.required).map(p => ` ${p.name}: ${this.getMockValue(p.type)},`).join('\n')} }; it('renders without crashing', () => { render(<${spec.name} {...defaultProps} \/>); expect(screen.getByRole('${this.inferAriaRole(spec.type)}')).toBeInTheDocument(); }); it('displays correct content', () => { render(<${spec.name} {...defaultProps} \/>); expect(screen.getByText(\/content\/i)).toBeVisible(); }); ${spec.props.filter(p => p.type.includes('()') || p.name.startsWith('on')).map(p => ` it('calls ${p.name} when triggered', () => { const mock${this.capitalize(p.name)} = jest.fn(); render(<${spec.name} {...defaultProps} ${p.name}={mock${this.capitalize(p.name)}} \/>); const trigger = screen.getByRole('button'); fireEvent.click(trigger); expect(mock${this.capitalize(p.name)}).toHaveBeenCalledTimes(1); });`).join('\n')} it('meets accessibility standards', async () => { const { container } = render(<${spec.name} {...defaultProps} \/>); const results = await axe(container); expect(results).toHaveNoViolations(); }); }); `; } getMockValue(type: string): string { if (type === 'string') return "'test value'"; if (type === 'number') return '42'; if (type === 'boolean') return 'true'; if (type.includes('[]')) return '[]'; if (type.includes('()')) return 'jest.fn()'; return '{}'; } } ``` ### 5. Generate Styles ```typescript class StyleGenerator { generateCSSModule(spec: ComponentSpec): string { const className = this.camelCase(spec.name); return ` .${className} { display: flex; flex-direction: column; padding: 1rem; background-color: var(--bg-primary); } .${className}Title { font-size: 1.5rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.5rem; } .${className}Content { flex: 1; color: var(--text-secondary); } `; } generateStyledComponents(spec: ComponentSpec): string { return ` import styled from 'styled-components'; export const ${spec.name}Container = styled.div\` display: flex; flex-direction: column; padding: \${({ theme }) => theme.spacing.md}; background-color: \${({ theme }) => theme.colors.background}; \`; export const ${spec.name}Title = styled.h2\` font-size: \${({ theme }) => theme.fontSize.lg}; font-weight: 600; color: \${({ theme }) => theme.colors.text.primary}; margin-bottom: \${({ theme }) => theme.spacing.sm}; \`; `; } generateTailwind(spec: ComponentSpec): string { return ` \/\/ Use these Tailwind classes in your component: \/\/ Container: "flex flex-col p-4 bg-white rounded-lg shadow" \/\/ Title: "text-xl font-semibold text-gray-900 mb-2" \/\/ Content: "flex-1 text-gray-700" `; } } ``` ### 6. Generate Storybook Stories ```typescript class StorybookGenerator { generateStories(spec: ComponentSpec): string { return ` import type { Meta, StoryObj } from '@storybook\/react'; import { ${spec.name} } from '.\/${spec.name}'; const meta: Meta = { title: 'Components\/${spec.name}', component: ${spec.name}, tags: ['autodocs'], argTypes: { ${spec.props.map(p => ` ${p.name}: { control: '${this.inferControl(p.type)}', description: '${p.description}' },`).join('\n')} }, }; export default meta; type Story = StoryObj; export const Default: Story = { args: { ${spec.props.map(p => ` ${p.name}: ${p.defaultValue || this.getMockValue(p.type)},`).join('\n')} }, }; export const Interactive: Story = { args: { ...Default.args, }, }; `; } inferControl(type: string): string { if (type === 'string') return 'text'; if (type === 'number') return 'number'; if (type === 'boolean') return 'boolean'; if (type.includes('[]')) return 'object'; return 'text'; } } ``` ## Output Format 1. **Component File**: Fully implemented React\/React Native component 2. **Type Definitions**: TypeScript interfaces and types 3. **Styles**: CSS modules, styled-components, or Tailwind config 4. **Tests**: Complete test suite with coverage 5. **Stories**: Storybook stories for documentation 6. **Index File**: Barrel exports for clean imports Focus on creating production-ready, accessible, and maintainable components that follow modern React patterns and best practices.