What is ios-components?

This Claude skill streamlines the SwiftUI development process by automating the creation of modular, reusable UI components and design systems. It bridges the gap between design and implementation, allowing developers to generate production-ready code from Figma mockups or design images while strictly adhering to project-specific style guides and architectural patterns.

When should I use ios-components?

ios-components is useful in the following scenarios: • Design-to-Code Conversion: Rapidly transform UI design images or Figma specifications into functional SwiftUI views, including buttons, cards, and complex layouts. • Design System Management: Establish and maintain a centralized design system by generating standardized style files for colors, typography, and spacing tokens. • Reusable Component Library: Build a structured library of UI elements such as custom inputs, modals, and navigation components that follow a consistent project format. • State-Driven UI Implementation: Quickly develop essential feedback views including loading indicators, empty states, skeleton placeholders, and error views with retry logic. • Refactoring and Styling: Update existing views to match new design requirements by applying custom modifiers and standardized design tokens.

name	ios-components
description	Create UI components for SwiftUI. Use when creating buttons, cards, input fields, modals, bottom sheets, loading views, empty states, creating components from design images, coding UI from Figma, making custom views, creating reusable views.
allowed-tools	Read, Grep, Glob, Bash

SwiftUI Reusable Components

1. Workflow ......................... L15-L50
2. Component Locations ... L52-L80
3. Design Integration ..... L82-L130
4. Style Files ................... L132-L180
5. Checklist ....................... L182-L200

1. Workflow

Step 1: Read Standard Format File

ALWAYS read this file before creating components:

Shared/COMPONENT_FORMAT.md

This file contains code format, style guide, and project rules.

Step 2: Reference Existing Components

Shared/Components/     # View existing components
Shared/Styles/         # View design tokens
Shared/Modifiers/      # View custom modifiers

Step 3: Create File in Correct Folder

Follow the component locations table below.

Step 4: Implement Component

Use design tokens from Shared/Styles/
Follow format from COMPONENT_FORMAT.md
Add Preview

2. Component Locations

Type	Location
Button	`Shared/Components/Buttons/`
Input	`Shared/Components/Inputs/`
Card	`Shared/Components/Cards/`
Modal	`Shared/Components/Modals/`
Layout	`Shared/Components/Layouts/`
Feedback	`Shared/Components/Feedback/`
Navigation	`Shared/Components/Navigation/`

Feedback Components

Component	Purpose
`LoadingView.swift`	Loading indicator
`EmptyStateView.swift`	Empty state with message + CTA
`ErrorView.swift`	Error state with retry
`SkeletonView.swift`	Skeleton loading placeholder
`ToastView.swift`	Toast notifications

3. Design Integration

When User Sends UI Design Image

Analyze the image to understand:
- UI style (rounded, sharp, gradient, flat...)
- Color scheme
- Typography style
- Spacing pattern
- Shadow/elevation style
Update or create Shared/COMPONENT_FORMAT.md with:
- Code template for components
- Style rules extracted from design
- Specific examples
Update Shared/Styles/ if needed:
- AppColors.swift
- AppFonts.swift
- AppSpacing.swift

COMPONENT_FORMAT.md

This is the most important file - contains project's standard format. If it doesn't exist, create it when user sends first design image. If it exists, read and follow it.

File contents include:

Code template for struct View
Naming conventions
Style conventions (corner radius, shadows, colors...)
Example component

4. Style Files

AppColors.swift

import SwiftUI

extension Color {
    // Primary Colors
    static let primary = Color(hex: "#007AFF")
    static let secondary = Color(hex: "#5856D6")
    
    // Semantic Colors
    static let success = Color(hex: "#34C759")
    static let warning = Color(hex: "#FF9500")
    static let error = Color(hex: "#FF3B30")
    
    // Neutral Colors
    static let textPrimary = Color(hex: "#000000")
    static let textSecondary = Color(hex: "#8E8E93")
    static let background = Color(hex: "#FFFFFF")
}

AppFonts.swift

import SwiftUI

extension Font {
    // Headings
    static let h1 = Font.system(size: 34, weight: .bold)
    static let h2 = Font.system(size: 28, weight: .bold)
    static let h3 = Font.system(size: 22, weight: .semibold)
    
    // Body
    static let bodyRegular = Font.system(size: 17, weight: .regular)
    static let bodyBold = Font.system(size: 17, weight: .semibold)
    
    // Small
    static let caption = Font.system(size: 13, weight: .regular)
    static let footnote = Font.system(size: 11, weight: .regular)
}

AppSpacing.swift

import SwiftUI

enum 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
    static let xxl: CGFloat = 48
}

5. Checklist

Before creating component:

Read Shared/COMPONENT_FORMAT.md
Check existing components in Shared/Components/
Identify design tokens needed

When creating component:

Use design tokens from Shared/Styles/
Create file in correct folder by type
Follow format from COMPONENT_FORMAT.md
Make component configurable via parameters
Add Preview

After creating component:

Test in Preview
Test with different data
Test dark mode if applicable
Document usage if complex

ios-components

When & Why to Use This Skill

Use Cases