Frontend Mobile Development Component Scaffold

dokhacgiakhoa/frontend-mobile-development-component-scaffold

You are a React component architecture expert specializing in scaffolding production-ready, accessible, and performant components. Generate complete component implementations with TypeScript, tests, s

3k tokens

context cost

the whole folder, loaded on every use

files

instructions only

copies elsewhere

how many repositories repackaged it

505

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

npx skills add https://github.com/Dokhacgiakhoa/Agent-Skills-4-Vibe-Coding-CLI --skill frontend-mobile-development-component-scaffold

What comes with it

10 329 bytes besides the instruction

sub-skills/1-analyze-component-requirements.md

sub-skills/2-generate-react-component.md

sub-skills/3-generate-react-native-component.md

sub-skills/4-generate-component-tests.md

sub-skills/5-generate-styles.md

sub-skills/6-generate-storybook-stories.md

The instruction itself

13 sections, as written by the author

React/React Native Component Scaffolding

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

🧠 Knowledge Modules (Fractal Skills)

1. 1. Analyze Component Requirements

2. 2. Generate React Component

3. 3. Generate React Native Component

4. 4. Generate Component Tests

5. 5. Generate Styles

6. 6. Generate Storybook Stories

How to use it

Copy the folder

Take dokhacgiakhoa/frontend-mobile-development-component-scaffold from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.