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

themekit

Build SwiftUI interfaces with ThemeKit's token-bound components and runtime theming.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Writing SwiftUI screens with the ThemeKit design system requires knowing its token model, component APIs, and modifier conventions; this Skill gives an AI agent the rules and references to generate correct, token-bound ThemeKit code instead of hardcoded colors or wrong init arguments. ## Core Features & Use Cases - Token-bound UI generation: Enforces golden rules such as never hardcoding colors, reading the theme via @Environment(.theme), and styling through chainable modifiers rather than init arguments. - Component reference: A catalog of 247 public SwiftUI components (atoms, molecules, organisms) with init parameters and modifier lists in references/components.md. - Runtime theming: Apply generated palettes from a single accent hex, full ThemeConfig values, or 34 bundled presets, including per-subtree theme injection and a ThemePicker grid. - Use Case: Ask the agent to build a themed sign-up form; it produces a Card containing TextInput, Checkbox, and PrimaryButton wired to theme tokens, with .disabled() and .controlSize() used natively. ## Quick Start Ask the agent to build a SwiftUI screen with ThemeKit, for example a themed login form using TextInput, PrimaryButton, and theme tokens.

Frequently Asked Questions about themekit

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

FAQPage Schema
How do I use ThemeKit components in a SwiftUI app?▼

Import ThemeKit, inject the theme once at the root with .environment(Theme.shared), then read it in views via @Environment(\.theme). Compose screens with components like Card, TextInput, and PrimaryButton, setting variants and sizes through chainable modifiers.

How do I change the app theme at runtime in SwiftUI?▼

Call Theme.shared.applyGenerated(primaryHex:) to recolor the whole app from one accent, or apply a full ThemeConfig. You can also apply one of 34 presets with ThemePreset.named("dracula")?.apply() or show a ThemePicker grid.

Can I theme only one part of the SwiftUI view tree?▼

Yes. Create a separate Theme instance, configure it (for example ocean.applyGenerated(primaryHex:)), and inject it into a single subtree with the .theme(_:) modifier. The rest of the app keeps using Theme.shared.

Why should I avoid hardcoded colors in ThemeKit views?▼

Hardcoded colors like .foregroundStyle(.blue) break re-skinning because ThemeKit resolves every color from tokens at runtime. Use theme.text(.textPrimary), theme.background(.bgWhite), or a SemanticColor so the UI follows the active theme.

How do I add my own brand colors to ThemeKit?▼

Register app-owned tokens once with Theme.shared.registerCustomTokens(_:) under the reserved custom. namespace, then read them via theme.custom.color(.yourName) with a built-in token as fallback. Do not fork the library for a single brand value.

What platforms and Swift version does ThemeKit support?▼

ThemeKit targets iOS 17 and macOS 14 with Swift 6.2, and has zero core dependencies. Components are native SwiftUI views that read the theme from the environment.

Related Skills

Explore More Software Engineering Skills→
AradotsoAradotso
3

figma-design-md-generator

Generate DESIGN.md and SKILL.md from Figma design tokens and component families.

Official
Intermediate
moolah-rocksmoolah-rocks
1

reviewing-ui-with-preview

Iterates on SwiftUI views by rendering Xcode previews to PNG snapshots via the Xcode MCP.

Official
Advanced
ThanapatJuthaThanapatJutha

design-tokens

Synchronize design tokens between Figma variables and local theme files.

Community
Advanced
videojsvideojs
931

migrate-css-to-tailwind

Migrate CSS, SCSS, and styled-components to Tailwind v4 utilities and theme tokens.

Official
Intermediate