skills.rest
artosetrov
artosetrovCOMMUNITY
Explore all skills by this author →
GitHub

ds-extract-component

Extract inline SwiftUI patterns into reusable components and matching Figma DS components.

Updated Mar 5, 2026
Search Tags:#figma#component#swift#refactor#design-system#ui-patterns
One-click install
npx skills add https://github.com/artosetrov/iron-fist-arena-backend --skill ds-extract-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ds-extract-component
Source: https://github.com/artosetrov/iron-fist-arena-backend/tree/main/.claude/skills/ds-extract-component
Command: npx skills add https://github.com/artosetrov/iron-fist-arena-backend --skill ds-extract-component

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

DS Extract Component helps teams convert inline Swift UI patterns into reusable components, promoting consistency and reducing duplication across the codebase and design system.

Core Features & Use Cases

  • Turn ad-hoc UI fragments into reusable SwiftUI components that can be reused across screens.
  • Create matching Figma DS components with tokens aligned to the design system.
  • Use Case: When you find the same UI pattern repeated in 2+ places, or when building a new molecule/atom in the DS, run this skill to extract it into a component and sync with Figma.

Quick Start

Refactor an inline Swift UI pattern into a reusable component and generate its matching Figma DS component.

Frequently Asked Questions about ds-extract-component

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

FAQPage Schema
How do I extract repeated SwiftUI patterns into reusable components?▼

You extract inline SwiftUI patterns by refactoring repeated UI fragments across multiple views into a single reusable component, which simultaneously generates a matching Figma DS component aligned with your design-system tokens.

What is the best way to sync SwiftUI components with Figma design system tokens?▼

Syncing SwiftUI components with Figma design system tokens involves enforcing a zero-hardcoded-values policy during refactoring, ensuring token-backed colors, spacing, and typography align directly with the generated Figma DS components.

Do I need existing design-system tokens to refactor SwiftUI code?▼

Yes, you need existing design-system tokens and styles to refactor SwiftUI code, because the extraction process enforces a zero-hardcoded-values policy and requires token-backed colors, spacing, and typography.

When should I extract a SwiftUI UI pattern into a design system component?▼

You should extract a SwiftUI UI pattern into a design system component when you find the same pattern repeated in 2 or more places across views, or when building a new molecule or atom in the design system.

Can I use this to create Figma components from code with zero hardcoded values?▼

Yes, you can create Figma DS components from code with zero hardcoded values, as the extraction process enforces a zero-hardcoded-values policy and generates matching Figma components backed by your design-system tokens.

Related Skills

Explore More Design & Creative Skills→
d0d012d0d012
9

figma-design

Extract tokens, styles, and constraints from Figma design files.

Community
Advanced
mayzhangminmayzhangmin

bee-ds-live-lookup

Retrieve live Bee-DS components, tokens, and icons via Figma MCP.

Community
Advanced
terzigoluterzigolu
37

figma-generate-design

Translate code-based UI layouts into Figma screens using design-system tokens.

Community
Intermediate
yahya-azeemyahya-azeem

extract

Extract reusable UI components, design tokens, and layout patterns into a design system.

Community
Advanced