skills.rest
kiprotichgidii
kiprotichgidiiCOMMUNITY
Explore all skills by this author →
GitHub

frontend-mobile-development-component-scaffold

Generate React and React Native components with TypeScript types, tests, styles, and Storybook stories.

Updated May 8, 2026
Search Tags:#typescript#testing#react#code generation#storybook#component scaffolding#react native
One-click install
npx skills add https://github.com/kiprotichgidii/agent-skills --skill frontend-mobile-development-component-scaffold-kiprotichgidii
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-mobile-development-component-scaffold
Source: https://github.com/kiprotichgidii/agent-skills/tree/main/skills/frontend-mobile-development-component-scaffold
Command: npx skills add https://github.com/kiprotichgidii/agent-skills --skill frontend-mobile-development-component-scaffold-kiprotichgidii

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Manually creating new React or React Native components involves repetitive boilerplate: prop interfaces, state hooks, styles, tests, and Storybook stories. This Skill automates that scaffolding so every component starts with a consistent, accessible, type-safe structure. ## Core Features & Use Cases - Component Generation: Produces complete React or React Native components from a specification including props, state, hooks, and platform target. - Full Supporting Files: Generates TypeScript interfaces, CSS Modules/styled-components/Tailwind styles, Jest and Testing Library test suites, and Storybook stories. - Accessibility Built In: Adds ARIA roles, accessibility labels, and axe-based accessibility tests to generated output. - Use Case: Ask for a form component with specific props, and receive the component file, type definitions, styles, tests, stories, and an index barrel export ready to drop into your project. ## Quick Start Generate a React component named UserCard with name and avatar props, TypeScript types, Tailwind styles, tests, and a Storybook story.

Frequently Asked Questions about frontend-mobile-development-component-scaffold

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I scaffold a React component with TypeScript and tests?▼

Describe the component name, props, state, and styling approach, and the generator produces the component file, TypeScript prop interfaces, a Jest and Testing Library test suite, and an index export. It also supports Storybook story generation for documentation.

How to generate React Native components from a spec?▼

Provide a component specification with props and platform set to native, and the generator emits a React Native component using View, Text, StyleSheet, and accessibility props. Web types are mapped to native equivalents automatically.

Does it support styled-components, CSS Modules, and Tailwind?▼

Yes, the styling field in the component spec selects between CSS Modules, styled-components, or Tailwind. Each option generates the appropriate style file or class recommendations matching that approach.

Can generated components include accessibility testing?▼

Yes, when the accessibility option is enabled the generator adds ARIA roles, accessibility labels, and an axe-based test that asserts the rendered component has no accessibility violations.

What files are produced when scaffolding a component?▼

The output includes the component file, TypeScript type definitions, a styles file, a test suite, Storybook stories, and an index barrel export. Test and story files are optional based on generator options.

Related Skills

Explore More Software Engineering Skills→
kleon6436kleon6436

react-coding-standards

Enforce React coding conventions for TypeScript-based projects.

Community
Intermediate
caovinhphuccaovinhphuc

e2e-testing

Automate Playwright end-to-end tests with Page Object Model patterns and CI artifact capture.

Community
Advanced
curiositechcuriositech
2

git-best-practices

Standardizes Git branching, commits, and Husky pre-commit checks for teams.

Official
Intermediate
jidohyunjidohyun
17

component-refactoring

Refactor high-complexity React components by extracting hooks and sub-components.

Community
Intermediate