component-gen

Generate SwiftUI component code with design system tokens and preview configurations.

5|Updated Nov 29, 2025
One-click install
npx skills add https://github.com/no-problem-dev/claude-code-plugins --skill component-gen-no-problem-dev
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: component-gen
Source: https://github.com/no-problem-dev/claude-code-plugins/tree/main/plugins/swift-design-system/skills/component-gen
Command: npx skills add https://github.com/no-problem-dev/claude-code-plugins --skill component-gen-no-problem-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the creation of new SwiftUI UI components, ensuring they adhere to the established Swift Design System by leveraging design tokens.

Core Features & Use Cases

  • Boilerplate Generation: Creates the basic structure for a new SwiftUI View conforming to design system standards.
  • Token Integration: Automatically incorporates environment-injected design tokens (colors, spacing, typography, etc.).
  • Accessibility & Preview: Includes essential accessibility modifiers and robust preview configurations.
  • Use Case: When a designer requests a new button variant, use this skill to quickly generate the SwiftUI code, ensuring it matches the system's spacing, color, and typography.

Quick Start

Use the component-gen skill to create a new SwiftUI component named 'UserProfileCard'.

Frequently Asked Questions about component-gen

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

FAQPage Schema
How do I generate SwiftUI components that automatically use my design system tokens?

SwiftUI component generation from design tokens creates boilerplate UI code that automatically incorporates environment-injected variables for colors, spacing, and typography. This ensures new UI elements maintain consistency and adhere to established design system standards.

What is the best way to create SwiftUI views that conform to a design system?

Creating conforming SwiftUI views is best achieved by automating component generation to produce boilerplate code with built-in token integration. This provides the basic structure while ensuring standard accessibility modifiers and preview configurations are included automatically.

Can I include accessibility modifiers and preview configurations when generating SwiftUI code?

Yes, generating SwiftUI code with this method includes essential accessibility modifiers and robust preview configurations by default. This ensures the generated UI components are testable and accessible immediately without requiring manual setup.

Does SwiftUI component generation work for creating specific UI elements like a button variant?

Yes, SwiftUI component generation works for creating specific UI elements like a new button variant. It quickly generates the necessary code, ensuring the new element matches the design system's spacing, color, and typography requirements automatically.

Why does my new SwiftUI component break the visual consistency of my design system?

Your new SwiftUI component breaks visual consistency because it likely lacks proper design token integration. By automating component generation with environment-injected tokens for spacing and typography, you ensure maintainability and strict adherence to the design system.