skills.rest
subroh0508
subroh0508COMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-snapshot

Detect missing Compose previews, screenshot baselines, and hard-coded design values in Kotlin UI repositories.

18|Updated Feb 14, 2020
Search Tags:#design tokens#preview#compose#roborazzi#ui inventory#konsist
One-click install
npx skills add https://github.com/subroh0508/colormaster --skill ui-snapshot
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-snapshot
Source: https://github.com/subroh0508/colormaster/tree/main/.claude/skills/ui-snapshot
Command: npx skills add https://github.com/subroh0508/colormaster --skill ui-snapshot

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams detect missing Compose previews, incomplete screenshot baselines, and hard-coded design values before they spread through the UI codebase.

Core Features & Use Cases

  • Preview Gap Detection: Scans screen Composables and identifies where @Preview coverage is missing so a follow-up plan can be created.
  • Screenshot Baseline Management: Regenerates and validates the four required mobile and desktop, light and dark Roborazzi baselines for each target screen.
  • Design Documentation Drafting: Drafts DESIGN.md and UI Inventory entries from real implementation details to keep documentation aligned with the app.
  • Tokenization Guidance: Finds hex, sp, and dp hard-coding patterns and proposes design-token refactors instead of leaving ad hoc values in code.

Quick Start

Ask the ui-snapshot skill to scan the repository for missing previews, screenshot baselines, and hard-coded UI values, then report the actions needed for plans, documentation, and token updates.

Frequently Asked Questions about ui-snapshot

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

FAQPage Schema
How do I detect missing Compose previews in my Kotlin UI repository?▼

Missing Compose previews are detected by scanning screen Composables to identify where @Preview coverage is absent, allowing you to generate a follow-up plan for adding the missing previews.

What is the best way to manage Roborazzi screenshot baselines for light and dark modes?▼

Managing Roborazzi baselines involves regenerating and validating four required mobile and desktop, light and dark baseline screenshots for each target screen to keep UI inventory synchronized.

How do I find hard-coded design values in Jetpack Compose?▼

Finding hard-coded design values requires scanning code for hex, sp, and dp patterns, which enables you to propose design-token refactors instead of leaving ad hoc values in the UI.

Do I need Konsist to validate UI coverage and generate baseline screenshots?▼

Yes, validating UI coverage and generating baseline screenshots requires Konsist, Roborazzi, JetBrains MCP, and design-token rules to detect missing previews and hard-coded values.

Can I draft UI inventory documentation directly from real implementation details?▼

Drafting UI inventory documentation aligns with the app by generating DESIGN.md entries from real implementation details, keeping documentation synchronized with the current UI codebase.

Why does hard-coding hex and dp values cause issues in a Kotlin UI codebase?▼

Hard-coding hex, sp, and dp values causes UI inconsistency by bypassing the design-token system, making it difficult to maintain and scale design changes across the application.

Related Skills

Explore More Software Engineering Skills→
santimattiussantimattius
1

compose-previews-tooling

Guide Jetpack Compose preview and performance tooling setup for accurate profiling.

Community
Intermediate
ZendevveZendevve
31

extract

Extract reusable UI components and design tokens into a design system.

Community
Advanced
jperezdelrealjperezdelreal

android-testing

Guide Android teams in implementing unit, integration, and UI testing strategies.

Community
Intermediate
hulusi-tunchulusi-tunc
3

design-token-audit

Audit design token adoption and consistency across products.

Community
Intermediate