frontend-mobile-development-component-scaffold

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
risk	unknown
source	community
date_added	2026-02-27T00:00:00.000Z

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

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.(input),
			: .(input),
			: .(input),
			: .(),
			: .(),
		}
	}
}

2. Generate React Component

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 = .(spec, options)
		 types = options. ? .(spec) : 
		 component = .(spec, options)
		  = .(spec)

		 
	}

	(: , : ):  {
		 imports = []

		 (spec. === ) {
			imports.()
		}   (spec. === ) {
			imports.()
		}

		 (options.) {
			imports.()
		}

		 imports.()
	}

	(: ):  {
		 props = spec.
			.( {
				 optional = p. ?  : 
				 comment = p. ?  : 
				 
			})
			.()

		 
	}

	(
		: ,
		: ,
	):  {
		 propsType = options. ?  : 
		 destructuredProps = spec..( p.).()

		 body = 

		
		 (spec.) {
			body += spec.
				.(
					
						,
				)
				.()
			body += 
		}

		
		 (spec.?.()) {
			body += 
			body += 
			body += 
		}

		
		 (options.) {
			body += 
			body += 
			body += 
			body += 
		}

		
		body += 
		body += .(spec, options)
		body += 
		body += 

		 body
	}

	(: , : ):  {
		 className =
			spec. === 
				? 
				: 
		 a11y = options. ?  : 

		 (
			 +
			 +
			
		)
	}
}

3. Generate React Native Component

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',
		}
		 typeMap[webType] || webType
	}
}

4. Generate Component Tests

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();
  });
});
`
	}

	(: ):  {
		 ( === )  
		 ( === )  
		 ( === )  
		 (.())  
		 (.())  
		 
	}
}

5. Generate Styles

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

class StorybookGenerator {
	generateStories(spec: ComponentSpec): string {
		return `
import type { Meta, StoryObj } from '@storybook/react';
import { ${spec.name} } from './${spec.name}';

const meta: Meta<typeof ${spec.name}> = {
  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<typeof ${spec.name}>;

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'
		 (.())  
		 
	}
}

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.