Ejecuta cualquier Skill en Manus
con un clic

Ejecuta cualquier Skill en Manus con un clic

atomic-design

Estrellas0

Forks0

Actualizado11 de junio de 2026 a las 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.

Instalación

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Ejecutar en Manus

Fuente

jwilger

jwilger/claude-factory

Abrir repositorio de GitHub Ver repositorios del creador

Descarga

Ejecutar en Manus

Ocupaciones relacionadasSOC

Basado en la clasificación ocupacional SOC

Diseñadores de interfaces web y digitalesOcupaciones informáticas y matemáticas·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.

Más de este repositorio

mismo repositorio

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.