Theme adaptation checklist for light/dark mode and UI component changes. Use when modifying colors, surfaces, dialogs, or theme infrastructure. Not for simple text changes.
Theme adaptation checklist for light/dark mode and UI component changes. Use when modifying colors, surfaces, dialogs, or theme infrastructure. Not for simple text changes.
version
1.0.0
author
SublinkPro Team
user-invocable
true
Theme Check Skill
Comprehensive checklist for frontend theme adaptation changes.
When to use this skill
Use this skill when:
Modifying colors, surfaces, shadows, borders, icons, dialogs, panels, preview cards, overlays, notices, chips, rich text, or status colors
Before marking complete, the change summary must include:
Coverage statement: Which pages/modules/overlays/mobile entry points were checked
Reference patterns: Which existing repo patterns were reused
Inspection results: Which similar instances were checked but did not need changes
Mode verification: Explicit confirmation of light/dark testing method (not just screenshots)
Anti-patterns to avoid
❌ Only fixing the currently visible component
❌ Only checking desktop without mobile
❌ Only checking default state without hover/active/disabled
❌ Only updating container background without inner text/borders/icons
❌ Claiming "theme-adapted" when dialogs/mobile variants still use old semantics
When to mark as partial coverage
If you do NOT have time to check all component variants (desktop, mobile, dialog, drawer, overlay, details panel), mark the work as partial coverage rather than claiming full theme adaptation.
Exit criteria
✅ Can exit when:
All relevant checklist items are verified
Both light and dark modes tested
Desktop and mobile variants checked
All interactive states verified
Delivery summary documents coverage
❌ Cannot exit when:
Only current page fixed but same module's dialogs/overlays unverified
Container fixed but inner panels/text/icons still unreadable
Desktop fixed but mobile unchecked
Only default state checked without interactive states
