What is an Organism in Atomic Design?

An Organism is a larger UI section built from atoms and molecules that should be reusable across pages.

Can Organisms fetch data?

They should receive data via props and only fetch data if your project uses component-level fetching; otherwise isolate data access and avoid in-component fetches.

How should I test Organisms?

Test behavior driven by props, use stable selectors (role, labelText), and provide mock data in Component.test.tsx.

atomic-organism

npx machina-cli add skill andireuter/skills-webapp/atomic-organism --openclaw

Files (1)

SKILL.md

1.7 KB

Atomic Design: ORGANISM (React Functional Components)

You are creating an ORGANISM: a larger section of UI composed of molecules and atoms.

Hard rules

Functional components only.
Data boundary:
- Organisms can accept data via props and emit events via callbacks.
- Avoid direct fetching inside the organism unless the project explicitly uses component-level fetching patterns (if so, isolate it and justify).
Dependency discipline:
- Organisms may import molecules/atoms and shared utilities.
- Avoid importing page-level modules or routing concerns.
State:
- Local state for UI coordination is fine (open/close, selected tab).
- Prefer lifting state up when it becomes cross-organism/page relevant.
Testability:
- Prefer pure props-driven behavior; inject dependencies via props.
- Use stable selectors (role, labelText) rather than brittle test IDs unless necessary.

Output expectations

Provide:
1. Component.tsx
2. Component.test.tsx (behavior-driven)
3. Component.stories.tsx (mock data variants)

Recommended folder conventions

src/components/organisms/<ComponentName>/...

Organism checklist

Clear props contract (data in, events out)
No routing/global singleton coupling unless standard for the repo
Uses semantic landmarks where appropriate (nav, main, section, headings)

Source

git clone https://github.com/andireuter/skills-webapp/blob/main/skills/atomic-organism/SKILL.mdView on GitHub

Overview

An ORGANISM is a larger UI section composed of molecules and atoms in React. It serves features like nav bars, product grids, comment lists, forms, and dialogs, and should remain reusable across pages by accepting data via props and emitting events via callbacks.

How This Skill Works

Organisms are functional components that compose molecules and atoms to form meaningful UI sections. They receive data and events via props, may manage small local UI state (e.g., open/close), and rely on props to enable testability. They should avoid page-level data fetching or routing concerns and import only molecules/atoms and shared utilities.

When to Use It

Build a site-wide navigation bar or header
Render a product grid or catalog section
Display a list with actions (comments, posts, or reviews)
Present a reusable form or modal/dialog
Create a dashboard panel that coordinates child components

Quick Start

Step 1: Create src/components/organisms/<ComponentName>/Component.tsx
Step 2: Define a prop contract (data, callbacks) and compose molecules/atoms
Step 3: Add Component.test.tsx and Component.stories.tsx with mock data

Best Practices

Define a clear props contract (data in, events out)
Limit local state to UI coordination and lift state up when cross-organism
Avoid routing or global singletons inside an organism
Import only molecules/atoms and shared utilities, not page modules
Write prop-driven components and test with stable selectors

Example Use Cases

Header navigation Organism composed of logo, menu items, and search
Product grid Organism displaying items with add-to-cart actions
Comment list Organism rendering comments with like/reply actions
Reusable form/dialog Organism for modal login or form submission
Dashboard panel Organism coordinating charts and detail cards

Frequently Asked Questions

Add this skill to your agents