Skip to main content الرئيسية المنشئون beko2210 firstbrain frontend-mobile-development-component-scaffold
frontend-mobile-development-component-scaffold You are a React component architecture expert specializing in scaffolding production-ready, accessible, and performant components. Generate complete component implementations with TypeScript, tests, s
الانتقال إلى التثبيت سوق المهارات اكتشف واستكشف مهارات الذكاء الاصطناعي التي بناها المجتمع.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
عرض تفاصيل Prompt يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/BEKO2210/Firstbrain --skill frontend-mobile-development-component-scaffoldيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
تحميل Zip جاري التحميل... المهن ذات الصلة SOC
استنادا إلى تصنيف SOC المهني
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"]
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
return
name
this
extractName
type
this
inferType
props
this
extractProps
state
this
extractState
hooks
this
identifyHooks
styling
this
detectStylingApproach
platform
this
detectPlatform
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 = 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 =>name ).join (', ' );
let body = `export const ${spec.name} ${propsType} = ({ ${destructuredProps} }) => {\n` ;
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' ;
}
if (spec.hooks ?.includes ('useEffect' )) {
body += ` useEffect(() => {\n` ;
body += ` // TODO: Add effect logic\n` ;
body += ` }, [${destructuredProps} ]);\n\n` ;
}
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` ;
}
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 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 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 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' ;
if (type .includes ('[]' )) return 'object' ;
return 'text' ;
}
}
Output Format
Component File : Fully implemented React/React Native componentType Definitions : TypeScript interfaces and typesStyles : CSS modules, styled-components, or Tailwind configTests : Complete test suite with coverageStories : Storybook stories for documentationIndex File : Barrel exports for clean imports Focus on creating production-ready, accessible, and maintainable components that follow modern React patterns and best practices.
Connections
Domain: [[Software Entwicklung]]Kategorie: [[Frontend Entwicklung]]Navigation: [[Skills Uebersicht]], [[Home]] 