[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6CT7B2ZVCXMX9PMK2VVCWWX":3,"skill-same:01M6CT7B2ZVCXMX9PMK2VVCWWX":72},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":43,"linkOnly":44,"markdownContent":45,"markdownBody":46,"frontMatter":47,"refName":50,"commitSha":51,"skillDirectory":52,"forksCount":53,"repositoryHtmlUrl":54,"repositoryHomepageUrl":54,"ownerHtmlUrl":55,"ownerBlogUrl":6,"ownerDescription":56,"updatedAt":57,"install":58,"resources":71},"01M6CT7B2ZVCXMX9PMK2VVCWWX","frontend-mobile-development-component-scaffold",null,"You are a React component architecture expert specializing in scaffolding production-ready, accessible, and performant components. Generate complete component implementations with TypeScript, tests, s","Sam-06060\u002Fjarvis-assistant","Sam-06060","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F208600848?v=4","01M6CRKT7C7FXD21V6HXF293S0","Samson Frank Ganta","01M6CRKTBEKYFD8YX5Z1GT99EE",6,"Apache-2.0","https:\u002F\u002Fgithub.com\u002FSam-06060\u002Fjarvis-assistant\u002Fblob\u002Fmain\u002Fmodules\u002Fagent_skills\u002Fawesome-skills\u002Fplaybooks\u002Ffrontend-mobile-development-component-scaffold\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42],"frontend mobile development component scaffold","component scaffold","component","scaffold","development","frontend","mobile","mobile development","component architecture","scaffolding","community","expert","ready","Production","generate","architecture","react","components","typescript","2026-11-10 10:12:30",false,"---\nname: frontend-mobile-development-component-scaffold\ndescription: \"You are a React component architecture expert specializing in scaffolding production-ready, accessible, and performant components. Generate complete component implementations with TypeScript, tests, s\"\nrisk: unknown\nsource: community\ndate_added: \"2026-02-27\"\n---\n\n# React\u002FReact Native Component Scaffolding\n\nYou 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.\n\n## Use this skill when\n\n- Working on react\u002Freact native component scaffolding tasks or workflows\n- Needing guidance, best practices, or checklists for react\u002Freact native component scaffolding\n\n## Do not use this skill when\n\n- The task is unrelated to react\u002Freact native component scaffolding\n- You need a different domain or tool outside this scope\n\n## Context\n\nThe 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.\n\n## Requirements\n\n$ARGUMENTS\n\n## Instructions\n\n### 1. Analyze Component Requirements\n\n```typescript\ninterface ComponentSpec {\n  name: string;\n  type: 'functional' | 'page' | 'layout' | 'form' | 'data-display';\n  props: PropDefinition[];\n  state?: StateDefinition[];\n  hooks?: string[];\n  styling: 'css-modules' | 'styled-components' | 'tailwind';\n  platform: 'web' | 'native' | 'universal';\n}\n\ninterface PropDefinition {\n  name: string;\n  type: string;\n  required: boolean;\n  defaultValue?: any;\n  description: string;\n}\n\nclass ComponentAnalyzer {\n  parseRequirements(input: string): ComponentSpec {\n    \u002F\u002F Extract component specifications from user input\n    return {\n      name: this.extractName(input),\n      type: this.inferType(input),\n      props: this.extractProps(input),\n      state: this.extractState(input),\n      hooks: this.identifyHooks(input),\n      styling: this.detectStylingApproach(),\n      platform: this.detectPlatform()\n    };\n  }\n}\n```\n\n### 2. Generate React Component\n\n```typescript\ninterface GeneratorOptions {\n  typescript: boolean;\n  testing: boolean;\n  storybook: boolean;\n  accessibility: boolean;\n}\n\nclass ReactComponentGenerator {\n  generate(spec: ComponentSpec, options: GeneratorOptions): ComponentFiles {\n    return {\n      component: this.generateComponent(spec, options),\n      types: options.typescript ? this.generateTypes(spec) : null,\n      styles: this.generateStyles(spec),\n      tests: options.testing ? this.generateTests(spec) : null,\n      stories: options.storybook ? this.generateStories(spec) : null,\n      index: this.generateIndex(spec)\n    };\n  }\n\n  generateComponent(spec: ComponentSpec, options: GeneratorOptions): string {\n    const imports = this.generateImports(spec, options);\n    const types = options.typescript ? this.generatePropTypes(spec) : '';\n    const component = this.generateComponentBody(spec, options);\n    const exports = this.generateExports(spec);\n\n    return `${imports}\\n\\n${types}\\n\\n${component}\\n\\n${exports}`;\n  }\n\n  generateImports(spec: ComponentSpec, options: GeneratorOptions): string {\n    const imports = [\"import React, { useState, useEffect } from 'react';\"];\n\n    if (spec.styling === 'css-modules') {\n      imports.push(`import styles from '.\u002F${spec.name}.module.css';`);\n    } else if (spec.styling === 'styled-components') {\n      imports.push(\"import styled from 'styled-components';\");\n    }\n\n    if (options.accessibility) {\n      imports.push(\"import { useA11y } from '@\u002Fhooks\u002FuseA11y';\");\n    }\n\n    return imports.join('\\n');\n  }\n\n  generatePropTypes(spec: ComponentSpec): string {\n    const props = spec.props.map(p => {\n      const optional = p.required ? '' : '?';\n      const comment = p.description ? `  \u002F** ${p.description} *\u002F\\n` : '';\n      return `${comment}  ${p.name}${optional}: ${p.type};`;\n    }).join('\\n');\n\n    return `export interface ${spec.name}Props {\\n${props}\\n}`;\n  }\n\n  generateComponentBody(spec: ComponentSpec, options: GeneratorOptions): string {\n    const propsType = options.typescript ? `: React.FC\u003C${spec.name}Props>` : '';\n    const destructuredProps = spec.props.map(p => p.name).join(', ');\n\n    let body = `export const ${spec.name}${propsType} = ({ ${destructuredProps} }) => {\\n`;\n\n    \u002F\u002F Add state hooks\n    if (spec.state) {\n      body += spec.state.map(s =>\n        `  const [${s.name}, set${this.capitalize(s.name)}] = useState${options.typescript ? `\u003C${s.type}>` : ''}(${s.initial});\\n`\n      ).join('');\n      body += '\\n';\n    }\n\n    \u002F\u002F Add effects\n    if (spec.hooks?.includes('useEffect')) {\n      body += `  useEffect(() => {\\n`;\n      body += `    \u002F\u002F TODO: Add effect logic\\n`;\n      body += `  }, [${destructuredProps}]);\\n\\n`;\n    }\n\n    \u002F\u002F Add accessibility\n    if (options.accessibility) {\n      body += `  const a11yProps = useA11y({\\n`;\n      body += `    role: '${this.inferAriaRole(spec.type)}',\\n`;\n      body += `    label: ${spec.props.find(p => p.name === 'label')?.name || `'${spec.name}'`}\\n`;\n      body += `  });\\n\\n`;\n    }\n\n    \u002F\u002F JSX return\n    body += `  return (\\n`;\n    body += this.generateJSX(spec, options);\n    body += `  );\\n`;\n    body += `};`;\n\n    return body;\n  }\n\n  generateJSX(spec: ComponentSpec, options: GeneratorOptions): string {\n    const className = spec.styling === 'css-modules' ? `className={styles.${this.camelCase(spec.name)}}` : '';\n    const a11y = options.accessibility ? '{...a11yProps}' : '';\n\n    return `    \u003Cdiv ${className} ${a11y}>\\n` +\n           `      {\u002F* TODO: Add component content *\u002F}\\n` +\n           `    \u003C\u002Fdiv>\\n`;\n  }\n}\n```\n\n### 3. Generate React Native Component\n\n```typescript\nclass ReactNativeGenerator {\n  generateComponent(spec: ComponentSpec): string {\n    return `\nimport React, { useState } from 'react';\nimport {\n  View,\n  Text,\n  StyleSheet,\n  TouchableOpacity,\n  AccessibilityInfo\n} from 'react-native';\n\ninterface ${spec.name}Props {\n${spec.props.map(p => `  ${p.name}${p.required ? '' : '?'}: ${this.mapNativeType(p.type)};`).join('\\n')}\n}\n\nexport const ${spec.name}: React.FC\u003C${spec.name}Props> = ({\n  ${spec.props.map(p => p.name).join(',\\n  ')}\n}) => {\n  return (\n    \u003CView\n      style={styles.container}\n      accessible={true}\n      accessibilityLabel=\"${spec.name} component\"\n    >\n      \u003CText style={styles.text}>\n        {\u002F* Component content *\u002F}\n      \u003C\u002FText>\n    \u003C\u002FView>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    padding: 16,\n    backgroundColor: '#fff',\n  },\n  text: {\n    fontSize: 16,\n    color: '#333',\n  },\n});\n`;\n  }\n\n  mapNativeType(webType: string): string {\n    const typeMap: Record\u003Cstring, string> = {\n      'string': 'string',\n      'number': 'number',\n      'boolean': 'boolean',\n      'React.ReactNode': 'React.ReactNode',\n      'Function': '() => void'\n    };\n    return typeMap[webType] || webType;\n  }\n}\n```\n\n### 4. Generate Component Tests\n\n```typescript\nclass ComponentTestGenerator {\n  generateTests(spec: ComponentSpec): string {\n    return `\nimport { render, screen, fireEvent } from '@testing-library\u002Freact';\nimport { ${spec.name} } from '.\u002F${spec.name}';\n\ndescribe('${spec.name}', () => {\n  const defaultProps = {\n${spec.props.filter(p => p.required).map(p => `    ${p.name}: ${this.getMockValue(p.type)},`).join('\\n')}\n  };\n\n  it('renders without crashing', () => {\n    render(\u003C${spec.name} {...defaultProps} \u002F>);\n    expect(screen.getByRole('${this.inferAriaRole(spec.type)}')).toBeInTheDocument();\n  });\n\n  it('displays correct content', () => {\n    render(\u003C${spec.name} {...defaultProps} \u002F>);\n    expect(screen.getByText(\u002Fcontent\u002Fi)).toBeVisible();\n  });\n\n${spec.props.filter(p => p.type.includes('()') || p.name.startsWith('on')).map(p => `\n  it('calls ${p.name} when triggered', () => {\n    const mock${this.capitalize(p.name)} = jest.fn();\n    render(\u003C${spec.name} {...defaultProps} ${p.name}={mock${this.capitalize(p.name)}} \u002F>);\n\n    const trigger = screen.getByRole('button');\n    fireEvent.click(trigger);\n\n    expect(mock${this.capitalize(p.name)}).toHaveBeenCalledTimes(1);\n  });`).join('\\n')}\n\n  it('meets accessibility standards', async () => {\n    const { container } = render(\u003C${spec.name} {...defaultProps} \u002F>);\n    const results = await axe(container);\n    expect(results).toHaveNoViolations();\n  });\n});\n`;\n  }\n\n  getMockValue(type: string): string {\n    if (type === 'string') return \"'test value'\";\n    if (type === 'number') return '42';\n    if (type === 'boolean') return 'true';\n    if (type.includes('[]')) return '[]';\n    if (type.includes('()')) return 'jest.fn()';\n    return '{}';\n  }\n}\n```\n\n### 5. Generate Styles\n\n```typescript\nclass StyleGenerator {\n  generateCSSModule(spec: ComponentSpec): string {\n    const className = this.camelCase(spec.name);\n    return `\n.${className} {\n  display: flex;\n  flex-direction: column;\n  padding: 1rem;\n  background-color: var(--bg-primary);\n}\n\n.${className}Title {\n  font-size: 1.5rem;\n  font-weight: 600;\n  color: var(--text-primary);\n  margin-bottom: 0.5rem;\n}\n\n.${className}Content {\n  flex: 1;\n  color: var(--text-secondary);\n}\n`;\n  }\n\n  generateStyledComponents(spec: ComponentSpec): string {\n    return `\nimport styled from 'styled-components';\n\nexport const ${spec.name}Container = styled.div\\`\n  display: flex;\n  flex-direction: column;\n  padding: \\${({ theme }) => theme.spacing.md};\n  background-color: \\${({ theme }) => theme.colors.background};\n\\`;\n\nexport const ${spec.name}Title = styled.h2\\`\n  font-size: \\${({ theme }) => theme.fontSize.lg};\n  font-weight: 600;\n  color: \\${({ theme }) => theme.colors.text.primary};\n  margin-bottom: \\${({ theme }) => theme.spacing.sm};\n\\`;\n`;\n  }\n\n  generateTailwind(spec: ComponentSpec): string {\n    return `\n\u002F\u002F Use these Tailwind classes in your component:\n\u002F\u002F Container: \"flex flex-col p-4 bg-white rounded-lg shadow\"\n\u002F\u002F Title: \"text-xl font-semibold text-gray-900 mb-2\"\n\u002F\u002F Content: \"flex-1 text-gray-700\"\n`;\n  }\n}\n```\n\n### 6. Generate Storybook Stories\n\n```typescript\nclass StorybookGenerator {\n  generateStories(spec: ComponentSpec): string {\n    return `\nimport type { Meta, StoryObj } from '@storybook\u002Freact';\nimport { ${spec.name} } from '.\u002F${spec.name}';\n\nconst meta: Meta\u003Ctypeof ${spec.name}> = {\n  title: 'Components\u002F${spec.name}',\n  component: ${spec.name},\n  tags: ['autodocs'],\n  argTypes: {\n${spec.props.map(p => `    ${p.name}: { control: '${this.inferControl(p.type)}', description: '${p.description}' },`).join('\\n')}\n  },\n};\n\nexport default meta;\ntype Story = StoryObj\u003Ctypeof ${spec.name}>;\n\nexport const Default: Story = {\n  args: {\n${spec.props.map(p => `    ${p.name}: ${p.defaultValue || this.getMockValue(p.type)},`).join('\\n')}\n  },\n};\n\nexport const Interactive: Story = {\n  args: {\n    ...Default.args,\n  },\n};\n`;\n  }\n\n  inferControl(type: string): string {\n    if (type === 'string') return 'text';\n    if (type === 'number') return 'number';\n    if (type === 'boolean') return 'boolean';\n    if (type.includes('[]')) return 'object';\n    return 'text';\n  }\n}\n```\n\n## Output Format\n\n1. **Component File**: Fully implemented React\u002FReact Native component\n2. **Type Definitions**: TypeScript interfaces and types\n3. **Styles**: CSS modules, styled-components, or Tailwind config\n4. **Tests**: Complete test suite with coverage\n5. **Stories**: Storybook stories for documentation\n6. **Index File**: Barrel exports for clean imports\n\nFocus on creating production-ready, accessible, and maintainable components that follow modern React patterns and best practices.\n","# React\u002FReact Native Component Scaffolding\n\nYou 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.\n\n## Use this skill when\n\n- Working on react\u002Freact native component scaffolding tasks or workflows\n- Needing guidance, best practices, or checklists for react\u002Freact native component scaffolding\n\n## Do not use this skill when\n\n- The task is unrelated to react\u002Freact native component scaffolding\n- You need a different domain or tool outside this scope\n\n## Context\n\nThe 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.\n\n## Requirements\n\n$ARGUMENTS\n\n## Instructions\n\n### 1. Analyze Component Requirements\n\n```typescript\ninterface ComponentSpec {\n  name: string;\n  type: 'functional' | 'page' | 'layout' | 'form' | 'data-display';\n  props: PropDefinition[];\n  state?: StateDefinition[];\n  hooks?: string[];\n  styling: 'css-modules' | 'styled-components' | 'tailwind';\n  platform: 'web' | 'native' | 'universal';\n}\n\ninterface PropDefinition {\n  name: string;\n  type: string;\n  required: boolean;\n  defaultValue?: any;\n  description: string;\n}\n\nclass ComponentAnalyzer {\n  parseRequirements(input: string): ComponentSpec {\n    \u002F\u002F Extract component specifications from user input\n    return {\n      name: this.extractName(input),\n      type: this.inferType(input),\n      props: this.extractProps(input),\n      state: this.extractState(input),\n      hooks: this.identifyHooks(input),\n      styling: this.detectStylingApproach(),\n      platform: this.detectPlatform()\n    };\n  }\n}\n```\n\n### 2. Generate React Component\n\n```typescript\ninterface GeneratorOptions {\n  typescript: boolean;\n  testing: boolean;\n  storybook: boolean;\n  accessibility: boolean;\n}\n\nclass ReactComponentGenerator {\n  generate(spec: ComponentSpec, options: GeneratorOptions): ComponentFiles {\n    return {\n      component: this.generateComponent(spec, options),\n      types: options.typescript ? this.generateTypes(spec) : null,\n      styles: this.generateStyles(spec),\n      tests: options.testing ? this.generateTests(spec) : null,\n      stories: options.storybook ? this.generateStories(spec) : null,\n      index: this.generateIndex(spec)\n    };\n  }\n\n  generateComponent(spec: ComponentSpec, options: GeneratorOptions): string {\n    const imports = this.generateImports(spec, options);\n    const types = options.typescript ? this.generatePropTypes(spec) : '';\n    const component = this.generateComponentBody(spec, options);\n    const exports = this.generateExports(spec);\n\n    return `${imports}\\n\\n${types}\\n\\n${component}\\n\\n${exports}`;\n  }\n\n  generateImports(spec: ComponentSpec, options: GeneratorOptions): string {\n    const imports = [\"import React, { useState, useEffect } from 'react';\"];\n\n    if (spec.styling === 'css-modules') {\n      imports.push(`import styles from '.\u002F${spec.name}.module.css';`);\n    } else if (spec.styling === 'styled-components') {\n      imports.push(\"import styled from 'styled-components';\");\n    }\n\n    if (options.accessibility) {\n      imports.push(\"import { useA11y } from '@\u002Fhooks\u002FuseA11y';\");\n    }\n\n    return imports.join('\\n');\n  }\n\n  generatePropTypes(spec: ComponentSpec): string {\n    const props = spec.props.map(p => {\n      const optional = p.required ? '' : '?';\n      const comment = p.description ? `  \u002F** ${p.description} *\u002F\\n` : '';\n      return `${comment}  ${p.name}${optional}: ${p.type};`;\n    }).join('\\n');\n\n    return `export interface ${spec.name}Props {\\n${props}\\n}`;\n  }\n\n  generateComponentBody(spec: ComponentSpec, options: GeneratorOptions): string {\n    const propsType = options.typescript ? `: React.FC\u003C${spec.name}Props>` : '';\n    const destructuredProps = spec.props.map(p => p.name).join(', ');\n\n    let body = `export const ${spec.name}${propsType} = ({ ${destructuredProps} }) => {\\n`;\n\n    \u002F\u002F Add state hooks\n    if (spec.state) {\n      body += spec.state.map(s =>\n        `  const [${s.name}, set${this.capitalize(s.name)}] = useState${options.typescript ? `\u003C${s.type}>` : ''}(${s.initial});\\n`\n      ).join('');\n      body += '\\n';\n    }\n\n    \u002F\u002F Add effects\n    if (spec.hooks?.includes('useEffect')) {\n      body += `  useEffect(() => {\\n`;\n      body += `    \u002F\u002F TODO: Add effect logic\\n`;\n      body += `  }, [${destructuredProps}]);\\n\\n`;\n    }\n\n    \u002F\u002F Add accessibility\n    if (options.accessibility) {\n      body += `  const a11yProps = useA11y({\\n`;\n      body += `    role: '${this.inferAriaRole(spec.type)}',\\n`;\n      body += `    label: ${spec.props.find(p => p.name === 'label')?.name || `'${spec.name}'`}\\n`;\n      body += `  });\\n\\n`;\n    }\n\n    \u002F\u002F JSX return\n    body += `  return (\\n`;\n    body += this.generateJSX(spec, options);\n    body += `  );\\n`;\n    body += `};`;\n\n    return body;\n  }\n\n  generateJSX(spec: ComponentSpec, options: GeneratorOptions): string {\n    const className = spec.styling === 'css-modules' ? `className={styles.${this.camelCase(spec.name)}}` : '';\n    const a11y = options.accessibility ? '{...a11yProps}' : '';\n\n    return `    \u003Cdiv ${className} ${a11y}>\\n` +\n           `      {\u002F* TODO: Add component content *\u002F}\\n` +\n           `    \u003C\u002Fdiv>\\n`;\n  }\n}\n```\n\n### 3. Generate React Native Component\n\n```typescript\nclass ReactNativeGenerator {\n  generateComponent(spec: ComponentSpec): string {\n    return `\nimport React, { useState } from 'react';\nimport {\n  View,\n  Text,\n  StyleSheet,\n  TouchableOpacity,\n  AccessibilityInfo\n} from 'react-native';\n\ninterface ${spec.name}Props {\n${spec.props.map(p => `  ${p.name}${p.required ? '' : '?'}: ${this.mapNativeType(p.type)};`).join('\\n')}\n}\n\nexport const ${spec.name}: React.FC\u003C${spec.name}Props> = ({\n  ${spec.props.map(p => p.name).join(',\\n  ')}\n}) => {\n  return (\n    \u003CView\n      style={styles.container}\n      accessible={true}\n      accessibilityLabel=\"${spec.name} component\"\n    >\n      \u003CText style={styles.text}>\n        {\u002F* Component content *\u002F}\n      \u003C\u002FText>\n    \u003C\u002FView>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    padding: 16,\n    backgroundColor: '#fff',\n  },\n  text: {\n    fontSize: 16,\n    color: '#333',\n  },\n});\n`;\n  }\n\n  mapNativeType(webType: string): string {\n    const typeMap: Record\u003Cstring, string> = {\n      'string': 'string',\n      'number': 'number',\n      'boolean': 'boolean',\n      'React.ReactNode': 'React.ReactNode',\n      'Function': '() => void'\n    };\n    return typeMap[webType] || webType;\n  }\n}\n```\n\n### 4. Generate Component Tests\n\n```typescript\nclass ComponentTestGenerator {\n  generateTests(spec: ComponentSpec): string {\n    return `\nimport { render, screen, fireEvent } from '@testing-library\u002Freact';\nimport { ${spec.name} } from '.\u002F${spec.name}';\n\ndescribe('${spec.name}', () => {\n  const defaultProps = {\n${spec.props.filter(p => p.required).map(p => `    ${p.name}: ${this.getMockValue(p.type)},`).join('\\n')}\n  };\n\n  it('renders without crashing', () => {\n    render(\u003C${spec.name} {...defaultProps} \u002F>);\n    expect(screen.getByRole('${this.inferAriaRole(spec.type)}')).toBeInTheDocument();\n  });\n\n  it('displays correct content', () => {\n    render(\u003C${spec.name} {...defaultProps} \u002F>);\n    expect(screen.getByText(\u002Fcontent\u002Fi)).toBeVisible();\n  });\n\n${spec.props.filter(p => p.type.includes('()') || p.name.startsWith('on')).map(p => `\n  it('calls ${p.name} when triggered', () => {\n    const mock${this.capitalize(p.name)} = jest.fn();\n    render(\u003C${spec.name} {...defaultProps} ${p.name}={mock${this.capitalize(p.name)}} \u002F>);\n\n    const trigger = screen.getByRole('button');\n    fireEvent.click(trigger);\n\n    expect(mock${this.capitalize(p.name)}).toHaveBeenCalledTimes(1);\n  });`).join('\\n')}\n\n  it('meets accessibility standards', async () => {\n    const { container } = render(\u003C${spec.name} {...defaultProps} \u002F>);\n    const results = await axe(container);\n    expect(results).toHaveNoViolations();\n  });\n});\n`;\n  }\n\n  getMockValue(type: string): string {\n    if (type === 'string') return \"'test value'\";\n    if (type === 'number') return '42';\n    if (type === 'boolean') return 'true';\n    if (type.includes('[]')) return '[]';\n    if (type.includes('()')) return 'jest.fn()';\n    return '{}';\n  }\n}\n```\n\n### 5. Generate Styles\n\n```typescript\nclass StyleGenerator {\n  generateCSSModule(spec: ComponentSpec): string {\n    const className = this.camelCase(spec.name);\n    return `\n.${className} {\n  display: flex;\n  flex-direction: column;\n  padding: 1rem;\n  background-color: var(--bg-primary);\n}\n\n.${className}Title {\n  font-size: 1.5rem;\n  font-weight: 600;\n  color: var(--text-primary);\n  margin-bottom: 0.5rem;\n}\n\n.${className}Content {\n  flex: 1;\n  color: var(--text-secondary);\n}\n`;\n  }\n\n  generateStyledComponents(spec: ComponentSpec): string {\n    return `\nimport styled from 'styled-components';\n\nexport const ${spec.name}Container = styled.div\\`\n  display: flex;\n  flex-direction: column;\n  padding: \\${({ theme }) => theme.spacing.md};\n  background-color: \\${({ theme }) => theme.colors.background};\n\\`;\n\nexport const ${spec.name}Title = styled.h2\\`\n  font-size: \\${({ theme }) => theme.fontSize.lg};\n  font-weight: 600;\n  color: \\${({ theme }) => theme.colors.text.primary};\n  margin-bottom: \\${({ theme }) => theme.spacing.sm};\n\\`;\n`;\n  }\n\n  generateTailwind(spec: ComponentSpec): string {\n    return `\n\u002F\u002F Use these Tailwind classes in your component:\n\u002F\u002F Container: \"flex flex-col p-4 bg-white rounded-lg shadow\"\n\u002F\u002F Title: \"text-xl font-semibold text-gray-900 mb-2\"\n\u002F\u002F Content: \"flex-1 text-gray-700\"\n`;\n  }\n}\n```\n\n### 6. Generate Storybook Stories\n\n```typescript\nclass StorybookGenerator {\n  generateStories(spec: ComponentSpec): string {\n    return `\nimport type { Meta, StoryObj } from '@storybook\u002Freact';\nimport { ${spec.name} } from '.\u002F${spec.name}';\n\nconst meta: Meta\u003Ctypeof ${spec.name}> = {\n  title: 'Components\u002F${spec.name}',\n  component: ${spec.name},\n  tags: ['autodocs'],\n  argTypes: {\n${spec.props.map(p => `    ${p.name}: { control: '${this.inferControl(p.type)}', description: '${p.description}' },`).join('\\n')}\n  },\n};\n\nexport default meta;\ntype Story = StoryObj\u003Ctypeof ${spec.name}>;\n\nexport const Default: Story = {\n  args: {\n${spec.props.map(p => `    ${p.name}: ${p.defaultValue || this.getMockValue(p.type)},`).join('\\n')}\n  },\n};\n\nexport const Interactive: Story = {\n  args: {\n    ...Default.args,\n  },\n};\n`;\n  }\n\n  inferControl(type: string): string {\n    if (type === 'string') return 'text';\n    if (type === 'number') return 'number';\n    if (type === 'boolean') return 'boolean';\n    if (type.includes('[]')) return 'object';\n    return 'text';\n  }\n}\n```\n\n## Output Format\n\n1. **Component File**: Fully implemented React\u002FReact Native component\n2. **Type Definitions**: TypeScript interfaces and types\n3. **Styles**: CSS modules, styled-components, or Tailwind config\n4. **Tests**: Complete test suite with coverage\n5. **Stories**: Storybook stories for documentation\n6. **Index File**: Barrel exports for clean imports\n\nFocus on creating production-ready, accessible, and maintainable components that follow modern React patterns and best practices.\n",{"name":5,"risk":48,"source":34,"date_added":49,"description":7},"unknown","2026-02-27","main","a50a3aa6b39fb0e1b7db88bef1bfc9c93606e126","modules\u002Fagent_skills\u002Fawesome-skills\u002Fplaybooks\u002Ffrontend-mobile-development-component-scaffold",0,"https:\u002F\u002Fgithub.com\u002FSam-06060\u002Fjarvis-assistant","https:\u002F\u002Fgithub.com\u002FSam-06060","Mobile Application Developer | Kotlin | Flutter, KMP, Swfit, Android,Swift UI | Building at Saar It Resources | Creator of Jarvis (AI Assistant)","2026-06-23 05:13:38",{"source":8,"skillName":5,"commands":59,"prompt":69,"zipAvailable":70},[60,63,66],{"tool":61,"command":62},"npx","npx skills add Sam-06060\u002Fjarvis-assistant --skill frontend-mobile-development-component-scaffold",{"tool":64,"command":65},"bunx","bunx skills add Sam-06060\u002Fjarvis-assistant --skill frontend-mobile-development-component-scaffold",{"tool":67,"command":68},"pnpm","pnpm dlx skills add Sam-06060\u002Fjarvis-assistant --skill frontend-mobile-development-component-scaffold","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FSam-06060\u002Fjarvis-assistant\u002Fblob\u002Fmain\u002Fmodules\u002Fagent_skills\u002Fawesome-skills\u002Fplaybooks\u002Ffrontend-mobile-development-component-scaffold\u002FSKILL.md",true,[],[73,84,99,126,145,168],{"skillNo":74,"name":75,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":76,"categories":77,"keywords":81,"publishedAt":43},"01M6GDRVS6FXX3ESH0C9DW01C0","test_skill","https:\u002F\u002Fgithub.com\u002FSam-06060\u002Fjarvis-assistant\u002Fblob\u002Fmain\u002Fscratch\u002Ftest_skill\u002FSKILL.md",[78],{"categoryNo":79,"categoryName":80,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",[82,83],"Test Skill","test",{"skillNo":85,"name":86,"nameZh":6,"description":87,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":88,"categories":89,"keywords":90,"publishedAt":43},"01M6GDRQ40HX22MA6XWC31RHHK","zustand-store-ts","Create Zustand stores following established patterns with proper TypeScript types and middleware.","https:\u002F\u002Fgithub.com\u002FSam-06060\u002Fjarvis-assistant\u002Fblob\u002Fmain\u002Fmodules\u002Fagent_skills\u002Fawesome-skills\u002Fplaybooks\u002Fzustand-store-ts\u002FSKILL.md",[],[91,92,93,94,95,96,97,34,98,42],"zustand store ts","zustand","store","with","types","middleware","patterns","create",{"skillNo":100,"name":101,"nameZh":6,"description":102,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":103,"categories":104,"keywords":108,"publishedAt":43},"01M6GDRKEA0WE670SPFWX5GKCN","zoom-automation","Automate Zoom meeting creation, management, recordings, webinars, and participant tracking via Rube MCP (Composio). Always search tools first for current schemas.","https:\u002F\u002Fgithub.com\u002FSam-06060\u002Fjarvis-assistant\u002Fblob\u002Fmain\u002Fmodules\u002Fagent_skills\u002Fawesome-skills\u002Fplaybooks\u002Fzoom-automation\u002FSKILL.md",[105],{"categoryNo":106,"categoryName":107,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[109,110,111,112,113,114,115,116,117,118,119,120,121,122,34,123,124,125],"automation","zoom automation","zoom","first","Tools","search","MCP","via","meeting","automate","critical","creation","webinars","composio","recordings","management","tracking",{"skillNo":127,"name":128,"nameZh":6,"description":129,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":130,"categories":131,"keywords":133,"publishedAt":43},"01M6GDRFS1452PC71JQ38S24HR","zoho-crm-automation","Automate Zoho CRM tasks via Rube MCP (Composio): create\u002Fupdate records, search contacts, manage leads, and convert leads. Always search tools first for current schemas.","https:\u002F\u002Fgithub.com\u002FSam-06060\u002Fjarvis-assistant\u002Fblob\u002Fmain\u002Fmodules\u002Fagent_skills\u002Fawesome-skills\u002Fplaybooks\u002Fzoho-crm-automation\u002FSKILL.md",[132],{"categoryNo":106,"categoryName":107,"taxonomyType":21,"taxonomyTypeDesc":22},[134,109,135,136,137,138,139,34,114,140,122,141,119,118,113,142,98,143,115,144],"crm automation","zoho crm","crm","zoho crm automation","zoho","leads","contacts","records","update","tasks","manage",{"skillNo":146,"name":147,"nameZh":6,"description":148,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":149,"categories":150,"keywords":152,"publishedAt":43},"01M6GDRCKQBAVTGHX5XBH26KPZ","zod-validation-expert","Expert in Zod — TypeScript-first schema validation. Covers parsing, custom errors, refinements, type inference, and integration with React Hook Form, Next.js, and tRPC.","https:\u002F\u002Fgithub.com\u002FSam-06060\u002Fjarvis-assistant\u002Fblob\u002Fmain\u002Fmodules\u002Fagent_skills\u002Fawesome-skills\u002Fplaybooks\u002Fzod-validation-expert\u002FSKILL.md",[151],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[35,153,154,155,40,42,156,157,158,159,160,161,94,162,163,164,165,34,166,167],"zod","zod validation expert","validation","safe","parsing","errors","schema validation","react hook form","hook","trpc","form","type","next","schema","Next.js",{"skillNo":169,"name":170,"nameZh":6,"description":171,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":172,"categories":173,"keywords":175,"publishedAt":43},"01M6GDR658B08K4MY0RWD4A6EH","zeroize-audit","Detects missing zeroization of sensitive data in source code and identifies zeroization removed by compiler optimizations, with assembly-level analysis, and control-flow verification. Use for auditing C\u002FC++\u002FRust code handling secrets, keys, passwords, or other sensitive data.","https:\u002F\u002Fgithub.com\u002FSam-06060\u002Fjarvis-assistant\u002Fblob\u002Fmain\u002Fmodules\u002Fagent_skills\u002Fawesome-skills\u002Fplaybooks\u002Fzeroize-audit\u002FSKILL.md",[174],{"categoryNo":106,"categoryName":107,"taxonomyType":21,"taxonomyTypeDesc":22},[176,177,178,179,180,181,182,183,34,184,185,186,187,188,189,190,191,192,193,115],"zeroize audit","audit","write","passwords","get","project","c++","activate","assembly","read","Bash","secrets","analysis","data","flow","verification","code","rust"]