What is the 'Quarks' level in this Atomic Design skill?

Quarks represent the sub-atomic level of design tokens, such as raw color values, spacing scales, and typography settings that are consumed by atoms but are not UI components themselves.

What is the difference between an Organism and a Molecule?

A Molecule is a simple group of atoms functioning together (like a search bar), whereas an Organism is a complex, standalone section of an interface (like a Header) that may contain multiple molecules.

How does this skill prevent circular dependencies?

It enforces strict composition rules where components can only import from lower levels of the hierarchy (e.g., a Molecule can import an Atom, but an Atom cannot import a Molecule).

Can I apply these principles to any frontend framework?

Yes, while the examples often use React-style syntax, the Atomic Design methodology and directory structures are framework-agnostic and work with Vue, Svelte, Angular, and more.

Atomic Design Fundamentals

Name: Atomic Design Fundamentals
Author: TheBushidoCollective

byTheBushidoCollective

•

デザインツール

Organizes UI development using a chemistry-inspired hierarchy of quarks, atoms, molecules, organisms, templates, and pages.

This skill equips Claude with the methodology to build and maintain scalable design systems based on Brad Frost's Atomic Design principles. It introduces a specialized 'Quarks' layer for design tokens and enforces a strict hierarchy to ensure components remain modular and reusable. By following these patterns, developers can eliminate circular dependencies, standardize directory structures, and create a clear source of truth for UI elements from primitive values to full-page layouts.

主な機能

01Strict composition rules to prevent architectural anti-patterns

02Comprehensive naming conventions for components, files, and tests

03Design token integration for consistent colors, spacing, and typography

04Hierarchical component organization from design tokens (Quarks) to full Pages

0597 GitHub stars

06Standardized directory structures for modern frontend frameworks

ユースケース

01Refactoring monolithic UI components into a modular, maintainable hierarchy

02Establishing a standardized frontend folder structure for large-scale team projects

03Architecting a new design system or shared component library

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add thebushidocollective/han atomic-design-fundamentals

For use in Claude.ai and ChatGPT

Download Skill