메뉴
You are a React component architecture expert specializing in scaffolding production-ready, accessible, and performant components. Generate complete component implementations with TypeScript, tests, s
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/BEKO2210/Firstbrain --skill frontend-mobile-development-component-scaffold명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SOC 직업 분류 기준
SKILL.md 표시 중
| 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 |
| type | skill |
| created | 2026-02-27T00:00:00.000Z |
| domain | software-development |
| category | frontend |
| risk | unknown |
| source | community |
| tags | ["skill","software-development","frontend","mobile","component"] |
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.
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.
$ARGUMENTS
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;
?: ;
: ;
}
{
(: ): {
{
: .(input),
: .(input),
: .(input),
: .(input),
: .(input),
: .(),
: .()
};
}
}
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`;
}
}
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;
}
}
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 '{}';
}
}
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"
`;
}
}
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';
if (type.includes('[]')) return 'object';
return 'text';
}
}
Focus on creating production-ready, accessible, and maintainable components that follow modern React patterns and best practices.