skills.rest
isamercan
isamercanCOMMUNITY
Explore all skills by this author →
𝕏@isamercanGitHub

themekit-authoring

Guides authoring and extending token-driven SwiftUI components inside the ThemeKit library.

15|1|Updated Jun 25, 2026
Search Tags:#design system#component library#design tokens#ios#swiftui#copy-on-write#style protocol
One-click install
npx skills add https://github.com/isamercan/ThemeKit --skill themekit-authoring-isamercan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: themekit-authoring
Source: https://github.com/isamercan/ThemeKit/tree/main/.claude/skills/themekit-authoring
Command: npx skills add https://github.com/isamercan/ThemeKit --skill themekit-authoring-isamercan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Contributors to the ThemeKit SwiftUI design system need to build new atoms, molecules, and organisms that stay stateless, brand-neutral, and fully token-fed, but generic SwiftUI advice (MVVM, ViewModels, hardcoded colors) conflicts with the library's house rules. This Skill encodes the exact architectural conventions so new components compose, theme, localize, and mirror RTL correctly from the start. ## Core Features & Use Cases - House rules enforcement: Six non-negotiable rules covering stateless value-type views, init-for-content plus chainable copy-on-write modifiers for appearance, and token-only colors, radius, spacing, and typography. - Copy-pasteable patterns: Reference templates in references/patterns.md for an atom with semantic style enums, a molecule with locale-aware formatting, and a style-driven organism using protocol + configuration + type erasure. - Slots and chrome styles: A canonical slot vocabulary (header, footer, leading, trailing, label, indicator) and the ChromeStyle pattern letting host design systems own paint while ThemeKit keeps behavior and accessibility. - Use Case: When asked to add a new Badge variant or build a SeatMap organism under Sources/ThemeKit/Components, the Skill produces code that reads the theme from the environment, supports Dynamic Type, localizes strings, and passes the PR checklist. ## Quick Start Ask the AI to create a new ThemeKit component, for example: "Add a Tag atom to ThemeKit with semantic styles and chainable modifiers following the library conventions."

Frequently Asked Questions about themekit-authoring

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

FAQPage Schema
How do I add a new component to a SwiftUI design system library?▼

Create a stateless value-type View with content and actions in init, then expose every appearance option as a chainable copy-on-write modifier in a public extension. Read colors, radius, spacing, and type from the theme environment instead of hardcoding values.

What is the copy-on-write modifier pattern in SwiftUI?▼

It is a pattern where each modifier mutates a copy of the struct through a single private copy(_:) function, returning Self. This keeps components immutable value types while enabling fluent chains like Badge("Sale").badgeStyle(.error).size(.small).

When should a SwiftUI component use a style protocol instead of a variant enum?▼

Use a style protocol with a Configuration struct and makeBody(configuration:) when one component needs several fundamentally different layouts. A variant enum with a large switch in body does not scale; the style pattern also lets host design systems own the chrome.

Does this approach support RTL languages and localization?▼

Yes. Components compose from HStack and VStack which mirror automatically, custom Paths get flipsForRightToLeftLayoutDirection(true), strings use String(localized:bundle:), and dates and numbers format with a captured locale rather than the device default.

When should component data move into a separate Models file?▼

Only when the data shape is a collection or graph, shared across a component family, or returned from a provider closure. A component with many independent optional scalar fields keeps them on init and modifiers rather than bundling them into a data bag.

Related Skills

Explore More Software Engineering Skills→
ItamarZand88ItamarZand88
5

design-tokens

Extract code-ready design tokens from DESIGN.md files into CSS, Tailwind, or theme objects.

Community
Intermediate
RevylAIRevylAI
502

revyl-cli-auth-bypass-ios

Enable test-only iOS auth bypass flows via deep links and Revyl launch variables.

Official
Advanced
spencerpaulyspencerpauly
672

dark-mode-testing

Detect dark mode rendering defects by comparing light and dark browser states.

Community
Intermediate
tddworkstddworks
38

swiftui-atomic-design

Organize SwiftUI components into Atoms, Molecules, Organisms, Templates, and Pages.

Official
Intermediate