Which design tokens does this skill support?

It supports a full suite of tokens including ColorPalette, SpacingScale, RadiusScale, Motion, Elevation, and Typography via the DesignSystem framework.

What preview states are included by default?

Every generated component includes five previews: Default, Dark Mode, Large Text (AccessibilityExtraLarge), Compact (minimal content), and Edge Case (long text/heavy data).

Does it work with existing iOS projects?

Yes, as long as your project has a 'DesignSystem' module or framework that provides the expected Environment keys and modifiers.

How does it handle SwiftUI accessibility?

The skill automatically adds accessibility labels, sets semantic traits, ensures container elements are correctly identified, and enforces a minimum tap target of 44x44pt.

Swift Design System Component Generator

Name: Swift Design System Component Generator
Author: no-problem-dev

byno-problem-dev

•

Mobile Development

Generates production-grade, design-system-compliant SwiftUI components with built-in support for tokens, accessibility, and comprehensive previews.

This skill automates the creation of SwiftUI components by enforcing strict adherence to a standardized design system. It streamlines the development process by generating boilerplate code that automatically integrates semantic colors, spacing scales, and typography modifiers. Beyond simple code generation, the skill ensures high-quality output by requiring accessibility labels, minimum tap targets, and five distinct preview states—including Dark Mode and Dynamic Type—to guarantee components are robust and consistent across all user environments.

主な機能

01Visual consistency enforcement through semantic typography and elevation modifiers

024 GitHub stars

03Automated integration of design tokens for colors, spacing, radius, and motion

04Mandatory generation of five preview states (Default, Dark, Large Text, Compact, Edge Case)

05Built-in accessibility compliance including 44x44pt tap targets and semantic labels

06Pre-configured SwiftUI environment access for design system properties

ユースケース

01Ensuring new UI features are fully accessible and support Dynamic Type and Dark Mode out of the box

02Standardizing existing SwiftUI views to follow token-based styling and motion patterns

03Rapidly building new reusable UI components that match a central iOS design system

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add no-problem-dev/claude-code-plugins component-gen

For use in Claude.ai and ChatGPT

Download Skill