What is the benefit of the three-tier token system?

It separates raw primitive values from semantic meaning, allowing for easier theme updates and preventing hard-coded values in your UI code.

How does the skill ensure visual consistency?

By enforcing the use of predefined semantic tokens and shared layout patterns instead of custom, ad-hoc styling across the codebase.

Does this skill support accessibility features?

Yes, it is designed with WCAG AAA compliance, Dynamic Type support, and automatic respect for system 'reduce motion' settings.

Can I use this with any iOS project?

It requires the 'swift-design-system' Swift Package dependency but is compatible with any modern SwiftUI-based iOS application.

Swift UI Design System Workflow

Name: Swift UI Design System Workflow
Author: no-problem-dev

byno-problem-dev

•

Mobile Development

Implements consistent, high-quality iOS user interfaces using standardized design tokens and SwiftUI components.

This skill automates the implementation of standardized iOS UI elements by leveraging the no-problem-dev Swift Design System. It provides a structured framework for managing design tokens (colors, typography, spacing), semantic components, and layout patterns, ensuring code quality, accessibility (WCAG AAA), and visual consistency across applications while preventing the use of hard-coded magic numbers.

主な機能

01Production-ready SwiftUI components including Cards, Buttons, and Snackbars.

022 GitHub stars

03Three-tier design token system for colors, typography, and spacing.

04Built-in accessibility with WCAG AAA compliance and Dynamic Type support.

05Pre-configured layout patterns like AspectGrid and SectionCard.

06Type-safe theme management via SwiftUI Environment objects.

ユースケース

01Building a new iOS application with a consistent, professional brand identity.

02Implementing complex UI components and pickers with minimal manual boilerplate.

03Refactoring legacy SwiftUI views to use standardized semantic design tokens.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add no-problem-dev/claude-code-plugins design-system-workflow

For use in Claude.ai and ChatGPT

Download Skill