Exécutez n'importe quel Skill dans Manus
en un clic

Exécutez n'importe quel Skill dans Manus en un clic

atomic-design

Étoiles0

Forks0

Mis à jour11 juin 2026 à 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

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Exécuter dans Manus

Source

jwilger

jwilger/claude-factory

Ouvrir le dépôt GitHub Voir les dépôts du créateur

Téléchargement

Exécuter dans Manus

Métiers associésSOC

Basé sur la classification professionnelle SOC

Concepteurs web et d'interfaces numériquesProfessions informatiques et mathématiques·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.

Plus depuis ce dépôt

même dépôt

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.