{"id":"0bf896c7-f7b3-41b4-9830-f09ce5044ec1","shortId":"mG2TTP","kind":"skill","title":"frontend-mobile-development-component-scaffold","tagline":"You are a React component architecture expert specializing in scaffolding production-ready, accessible, and performant components. Generate complete component implementations with TypeScript, tests, s","description":"# React/React 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/react native component scaffolding tasks or workflows\n- Needing guidance, best practices, or checklists for react/react native component scaffolding\n\n## Do not use this skill when\n\n- The task is unrelated to react/react 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    // 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 './${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 '@/hooks/useA11y';\");\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 ? `  /** ${p.description} */\\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<${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    // 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 ? `<${s.type}>` : ''}(${s.initial});\\n`\n      ).join('');\n      body += '\\n';\n    }\n\n    // Add effects\n    if (spec.hooks?.includes('useEffect')) {\n      body += `  useEffect(() => {\\n`;\n      body += `    // TODO: Add effect logic\\n`;\n      body += `  }, [${destructuredProps}]);\\n\\n`;\n    }\n\n    // 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    // 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 `    <div ${className} ${a11y}>\\n` +\n           `      {/* TODO: Add component content */}\\n` +\n           `    </div>\\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<${spec.name}Props> = ({\n  ${spec.props.map(p => p.name).join(',\\n  ')}\n}) => {\n  return (\n    <View\n      style={styles.container}\n      accessible={true}\n      accessibilityLabel=\"${spec.name} component\"\n    >\n      <Text style={styles.text}>\n        {/* Component content */}\n      </Text>\n    </View>\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<string, 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/react';\nimport { ${spec.name} } from './${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(<${spec.name} {...defaultProps} />);\n    expect(screen.getByRole('${this.inferAriaRole(spec.type)}')).toBeInTheDocument();\n  });\n\n  it('displays correct content', () => {\n    render(<${spec.name} {...defaultProps} />);\n    expect(screen.getByText(/content/i)).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(<${spec.name} {...defaultProps} ${p.name}={mock${this.capitalize(p.name)}} />);\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(<${spec.name} {...defaultProps} />);\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// Use these Tailwind classes in your component:\n// Container: \"flex flex-col p-4 bg-white rounded-lg shadow\"\n// Title: \"text-xl font-semibold text-gray-900 mb-2\"\n// 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/react';\nimport { ${spec.name} } from './${spec.name}';\n\nconst meta: Meta<typeof ${spec.name}> = {\n  title: 'Components/${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<typeof ${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/React 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\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["frontend","mobile","development","component","scaffold","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills"],"capabilities":["skill","source-sickn33","skill-frontend-mobile-development-component-scaffold","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/frontend-mobile-development-component-scaffold","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34793 github stars · SKILL.md body (11,608 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-24T00:50:59.811Z","embedding":null,"createdAt":"2026-04-18T21:37:40.900Z","updatedAt":"2026-04-24T00:50:59.811Z","lastSeenAt":"2026-04-24T00:50:59.811Z","tsv":"'-1':932 '-2':929 '-4':909 '/content/i':692 '/hooks/usea11y':358 '/react':652 '0.5':828 '1':150,599,729,833,1036 '1.5':814 '16':601,606 '1rem':801 '2':229,1044 '3':530,1051 '333':608 '4':632,1061 '42':764 '5':778,1068 '6':937,1074 '600':819,882 '700':936 '900':927 'a11y':516,522 'a11yprops':465,518 'access':20,49,136,242,460,584,734,1088 'accessibilityinfo':553 'accessibilitylabel':586 'add':419,440,451,459,525 'analyz':151 'architectur':12,41,146 'arg':994,1007 'argtyp':971 'argument':148 'ask':1133 'async':736 'autodoc':970 'autom':120 'await':744 'axe':745 'background':803,865 'background-color':802,864 'backgroundcolor':602 'barrel':1077 'best':65,82,1098 'bg':807,911 'bg-primari':806 'bg-white':910 'bodi':412,424,438,446,449,455,463,468,473,482,487,490,494,496,498 'boolean':192,237,239,241,243,622,623,767,1025,1027 'bottom':827,888 'boundari':1141 'button':721 'call':702 'checklist':85 'clarif':1135 'class':197,244,536,637,782,899,942 'classnam':506,511,521,789,793,809,830 'clean':1080 'clear':1108 'col':907 'color':607,804,820,834,866,883 'column':799,860 'comment':374,379 'complet':25,54,1063 'compon':5,11,23,26,34,40,52,55,75,89,104,121,130,152,179,204,232,253,295,310,344,351,526,534,588,592,634,849,902,965,967,1037,1043,1057,1091 'componentanalyz':198 'componentfil':251 'componentspec':156,202,248,280,316,364,395,501,540,641,786,841,893,946 'componenttestgener':638 'config':1060 'consist':125 'const':284,289,294,299,320,366,370,373,399,405,414,427,464,505,515,570,594,613,659,706,718,737,742,788,851,870,959,991,1004 'contain':597,738,746,853,903 'content':527,593,686,831,930 'context':116 'control':975 'correct':685 'coverag':139,1067 'crash':674 'creat':124,1084 'criteria':1144 'css':175,331,509,1053 'css-modul':174,330,508 'data':165 'data-display':164 'default':983,992 'default.args':1008 'defaultprop':660,677,689,713,741 'defaultvalu':193 'definit':1046 'describ':657,1112 'descript':195,978 'destructuredprop':406,417,456 'develop':4 'differ':109 'direct':798,859 'display':166,684,794,855 'div':520 'document':62,1073 'domain':110 'effect':441,452 'els':339 'environ':1124 'environment-specif':1123 'expect':678,690,724,747 'expert':13,42,1129 'export':300,313,386,413,569,850,869,982,990,1003,1078 'extract':203 'fff':603 'file':1038,1076 'fireev':647 'fireevent.click':722 'flex':598,795,797,832,856,858,904,906,931 'flex-col':905 'flex-direct':796,857 'focus':140,1082 'follow':63,1093 'font':812,817,875,880,922 'font-semibold':921 'font-siz':811,874 'font-weight':816,879 'fontsiz':605 'form':163 'format':1035 'frontend':2 'frontend-mobile-development-component-scaffold':1 'fulli':1039 'function':160,626 'generat':24,53,230,246,531,633,779,938 'generatecompon':278,538 'generatecomponentbodi':393 'generatecssmodul':784 'generateimport':314 'generatejsx':499 'generateproptyp':362 'generatestori':944 'generatestyledcompon':839 'generatetailwind':891 'generatetest':639 'generatoropt':235,250,282,318,397,503 'getmockvalu':750 'gray':926,935 'guidanc':81 'hook':134,171,222,421 'implement':27,56,1040 'import':285,304,321,322,334,346,355,543,548,644,653,844,949,955,1081 'imports.join':360 'imports.push':333,345,354 'includ':444 'index':275,1075 'infercontrol':1009 'input':200,208,212,215,218,221,224,1138 'instruct':149 'interact':1005 'interfac':155,185,234,387,558,1048 'jest.fn':710,776 'join':383,410,437,567,578,669,730,980,1001 'jsx':485 'label':474,478 'layout':162 'let':411 'lg':915 'librari':651 'limit':1100 'logic':453 'maintain':1090 'map':664,699 'mapnativetyp':609 'margin':826,887 'margin-bottom':825,886 'match':1109 'mb':928 'meet':733 'meta':951,960,961,984 'miss':1146 'mobil':3 'mock':707,715,725 'modern':64,1094 'modul':176,332,510,1054 'module.css':338 'n':305,306,308,309,311,312,361,377,384,390,392,418,436,439,448,454,457,458,467,472,481,483,484,489,495,523,528,529,568,579,670,731,981,1002 'name':157,187,210,479 'nativ':33,74,88,103,183,533,557,1042 'need':80,107,119 'null':261,269,274 'number':620,621,762,1020,1022 'object':1031 'option':249,256,281,288,298,317,371,381,396,493,502 'options.accessibility':353,462,517 'options.storybook':271 'options.testing':266 'options.typescript':258,291,401,433 'output':1034,1118 'outsid':113 'p':369,408,476,562,576,662,665,695,700,908,973,996 'p.defaultvalue':998 'p.description':375,376,979 'p.name':380,409,477,563,577,666,703,709,714,717,727,974,997 'p.name.startswith':697 'p.required':372,564,663 'p.type':382,566,668,977,1000 'p.type.includes':696 'pad':600,800,861 'page':161 'parserequir':199 'pattern':143,1096 'perform':22,51 'permiss':1139 'platform':181,227 'practic':66,83,1099 'primari':808,824 'product':18,47,1086 'production-readi':17,46,1085 'prop':167,216,367,389,391,404,560,574 'propdefinit':168,186 'proper':132 'propstyp':400,416 'react':10,39,129,231,323,327,532,544,547,556,1095 'react-nat':555 'react.fc':402,572 'react.reactnode':624,625 'react/react':32,73,87,102,1041 'reactcomponentgener':245 'reactnativegener':537 'readi':19,48,1087 'record':615 'rem':815,829 'render':645,672,675,687,711,739 'requir':147,153,191,1137 'result':743,748 'return':209,252,303,359,378,385,486,488,497,519,542,580,628,643,757,763,768,772,775,777,792,843,895,948,1016,1021,1026,1030,1032 'reusabl':142 'review':1130 'role':469 'round':914 'rounded-lg':913 's.initial':435 's.name':428,431 's.type':434 'safe':128 'safeti':1140 'scaffold':6,16,35,45,76,90,105,122 'scalabl':145 'scope':115,1111 'screen':646 'screen.getbyrole':679,720 'screen.getbytext':691 'secondari':838 'semibold':923 'set':429 'shadow':916 'size':813,876 'skill':69,95,1103 'skill-frontend-mobile-development-component-scaffold' 'source-sickn33' 'spec':247,255,260,264,268,273,277,279,287,293,297,302,315,363,394,492,500,539,640,785,840,892,945 'spec.hooks':443 'spec.name':337,388,403,415,480,514,559,571,573,587,654,656,658,676,688,712,740,791,852,871,956,958,963,966,968,989 'spec.props.filter':661,694 'spec.props.find':475 'spec.props.map':368,407,561,575,972,995 'spec.state':423 'spec.state.map':425 'spec.styling':329,341,507 'spec.type':471,681 'special':14,43 'specif':205,1125 'standard':735 'state':169,219,420 'statedefinit':170 'stop':1131 'stori':270,940,986,993,1006,1069,1071 'storybook':240,939,1070 'storybook/react':954 'storybookgener':943 'storyobj':952,987 'string':158,172,188,190,196,201,283,319,365,398,504,541,611,612,616,617,618,619,642,752,753,756,787,842,894,947,1011,1012,1015 'structur':133 'style':60,135,173,178,225,262,335,343,347,350,512,582,590,595,780,845,848,1052,1056 'styled-compon':177,342,349,847,1055 'styled.div':854 'styled.h2':873 'stylegener':783 'styles.container':583 'styles.text':591 'stylesheet':551 'stylesheet.create':596 'substitut':1121 'success':1143 'suit':1065 'tag':969 'tailwind':180,898,1059 'task':77,98,1107 'test':30,59,138,238,265,635,650,758,1062,1064,1127 'testing-librari':649 'text':550,589,604,823,837,919,925,934,1017,1033 'text-gray':924,933 'text-primari':822 'text-secondari':836 'text-xl':918 'theme':862,867,877,884,889 'theme.colors.background':868 'theme.colors.text.primary':885 'theme.fontsize.lg':878 'theme.spacing.md':863 'theme.spacing.sm':890 'this.camelcase':513,790 'this.capitalize':430,708,716,726 'this.detectplatform':228 'this.detectstylingapproach':226 'this.extractname':211 'this.extractprops':217 'this.extractstate':220 'this.generatecomponent':254 'this.generatecomponentbody':296 'this.generateexports':301 'this.generateimports':286 'this.generateindex':276 'this.generatejsx':491 'this.generateproptypes':292 'this.generatestories':272 'this.generatestyles':263 'this.generatetests':267 'this.generatetypes':259 'this.getmockvalue':667,999 'this.identifyhooks':223 'this.inferariarole':470,680 'this.infercontrol':976 'this.infertype':214 'this.mapnativetype':565 'titl':810,872,917,964 'tobeinthedocu':682 'tobevis':693 'todo':450,524 'tohavebeencalledtim':728 'tohavenoviol':749 'tool':112 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'touchableopac':552 'treat':1116 'trigger':705,719,723 'true':585,769 'type':127,159,189,213,257,290,307,751,755,761,766,950,985,1010,1014,1019,1024,1045,1050 'type-saf':126 'type.includes':771,774,1029 'typemap':614,629 'typeof':962,988 'typescript':29,58,154,233,236,535,636,781,941,1047 'univers':184 'unrel':100 'use':67,93,896,1101 'usea11y':356,466 'useeffect':325,445,447 'user':118,207 'usest':324,432,545 'valid':1126 'valu':759 'var':805,821,835 'view':549,581 'void':627 'web':182 'webtyp':610,630,631 'weight':818,881 'white':912 'without':673 'work':71 'workflow':79 'xl':920","prices":[{"id":"8d377cc5-d6df-440f-adac-e87d45dfc707","listingId":"0bf896c7-f7b3-41b4-9830-f09ce5044ec1","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:37:40.900Z"}],"sources":[{"listingId":"0bf896c7-f7b3-41b4-9830-f09ce5044ec1","source":"github","sourceId":"sickn33/antigravity-awesome-skills/frontend-mobile-development-component-scaffold","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/frontend-mobile-development-component-scaffold","isPrimary":false,"firstSeenAt":"2026-04-18T21:37:40.900Z","lastSeenAt":"2026-04-24T00:50:59.811Z"}],"details":{"listingId":"0bf896c7-f7b3-41b4-9830-f09ce5044ec1","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"frontend-mobile-development-component-scaffold","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34793,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-24T00:28:59Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"f09c5396b55a2318ce2221f41a5b1d53becceb10","skill_md_path":"skills/frontend-mobile-development-component-scaffold/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/frontend-mobile-development-component-scaffold"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"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"},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/frontend-mobile-development-component-scaffold"},"updatedAt":"2026-04-24T00:50:59.811Z"}}