一键在 Manus 中运行任何 Skill

atomic-design

星标0

分支0

更新时间2026年6月11日 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.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

jwilger

jwilger/claude-factory

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

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.

同仓库更多 Skills

同仓库

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.