skills.rest
moasq
moasqCOMMUNITY
Explore all skills by this author →
𝕏@foundmodGitHub

design-system

Enforce design tokens via a centralized AppTheme enum for colors, fonts, and spacing.

32|10|Updated Feb 21, 2026
Search Tags:#typography#design system#color palette#design tokens#swiftui#ui consistency#app theme
One-click install
npx skills add https://github.com/moasq/nanowave --skill design-system-moasq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/moasq/nanowave/tree/main/internal/orchestration/skills/always/design-system
Command: npx skills add https://github.com/moasq/nanowave --skill design-system-moasq

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures all visual elements in an application adhere to a unified design language, preventing inconsistencies and maintaining brand identity.

Core Features & Use Cases

  • Centralized Design Tokens: Manages colors, fonts, and spacing through a single AppTheme source of truth.
  • Enforces Best Practices: Prohibits hardcoded styling and mandates the use of design tokens for all visual properties.
  • Use Case: When developing a new feature, this Skill guides the developer to use predefined AppTheme.Colors.primary instead of .blue, and AppTheme.Spacing.md instead of 16.dp, ensuring visual consistency across the entire application.

Quick Start

Apply the design system rules to the current project's theme.

Frequently Asked Questions about design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enforce UI consistency and prevent hardcoded styling in SwiftUI?▼

You can enforce UI consistency by managing design tokens through a centralized `AppTheme` enum. This requires using predefined `AppTheme.Colors` and `AppTheme.Spacing` instead of hardcoded values to maintain visual guidelines.

What are design tokens and how do they centralize app theme management?▼

Design tokens are centralized variables for colors, fonts, and spacing managed within an `AppTheme` source of truth. They provide a single reference point for visual properties to ensure unified branding across the application.

How do I implement a centralized color palette and typography system in SwiftUI?▼

Implement a color palette and typography system by referencing the `AppTheme` enum for platform-specific color adaptations, fonts, and SF Symbols. This prevents hardcoded styling and maintains your brand identity.

Can I use SF Symbols with a centralized design system for app branding?▼

Yes, the centralized design system supports SF Symbols alongside platform-specific color adaptations. This allows you to apply unified branding and visual guidelines consistently throughout your SwiftUI application.

What is the best way to manage spacing and layout consistency without hardcoded values?▼

The best way to manage spacing consistency is by using predefined design tokens like `AppTheme.Spacing.md` instead of literal values. This ensures all visual elements adhere to a unified design language and prevents layout inconsistencies.

Related Skills

Explore More Software Engineering Skills→
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
tddworkstddworks
38

swiftui-atomic-design

Organize SwiftUI components into Atoms, Molecules, Organisms, Templates, and Pages.

Official
Intermediate
gabriellpequenogabriellpequeno
8

web-design-guidelines

Enforce external UI guideline compliance during front-end design reviews and critiques.

Community
Basic
dylantarredylantarre
38

figma

Synchronize design tokens between codebases and Figma bidirectionally via API workflows involving Tokens Studio or Variables.

Community
Intermediate