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
category	Document Processing
source	antigravity
tags	["typescript","react","node","api","ai","workflow","document","tailwind","rag"]
url	https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/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.(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 {
     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 += ;
    bod