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

create-organism

Scaffolds a complete Organism file set under src/organisms/<Name>/ with TSX, CSS module, stories, tests, and barrel export.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automates the scaffolding of a reusable Organism within a design system, saving time and ensuring consistent structure across components that form page sections.

Core Features & Use Cases

  • Generates the full file structure under src/organisms/<Name>/ including TSX, CSS module, stories, tests, and a parts/ folder.
  • Creates a barrel export and README.md scaffold to document usage and API surface.
  • Enforces best practices: private parts isolation, accessibility-ready root elements, and clean naming conventions.
  • Key use case: quickly bootstrap components like SiteHeader or ProductCard with a standardized workflow.

Quick Start

Scaffold a new Organism named <Name>, generating its TSX component, CSS module, stories, tests, parts/ subfolder, and barrel export under src/organisms/<Name>/.

Frequently Asked Questions about create-organism

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

FAQPage Schema
How do I scaffold a UI Organism with TypeScript, Storybook stories, and CSS modules?▼

Scaffolding a UI Organism generates a complete file set including TSX, CSS module, Storybook stories, tests, and a private parts folder under src/organisms/<Name>/ with a barrel export.

What is the best way to create atomic design system components with isolated private parts?▼

Creating atomic design components with isolated private parts enforces best practices by generating a parts/ subfolder for private sub-components, ensuring clean separation and consistent naming across the design system.

Does this scaffolding workflow support accessibility-ready React components?▼

The scaffolding workflow supports accessibility-ready React components by generating accessibility-ready root elements within the TSX file, ensuring the Organism meets a11y standards before Storybook integration.

Can I generate Storybook stories and tests automatically for a new Organism?▼

Generating Storybook stories and tests automatically is supported, producing story files and test files alongside the TSX and CSS module to make the Organism ready for Storybook and integration.

When do I need to create an Organism component versus a Molecule in atomic design?▼

Creating an Organism component is needed when building complex page sections like SiteHeader or ProductCard, whereas Molecules combine simpler atoms; the scaffolder standardizes the full file structure for these larger components.

What limitations exist when scaffolding organisms with a barrel export and README?▼

Scaffolding organisms with a barrel export and README creates a standardized structure but is limited to the src/organisms/<Name>/ directory convention and does not configure the build system or Storybook environment itself.

Related Skills

Explore More Software Engineering Skills→
manastalukdarmanastalukdar
1

component-library

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

Community
Advanced
ElbertePlinioElbertePlinio

fix-knip-unused-exports

Apply category-specific fix strategies to resolve knip unused export violations in TypeScript projects.

Community
Intermediate
KaakatiKaakati
2

atomic-design

Enforce Brad Frost's Atomic Design hierarchy across Phlex, ReactJS, Next.js, and React Native.

Community
Advanced
WesleySmitsWesleySmits
6

scaffolding-react-components

Generate React/Next.js component scaffolds with TypeScript, CSS modules, tests, and Storybook.

Community
Advanced