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

Quarks represent sub-atomic design tokens such as color palettes, spacing scales, and typography values that serve as the foundation for all UI atoms.

How does this skill prevent architectural debt?

It enforces strict composition rules that prevent 'upward' imports, ensuring that simple components never depend on complex organisms or templates.

What is the difference between a Molecule and an Organism?

A Molecule is a simple group of atoms functioning together (like a search form), whereas an Organism is a complex, standalone section of an interface (like a site header).

Is this skill compatible with React or Vue?

Yes, the Atomic Design methodology is framework-agnostic and provides organizational patterns applicable to React, Vue, Angular, Svelte, and standard Web Components.

Atomic Design Fundamentals

Name: Atomic Design Fundamentals
Author: TheBushidoCollective

byTheBushidoCollective

•

디자인 도구

Implements the Atomic Design methodology to build scalable, hierarchical component libraries with an extended quark-level design token system.

This skill empowers developers to master Brad Frost’s Atomic Design methodology by providing a structured framework for organizing UI components into a logical hierarchy. It extends the traditional model by introducing 'quarks'—design tokens for colors, spacing, and typography—ensuring a robust foundation for design systems. By enforcing strict composition rules and directory structures, this skill helps teams build maintainable, scalable, and professional-grade frontend architectures while preventing common anti-patterns like circular dependencies or misplaced business logic.

주요 기능

01Extended six-stage hierarchy including sub-atomic Quarks for design tokens

02Standardized directory structures for component-based project organization

03Strict architectural rules to prevent upward import anti-patterns

04Standardized naming conventions and barrel export patterns for clean imports

05Best practices for separating UI presentation from domain-specific business logic

0666 GitHub stars

사용 사례

01Bootstrapping a new design system or component library in a modern frontend project

02Enforcing consistent component organization and naming standards across a development team

03Refactoring a monolithic UI codebase into a maintainable, hierarchical structure

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