skills.rest
MaiconGambini
MaiconGambiniCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-mobile-development-component-scaffold

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Manually creating new React or React Native components involves repetitive boilerplate: prop interfaces, state hooks, styles, test files, 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 (web) and React Native components from a specification including props, state, hooks, and platform target. - Multi-Style Support: Generates CSS Modules, styled-components, or Tailwind class configurations depending on your project setup. - Tests and Stories: Creates React Testing Library test suites with accessibility checks (axe) and Storybook stories with inferred controls. - Use Case: Ask for a form component with labeled inputs and submit handling, and receive the component file, TypeScript prop interface, styles, unit tests, and Storybook stories ready to drop into your project. ## Quick Start Scaffold a React component named UserCard with name and avatar props, TypeScript types, Tailwind styling, 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?▼

Provide the component name, props with types, and desired options such as TypeScript, testing, and Storybook. The generator outputs the component file, prop interface, test suite using React Testing Library, and an index barrel export.

How to generate React Native components from a spec?▼

Define the component spec with platform set to native, and the generator maps web types to React Native equivalents. It produces a component using View, Text, and StyleSheet with accessibility labels included.

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

Yes, the styling field in the component spec selects between css-modules, styled-components, and tailwind. Each option generates the matching style file or class configuration for the component.

Can generated components include accessibility testing?▼

Yes, enabling the accessibility option adds ARIA role inference, an a11y props hook, and an axe-based test that asserts the rendered component has no accessibility violations.

What are the limitations of automated component scaffolding?▼

Generated JSX bodies and effect logic contain TODO placeholders that require manual implementation. The scaffold provides structure, types, tests, and stories, but business logic and final markup must be completed by the developer.

Related Skills

Explore More Software Engineering Skills→
Imad-OuteImad-Oute
2

mh-cto-sdlc-component-spec

Write UI component specifications with design system tokens and wireframe behavior.

Community
Advanced
xtonextone
3

nextjs-react-implementation

Generate Next.js/React components with TS types, Tailwind styling, Vitest, and Storybook from design specs.

Official
Advanced
RebornQRebornQ
52

trellis-check

Run spec compliance, lint, type-check, and test suites on new changes.

Community
Advanced
google-labs-codegoogle-labs-code
8.2k

shadcn-ui

Integrates and customizes shadcn/ui components in React applications using Tailwind CSS.

Official
Advanced