skills.rest
thinkeloquent
thinkeloquentOFFICIAL
Explore all skills by this author →
GitHub

create-atom

Scaffold React and TypeScript atom boilerplate with CSS Modules under src/atoms.

Updated Aug 27, 2026
Search Tags:#typescript#react#boilerplate#scaffold#storybook#atomic-design#atom
One-click install
npx skills add https://github.com/thinkeloquent/mta-ui-atomicdesign-organisms --skill create-atom
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-atom
Source: https://github.com/thinkeloquent/mta-ui-atomicdesign-organisms/tree/main/.claude/skills/create-atom
Command: npx skills add https://github.com/thinkeloquent/mta-ui-atomicdesign-organisms --skill create-atom

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automates boilerplate scaffolding for a new atomic-design Atom, eliminating repetitive setup work.

Core Features & Use Cases

  • Creates the component file, styles, story, test, and barrel export under src/atoms/<Name>/.
  • Enforces a consistent atom structure that is reusable across the design system.
  • Use for adding new UI primitives like Button, Input, or Icon.

Quick Start

Tell it the Atom name and element (e.g., Button with element 'button') to generate the full boilerplate under src/atoms/Button/.

Frequently Asked Questions about create-atom

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

FAQPage Schema
How do I scaffold a React TypeScript component with atomic design structure?▼

Scaffolding a React TypeScript atom generates a component file, CSS Modules styles, Storybook story, test, and barrel export under src/atoms/<Name>/ for consistent design system primitives.

What files are included when generating a new UI atom boilerplate?▼

Generating a UI atom boilerplate creates the component file, styles, story, test, and an index.ts public API barrel export, ensuring deterministic file structures for predictable onboarding.

Can I use this to create Storybook stories and tests for Button or Input primitives?▼

Yes, creating Storybook stories and tests for common primitives like Button, Input, and Icon is the core use case, generating the necessary files under the src/atoms/ directory automatically.

Does the generated component boilerplate enforce CSS Modules and TypeScript?▼

Yes, the generated component boilerplate enforces a React, TypeScript, and CSS Modules setup to maintain a consistent, type-safe structure across the entire atomic design system.

What is the best way to add a new Icon or Avatar primitive to my design system?▼

Adding a new Icon or Avatar primitive involves specifying the atom name and HTML element, which triggers deterministic boilerplate generation under src/atoms/<Name>/ with all required files.

Related Skills

Explore More Software Engineering Skills→
manastalukdarmanastalukdar
1

component-library

Scaffold a component library with Storybook, testing, and build configuration.

Community
Advanced
AJV009AJV009
1

stories

Automate Storybook story creation for React components using atomic design.

Community
Intermediate
okgoogle13okgoogle13
1

react-page-scaffolder

Scaffold React page directories with MUI layout and export barrels.

Community
Basic
Sir-chawakornSir-chawakorn
33

code-generation

Generate React components, Next.js API routes, and project templates.

Community
Intermediate