frontend-mobile-development-component-scaffold

# 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 ` <div ${className} ${a11y}>\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 ( <View style={styles.container} accessible={true} accessibilityLabel="${spec.name} component" > <Text style={styles.text}> {/* 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> = { '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;