skills.rest
MartinStyk
MartinStykCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

sync-design-changes

Map HTML/CSS design changes to Kotlin/Compose source files.

343|68|Updated Jun 14, 2017
Search Tags:#refactoring#android#kotlin#jetpack-compose#design-system#ui-sync
One-click install
npx skills add https://github.com/MartinStyk/AndroidApkAnalyzer --skill sync-design-changes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sync-design-changes
Source: https://github.com/MartinStyk/AndroidApkAnalyzer/tree/main/.claude/skills/sync-design-changes
Command: npx skills add https://github.com/MartinStyk/AndroidApkAnalyzer --skill sync-design-changes

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill bridges the gap between visual design tweaks made in the Claude Design project and the actual Kotlin/Compose implementation, ensuring the codebase stays perfectly aligned with the design system without manual errors.

Core Features & Use Cases

  • Design-to-Code Mapping: Provides a clear reference table to locate the exact Kotlin file corresponding to specific HTML/CSS design components.
  • Surgical Implementation: Guides the user to apply changes to specific theme tokens, typography, or UI components without wholesale file regeneration.
  • Quality Assurance: Enforces strict coding conventions, including the use of Compose wrappers and preview functions, to maintain architectural integrity.

Quick Start

Use the sync-design-changes skill to apply the latest color and typography updates from the Claude Design project to the app codebase.

Frequently Asked Questions about sync-design-changes

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

FAQPage Schema
How do I sync HTML and CSS design changes to Kotlin Jetpack Compose code?▼

Mapping HTML and CSS design modifications to specific Kotlin source files targets theme tokens, UI components, and screen layouts, ensuring the Jetpack Compose codebase stays aligned with the design system.

What is the best way to apply design system updates to an Android Kotlin app?▼

Applying design system updates via surgical implementation modifies specific theme tokens or typography in the Kotlin codebase rather than regenerating entire files, while enforcing architectural constraints like core UI library wrappers.

How do I map CSS design tokens to Kotlin source files for UI synchronization?▼

A design-to-code mapping reference table locates the exact Kotlin source files corresponding to specific HTML and CSS design components, enabling precise UI synchronization across the Android project.

Can I use this to update Jetpack Compose theme tokens without breaking architectural constraints?▼

Updating Jetpack Compose theme tokens without breaking architectural constraints requires strict adherence to coding conventions, including the use of core UI library wrappers and preview functions to maintain integrity.

Do I need to run spotless formatting after applying visual design tweaks to Compose code?▼

Executing spotless formatting is required after applying visual design tweaks to Compose code, as it enforces strict coding conventions and maintains architectural integrity across the synchronized Android codebase.

Related Skills

Explore More Software Engineering Skills→
decoutkhanqindevdecoutkhanqindev
8

kta-compose-design-tokens

Convert Figma, Stitch, and Claude Design files into Kotlin Compose design tokens.

Community
Advanced
MartinStykMartinStyk
343

create-compose-component

Create reusable Jetpack Compose components with Material3 and AppTheme previews.

Community
Intermediate
cristianbc2004cristianbc2004

Expo UI Jetpack Compose

Integrates Jetpack Compose views into Expo apps using @expo/ui/jetpack-compose.

Community
Intermediate
dantech0xffdantech0xff
4

kta-compose-design-tokens

Generate Kotlin Compose design tokens from Stitch, Figma, or Codex Design seeds.

Community
Advanced