tddworks/claude-skills/swiftui-atomic-design

Name: swiftui-atomic-design
Author: tddworks

Trust tier 2

community

LLM review pending

Source check pending

Checking that the SKILL.md file is still in the repository.

Guide for building SwiftUI components using Brad Frost's Atomic Design methodology — organizing views into Atoms, Molecules, Organisms, Templates, and Pages with Design Tokens for theming. Use this skill whenever building new SwiftUI UI components, refactoring existing views into reusable pieces, creating a design system, or organizing a component library. Also trigger when the user mentions "atomic design", "design system", "component hierarchy", "reusable components", "atoms and molecules", "design tokens", or wants to decompose a complex SwiftUI view into smaller, composable parts, or needs to implement theming/customization across a SwiftUI app.

Install

npx vskill@latest install tddworks/claude-skills/swiftui-atomic-design

SKILL.md

SwiftUI Atomic Design System

Atomic Design is Brad Frost's methodology for building UI systems from small, composable pieces. In SwiftUI, this maps naturally to the framework's declarative, compositional view architecture. The hierarchy flows from simple to complex:

Design Tokens → Atoms → Molecules → Organisms → Templates → Pages

Each level composes the one below it. Design Tokens provide the visual foundation that all levels reference. The discipline is knowing where a component belongs — that's what makes the system scalable, consistent, and maintainable.

Design Tokens — The Visual Foundation

Design tokens are the centralized source of truth for all visual properties: colors, typography, spacing. They sit beneath atoms — every component references tokens rather than hardcoding values. This ensures consistency across the entire design system and makes sweeping visual changes (rebranding, dark mode, accessibility) a single-point update.

Why tokens matter:

Change a brand color once, and it propagates everywhere
Enable theming (light/dark, high contrast) without touching component code
Create a shared vocabulary between design and development
Prevent visual drift as the codebase grows

swift

// Design Tokens: Centralized visual constants
struct DesignTokens {
    struct Colors {
        static let primary = Color("PrimaryColor")
        static let secondary = Color("SecondaryColor")
        static let background = Color("BackgroundColor")
        static let surface = Color(.secondarySystemGroupedBackground)
        static let textPrimary = Color.primary
        static let textSecondary = Color.secondary
    }
 
    struct Typography {
        static let largeTitle = Font.largeTitle.weight(.bold)
        static let title = Font.title2.weight(.semibold)
        static let headline = Font.headline.weight(.medium)
        static let body = Font.body
        static let caption = Font.caption
        static let captionBold = Font.caption2.weight(.medium)
    }
 
    struct Spacing {
        static let xs: CGFloat = 4
        static let sm: CGFloat = 8
        static let md: CGFloat = 16
        static let lg: CGFloat = 24
        static let xl: CGFloat = 32
    }
 
    struct Radius {
        static let sm: CGFloat = 8
        static let md: CGFloat = 12
        static let lg: CGFloat = 16
    }
}

Common token categories: colors, typography (font families, sizes, weights), spacing (margins, padding), corner radii, shadows/elevations, animation durations, opacity values.

Theming and Customization

Tokens become powerful when combined with SwiftUI's Environment system for runtime theming. Define theme variants and inject them through the environment so every component adapts automatically.

swift

// Theme definition using tokens
struct AppTheme {
    let primaryColor: Color
    let secondaryColor: Color
    let backgroundColor: Color
    let textColor: Color
 
    static let light = AppTheme(
        primaryColor: .blue,
        secondaryColor: .gray,
        backgroundColor: .white,
        textColor: .black
    )
 
    static let dark = AppTheme(
        primaryColor: .cyan,
        secondaryColor: .gray,
        backgroundColor: .black,
        textColor: .white
    )
}
 
// Environment integration
struct AppThemeKey: EnvironmentKey {
    static let defaultValue: AppTheme = .light
}
 
extension EnvironmentValues {
    var appTheme: AppTheme {
        get { self[AppThemeKey.self] }
        set { self[AppThemeKey.self] = newValue }
    }
}
 
// Apply theme to a view hierarchy
struct ThemedModifier: ViewModifier {
    let theme: AppTheme
    func body(content: Content) -> some View {
        content.environment(\.appTheme, theme)
    }
}
 
extension View {
    func themed(_ theme: AppTheme) -> some View {
        modifier(ThemedModifier(theme: theme))
    }
}

Components read from @Environment(\.appTheme) instead of hardcoding colors, making the entire UI theme-switchable.

The Hierarchy

Atoms — Single-responsibility UI primitives

An atom is the smallest meaningful UI element. It does one thing and has no awareness of its context. Atoms reference Design Tokens for all visual properties — they never hardcode colors, fonts, or spacing.

What qualifies as an atom:

Renders a single visual concept (a badge, an icon, a divider, a label, a button)
Takes only primitive/value-type inputs (String, Color, Bool, CGFloat, enums)
Has zero business logic — purely presentational
Never reads from Environment or stores (except theme tokens)
References Design Tokens for all visual values

SwiftUI patterns for atoms:

Small structs, typically 10–30 lines
Use computed properties for style variants rather than complex switch statements in body
Proportional sizing (e.g., size * 0.5) so atoms scale naturally

swift

// Atom: Colored SF Symbol in a rounded square
struct IconBadge: View {
    let icon: String
    let color: Color
    var size: CGFloat = 28
 
    var body: some View {
        Image(systemName: icon)
            .font(.system(size: size * 0.5, weight: .medium))
            .foregroundStyle(color)
            .frame(width: size, height: size)
            .background(color.opacity(0.12))
            .clipShape(RoundedRectangle(cornerRadius: size * 0.21))
    }
}

swift

// Atom: Capsule-shaped status indicator
struct StatePill: View {
    let text: String
    let color: Color
 
    var body: some View {
        Text(text)
            .font(DesignTokens.Typography.captionBold)
            .foregroundStyle(color)
            .padding(.horizontal, DesignTokens.Spacing.sm)
            .padding(.vertical, 3)
            .background(color.opacity(0.12))
            .clipShape(Capsule())
    }
}

swift

// Atom: Reusable primary button
struct PrimaryButton: View {
    let title: String
    let action: () -> Void
 
    var body: some View {
        Button(action: action) {
            Text(title)
                .font(DesignTokens.Typography.headline)
                .foregroundColor(.white)
                .padding(.horizontal, DesignTokens.Spacing.lg)
                .padding(.vertical, DesignTokens.Spacing.md)
                .background(DesignTokens.Colors.primary)
                .clipShape(RoundedRectangle(cornerRadius: DesignTokens.Radius.sm))
        }
    }
}

swift

// Atom: Styled text with token-based typography
struct TitleText: View {
    let text: String
 
    var body: some View {
        Text(text)
            .font(DesignTokens.Typography.title)
            .foregroundStyle(DesignTokens.Colors.textPrimary)
    }
}

Common atoms: badges, pills, dividers, icon wrappers, character counters, section headers (text-only), card backgrounds, simple labels, primary/secondary buttons, text field wrappers.

Molecules — Functional combinations of atoms

A molecule combines 2–3 atoms (or atom-level elements) into a unit that serves a single user purpose. Molecules are the backbone of the design system — they create the reusable patterns that appear throughout the app. The key test: does this combination appear in multiple places?

What qualifies as a molecule:

Combines atoms into a meaningful group (icon + label + value)
Serves one user-facing function (show info, trigger action, display status)
May accept closures for actions, but doesn't manage state itself
Can accept @Binding for two-way data flow (e.g., text fields)
Can accept domain types if they simplify the API, but the view itself stays presentational

swift

// Molecule: Label-value pair for detail screens
struct InfoRow: View {
    let label: String
    let value: String
    var valueColor: Color = .primary
 
    var body: some View {
        HStack {
            Text(label)
                .font(DesignTokens.Typography.body)
                .foregroundStyle(DesignTokens.Colors.textSecondary)
            Spacer()
            Text(value)
                .font(DesignTokens.Typography.body)
                .foregroundStyle(valueColor)
        }
        .padding(DesignTokens.Spacing.md)
    }
}

swift

// Molecule: Tappable card with icon, title, and subtitle
struct QuickActionCard: View {
    let title: String
    let subtitle: String
    let icon: String
    let color: Color
    let action: () -> Void
 
    var body: some View {
        Button(action: action) {
            VStack(alignment: .leading, spacing: DesignTokens.Spacing.sm) {
                Image(systemName: icon)
                    .font(.system(size: 24))
                    .foregroundStyle(color)
 
                VStack(alignment: .leading, spacing: 2) {
                    Text(title)
                        .font(DesignTokens.Typography.headline)
                        .foregroundStyle(DesignTokens.Colors.textPrimary)
                    Text(subtitle)
                        .font(DesignTokens.Typography.caption)
                        .foregroundStyle(DesignTokens.Colors.textSecondary)
                }
            }
            .frame(maxWidth: .infinity, alignment: .leading)
            .padding(DesignTokens.Spacing.md)
            .background(DesignTokens.Colors.surface)
            .clipShape(RoundedRectangle(cornerRadius: DesignTokens.Radius.md))
        }
        .buttonStyle(.plain)
    }
}

swift

// Molecule: Search form combining label, text field, and button atoms
struct SearchBar: View {
    @Binding var query: String
    var placeholder: String = "Search..."
    var onSearch: () -> Void
 
    var body: some View {
        HStack(spacing: DesignTokens.Spacing.sm) {
            Image(systemName: "magnifyingglass")
                .foregroundStyle(DesignTokens.Colors.textSecondary)
 
            TextField(placeholder, text: $query)
                .font(DesignTokens.Typography.body)
 
            if !query.isEmpty {
                Button { query = "" } label: {
                    Image(systemName: "xmark.circle.fill")
                        .foregroundStyle(DesignTokens.Colors.textSecondary)
                }
            }
        }
        .padding(DesignTokens.Spacing.sm)
        .background(DesignTokens.Colors.surface)
        .clipShape(RoundedRectangle(cornerRadius: DesignTokens.Radius.sm))
        .onSubmit(onSearch)
    }
}

Common molecules: info rows, action buttons with labels, search bars, form fields with validation, stat cards, option/toggle rows, tip views, labeled input fields.

Organisms — Complex, self-contained UI sections

An organism is a distinct section of the interface that could stand alone. It composes multiple molecules (and atoms) into a cohesive unit. Organisms form the significant parts of your UI — login forms, navigation bars, metric dashboards. This is where you introduce @ViewBuilder content slots and section-level structure.

What qualifies as an organism:

Represents a visually distinct region (a section, a card group, a toolbar, a form)
Composes multiple molecules into a layout
May use @ViewBuilder for content injection
May read from @Environment for contextual data
Can manage local UI state (@State for expand/collapse, selection, etc.)

swift

// Organism: Collapsible content section with header
struct ContentSection<Content: View>: View {
    let title: String
    let subtitle: String?
    let icon: String
    let iconColor: Color
    @ViewBuilder let content: Content
 
    @State private var isExpanded = true

This is the start of the file. Read the full SKILL.md on GitHub.

Security

Security scanPassed, 100 of 100Pattern checks on the skill's files.
Model reviewNot runA model review is scheduled for the next rescan.

See the full security report

Quality evaluation

Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

SKILL.md in the repositoryCheckingskills/swiftui-atomic-design/SKILL.md

Popularity

Repository stars: 35
Repository forks: 6
7-day trend score: 18

Stars and forks are for the whole GitHub repository, not this skill alone. Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

Claude Code
Cursor
GitHub Copilot
Windsurf
Codex
Gemini CLI
Cline
Amp
Roo Code
Goose
Continue
Kilo Code
Junie
Trae
OpenHands
Qwen Code
AI Agent
Tabnine Chat
Sourcegraph Cody
Amazon Q
Firebase Genkit
Sweep
Devin
Phind
Mentat
Claude Desktop
Aider
GPT Pilot
Plandex
bolt.new
v0
Replit Agent
Anse
TypingMind
BetterChatGPT
LibreChat
Warp AI
Pieces
Fig AI

Embed badge

[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/tddworks/claude-skills/swiftui-atomic-design/badge)](https://verified-skill.com/skills/tddworks/claude-skills/swiftui-atomic-design)

Something wrong with this skill or its page? Tell us.