Can I use this with CSS-in-JS libraries?

Yes, it includes implementation patterns for styled-components and emotion, as well as CSS Modules and standard CSS configurations.

Is this compatible with existing design systems?

Absolutely. This skill is designed to help Claude organize and extend any design system that uses tokenization for its foundational values.

What are Quarks in the context of Atomic Design?

Quarks are the sub-atomic building blocks—the design tokens like colors, spacing units, and font sizes—that form the raw materials from which atoms are built.

How does this skill handle CSS variables?

It provides standardized templates and patterns for generating CSS custom properties from TypeScript constants, ensuring full support for runtime theming.

Why include a layer below atoms?

Starting with Quarks ensures a single source of truth for all design values, making global design changes like brand color updates or font scaling significantly easier to manage.

Atomic Design Quarks

Name: Atomic Design Quarks
Author: TheBushidoCollective

byTheBushidoCollective

•

设计工具

Establishes foundational design tokens and primitive values to build scalable, professional-grade atomic design systems.

This skill empowers developers to implement the 'Quark' layer of Atomic Design, focusing on the non-visual design tokens like colors, spacing, and typography that serve as the DNA for UI components. It provides standardized patterns for defining CSS custom properties, TypeScript-based design constants, and organized directory structures, ensuring consistency across design systems before a single atom is even rendered. Ideal for frontend architects who want to maintain a single source of truth for their design language.

主要功能

01Standardized design token definitions for colors, spacing, and typography

02Automated generation patterns for CSS custom properties and runtime variables

03Implementation of animation, breakpoint, and z-index primitives

04Optimized directory structures for design system scalability

05Seamless integration patterns for using quarks within atoms and molecules

0666 GitHub stars

使用场景

01Building a multi-tenant design system with complex variable theme support

02Standardizing CSS constants and design language across enterprise frontend projects

03Establishing a single source of truth for design primitives in React, Vue, or Svelte environments

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add thebushidocollective/han atomic-design-quarks

For use in Claude.ai and ChatGPT

Download Skill