frontend-mobile-development-component-scaffold

仓库: sickn33/antigravity-awesome-skills
安装量: 160
排名: #5429

安装

npx skills add https://github.com/sickn33/antigravity-awesome-skills --skill 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
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
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 ` + `

\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"
>
{/ Component content /}
);
};
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 component
Type Definitions
TypeScript interfaces and types
Styles
CSS modules, styled-components, or Tailwind config
Tests
Complete test suite with coverage
Stories
Storybook stories for documentation
Index File
Barrel exports for clean imports Focus on creating production-ready, accessible, and maintainable components that follow modern React patterns and best practices.
← 返回排行榜