Run any Skill in Manus with one click

atomic-design

Stars0

Forks0

UpdatedJune 11, 2026 at 23:12

This skill should be used when the user or an agent is building UI components, designing the design system, or understanding how UI components are organized in a Claude-Factory managed project. It explains Brad Frost's Atomic Design methodology with the Claude-Factory extension adding a 'quarks' level below atoms.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

jwilger

jwilger/claude-factory

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web and Digital Interface DesignersComputer and Mathematical Occupations·SOC 15-1255

SKILL.md

readonly

name	Atomic Design
description	This skill should be used when the user or an agent is building UI components, designing the design system, or understanding how UI components are organized in a Claude-Factory managed project. It explains Brad Frost's Atomic Design methodology with the Claude-Factory extension adding a 'quarks' level below atoms.
version	1.0.0

Claude-Factory uses Atomic Design with one extension: quarks below atoms.

The levels (smallest to largest)

Quarks: The most primitive design tokens — colors, type scales, spacing units, border radii, shadows. Not components; just named values. "Primary blue", "spacing-4", "font-size-body". Quarks have no structure; they are referenced by atoms.

Atoms: The smallest functional UI elements that cannot be broken down further. A button, an input field, a label, an icon, a single-line text display. An atom uses quarks for its visual properties but has no composition of other atoms.

Molecules: Simple groups of atoms that work together as a unit. A labeled input field (label atom + input atom). A search bar (input atom + button atom). Molecules do one thing.

Organisms: Relatively complex UI sections composed of groups of molecules and/or atoms. A navigation bar (logo atom + nav-link molecules). A product card (image atom + title atom + price molecule + add-to-cart button atom). Organisms are distinct sections of an interface.

Templates: Page-level objects that place components into a layout. No real content — use placeholder data. Show the structure and relationships. Define the content areas and their arrangement.

Pages: Specific instances of templates with real content. This is what the user actually sees. Pages test whether the template works with real content and define the route-level UI.

Vertical-slice alignment

Each vertical slice owns its screen-level UI components (the template/page instances for that slice's views). The design system (quarks through organisms) lives in the platform layer — it is shared infrastructure. A slice uses the design system's components but does not modify them.

See references/ for how to document components at each level and how to cross-check the design system against the event model's screens.

More from this repository

same repository

factory-conductor

jwilger/claude-factory

This skill should be used when running the Claude-Factory conductor loop, understanding how cf_next_step output should be interpreted, or troubleshooting why the loop is not advancing. It explains the dispatcher pattern, how to interpret kernel step responses, and how to dispatch Claude agents vs codex GPT executors.

2026-06-160

strict-linting

jwilger/claude-factory

This skill should be used when configuring linters for a new project stack, understanding why the factory starts with the strictest linter config, or deciding whether a lint rule relaxation is justified. It explains the principle that strictness is the default and relaxation requires narrow scope and documented justification.

2026-06-120

event-modeling-method

jwilger/claude-factory

This skill should be used when the user or an agent is creating or reviewing an event model, understanding event modeling methodology, decomposing a workflow into slices, or learning how to use emc for event modeling. It explains the event modeling methodology as practiced in Claude-Factory — Given/When/Then scenarios, slice decomposition, transition types, and workflow composition.

2026-06-120

event-sourcing-patterns

jwilger/claude-factory

This skill should be used when implementing event-sourced systems, choosing how to project state from events, designing read models, or handling performance/consistency trade-offs in event-sourced applications. It covers the eight core implementation patterns from Martin Dilger's methodology.

2026-06-120

functional-core-imperative-shell-and-effects

jwilger/claude-factory

This skill should be used when the user or an agent is designing functions that need I/O, deciding where to put business logic, or implementing the effects pattern for requesting I/O from the functional core. It explains functional-core/imperative-shell architecture and the effects (or step/trampoline) pattern for languages that do not natively support algebraic effects.

2026-06-120

railway-oriented-programming

jwilger/claude-factory

This skill should be used when the user or an agent is designing error handling, writing functions that can fail, chaining operations that may fail, or reviewing code for error-handling correctness. It explains Scott Wlaschin's railway-oriented programming approach — using Result/Either types to make the error path explicit and composable without exceptions or defensive coding.

2026-06-120

name	Atomic Design
description	This skill should be used when the user or an agent is building UI components, designing the design system, or understanding how UI components are organized in a Claude-Factory managed project. It explains Brad Frost's Atomic Design methodology with the Claude-Factory extension adding a 'quarks' level below atoms.
version	1.0.0

Claude-Factory uses Atomic Design with one extension: quarks below atoms.

The levels (smallest to largest)

Molecules: Simple groups of atoms that work together as a unit. A labeled input field (label atom + input atom). A search bar (input atom + button atom). Molecules do one thing.

Templates: Page-level objects that place components into a layout. No real content — use placeholder data. Show the structure and relationships. Define the content areas and their arrangement.

Pages: Specific instances of templates with real content. This is what the user actually sees. Pages test whether the template works with real content and define the route-level UI.

Vertical-slice alignment

See references/ for how to document components at each level and how to cross-check the design system against the event model's screens.