Is this skill compatible with modern frontend frameworks?

Yes, while the patterns are framework-agnostic, they are specifically optimized for component-based environments like React, Vue, Angular, and Svelte.

Where should I put business logic according to these rules?

Business logic and data fetching should ideally reside in Organisms, Templates, or Pages, keeping Atoms and Molecules pure, data-driven, and highly reusable.

How does this skill prevent circular dependencies?

It enforces a strict one-way composition hierarchy where higher-level components can import lower-level ones, but lower-level components (like Atoms) are forbidden from importing from Molecules or Organisms.

Does this skill help with Storybook integration?

Yes, the provided directory structure and naming conventions are specifically designed to align with Storybook workflows and automated component testing.

What are 'Quarks' in this methodology?

Quarks are sub-atomic design tokens representing raw values like color hex codes, spacing scales, and typography settings that components consume for styling.

Atomic Design Fundamentals

Name: Atomic Design Fundamentals
Author: TheBushidoCollective

byTheBushidoCollective

•

Herramientas de Diseño

Implements and organizes scalable UI component libraries using the extended Atomic Design methodology.

This skill empowers Claude to architect professional-grade design systems based on Brad Frost's Atomic Design principles, enhanced with 'Quarks' for granular design tokens. It provides a rigorous framework for organizing components into a clear hierarchy—from primitive building blocks to full-page layouts—ensuring maintainability, preventing circular dependencies, and establishing consistent naming conventions across the frontend codebase. It is ideal for developers building complex web applications who require a standardized approach to component composition and directory architecture.

Características Principales

01Hierarchical component mapping from Quarks to Pages

02Design token (Quark) integration for consistent styling

03Strict composition rules to prevent architectural anti-patterns

04Standardized directory structure for design systems

05Best practices for prop flow and business logic separation

0672 GitHub stars

Casos de Uso

01Establishing team-wide standards for UI component organization and naming

02Refactoring existing component libraries into a scalable, hierarchical structure

03Architecting a new design system from scratch in React, Vue, or Svelte

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