skills.rest
decoutkhanqindev
decoutkhanqindevCOMMUNITY
Explore all skills by this author →
GitHub

kta-compose-design-tokens

Generate Kotlin Compose design tokens from Stitch, Figma, or Claude Design sources.

Updated May 31, 2026
Search Tags:#figma#design tokens#theme generation#android#kotlin#jetpack compose#material 3
One-click install
npx skills add https://github.com/decoutkhanqindev/Lich-Viet-Loc-Phat --skill kta-compose-design-tokens-decoutkhanqindev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: kta-compose-design-tokens
Source: https://github.com/decoutkhanqindev/Lich-Viet-Loc-Phat/tree/main/.claude/skills/kta-compose-design-tokens
Command: npx skills add https://github.com/decoutkhanqindev/Lich-Viet-Loc-Phat --skill kta-compose-design-tokens-decoutkhanqindev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires Pillow, and includes scripts (resource) and references (resource) components.

What problem does it solve? Converting design specs from Figma, Google Stitch, or Claude-generated design documents into a consistent, maintainable Kotlin Compose theming system is manual and error-prone. This Skill automates the extraction of colors, typography, spacing, and shapes into a three-layer token architecture (Primitive, Semantic, Component) with generated Kotlin code. ## Core Features & Use Cases - Multi-Source Token Extraction: Accepts exactly one seed source per run — Google Stitch (via MCP), Figma (via MCP or exported W3C DTCG tokens.json), or Claude Design specs/artifacts — and rejects all other inputs with clear guidance. - Three-Layer Token Architecture: Generates Primitive objects, Semantic data classes with dark/light variants, and per-Component token classes wired through CompositionLocal providers and a Material 3 bridge. - Screen Recreation Pipeline: Enumerates screens from the source, tracks build status in a tracking file, recreates each screen in order, and delegates implementation to a kta-compose-developer agent. - Validation & Auditing: Includes scripts to detect project configuration, audit token consistency, and find hardcoded values in existing Compose code. - Use Case: A developer receives a Figma file URL, invokes the skill, and gets a complete theme module with token files, P0 components (Surface, Text, Background, Buttons), recreated screens, and a token showcase screen. ## Quick Start Ask the assistant to generate Compose design tokens from your Figma file URL, Stitch project link, or Claude design spec path, then confirm which screens to implement.

Frequently Asked Questions about kta-compose-design-tokens

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

FAQPage Schema
How do I generate Compose design tokens from a Figma file?▼

Provide a Figma file URL, node ID, or an exported W3C DTCG tokens.json file. The skill fetches variables and styles via Figma MCP tools or parses the JSON with parse-figma-tokens.py, then generates Primitive, Semantic, and Component token Kotlin files.

What input sources does this design token skill accept?▼

It accepts exactly three sources: Google Stitch (project URL or MCP tools), Figma (URL, node ID, or tokens.json), and Claude Design (kta-design-spec output, HTML/SVG artifacts, or pasted design spec markdown). Any other input is rejected with instructions.

Does it work with Material 2 Compose projects?▼

No. The skill generates Material 3 tokens and includes an M2 guard: if project detection finds material3 is absent, it warns you to add the M3 dependency first and does not generate M3 code for M2 projects.

How are dark and light themes handled in generated tokens?▼

Semantic color tokens are generated as immutable data classes with separate dark and light instances, registered via staticCompositionLocalOf. The theme composable selects the variant based on isSystemInDarkTheme and bridges values to a Material 3 ColorScheme.

Can it recreate full screens from a design, not just tokens?▼

Yes. Mode I enumerates all screens from the source, lets you pick which to build, then recreates each screen in tracked order using the generated tokens, finishing with a token showcase screen and delegation to a kta-compose-developer agent.

How do I audit existing Compose code for hardcoded values?▼

Run the validate-hardcoded-values.py script against your source directory with the --fix-suggestions flag, or use audit-compose-tokens.py on your theme directory to check naming conventions, orphan primitives, and missing dark/light variants.

Related Skills

Explore More Software Engineering Skills→
oVservantoVservant

ui-designer-agent

Generate DESIGN.md specifications and design tokens from wireframes.

Community
Intermediate
niltsiarniltsiar
1

compose-screen

Implement cross-platform Compose UI screens for Android and Desktop with dual-theme support.

Community
Advanced
spencerpaulyspencerpauly
672

dark-mode-testing

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

Community
Intermediate
Bumh3rrBumh3rr

material-3-theming

Implements Material 3 theming conventions for Jetpack Compose with ColorScheme, Typography, and Shapes.

Community
Intermediate