Atomic Design Quarks

What it does

This skill, Atomic Design Quarks, helps you generate foundational UI elements (HTML/CSS) from text prompts while adhering to atomic design principles. It focuses on creating "quarks," which are the smallest building blocks of a design system—primitive values like colors, spacing units, and font sizes that atoms consume. Essentially, it allows you to define your design language at its most granular level by generating these reusable design tokens.

When to use it

• Building a Design System: When establishing or expanding a design system from the ground up.
• Defining Design Tokens: To generate and manage color palettes, spacing scales, font sizes, and other fundamental design values.
• Creating Reusable UI Components: As a starting point for building more complex atoms and molecules within your application's interface.
• Ensuring Consistency: When you need to enforce consistent styling across different parts of an application by defining these base values.

Key capabilities

• Generates design tokens (colors, spacing, font sizes) based on prompts.
• Creates "quarks," the foundational building blocks for atomic design systems.
• Supports color token generation with varying shades (e.g., 50, 100, 200...).
• Adheres to Brad Frost's Atomic Design methodology by adding a level below atoms.

Example prompts

• "Generate a primary brand color palette with shades from 50 to 900."
• "Create spacing tokens for small, medium, and large sizes."
• "Define a success color scheme with light, main, and dark variations."

Tips & gotchas

• This skill focuses specifically on generating quarks, which are non-visual design values. It does not generate full UI components like buttons or inputs directly.
• Understanding the principles of Atomic Design is helpful to effectively utilize this skill.