New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Theme Adaptation Checklist

by ZeroDeng01 in ZeroDeng01/sublinkPro

A checklist for UI changes that touch colors, surfaces or theme code, making sure light and dark modes, devices, states and layering all still work.

MITAuto-check passedFrontend & Design

Install Theme Adaptation Checklist

skills CLI
$ npx skills add ZeroDeng01/sublinkPro --skill theme-check -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install ZeroDeng01/sublinkPro theme-check --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/ZeroDeng01/sublinkPro.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/theme-check .claude/skills/theme-check && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
theme-check
GitHub stars
1.7k
Token cost
~1.4k tokens
SKILL.md length
550 words
Files
1
Skills in repo
8
Repo updated
First seen
Licence
MIT

At a glance

A checklist for UI changes that touch colors, surfaces or theme code, making sure light and dark modes, devices, states and layering all still work.

  • Works in 10 steps: Mode Coverage → Device Coverage → Component Structure Coverage → …
  • Changing colors or surfaces in a light and dark mode UI
  • SKILL.md covers When to use this skill, Prerequisites, Checklist and Delivery Requirements, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

The checklist applies when you modify colors, surfaces, shadows, borders, icons, dialogs, panels, overlays or status colors, change theme infrastructure such as the theme files and color utilities, or update shared style helpers. Before starting, the agent reads the project's frontend theme guidelines, works out the blast radius from a single page to the theme layer, and finds reference patterns in existing component clusters.

Checks cover mode coverage with the real theme toggle rather than screenshots, desktop and mobile views including responsive breakpoints, fullscreen mobile dialogs and safe areas, every container type such as dialogs, drawers, popovers, menus and tooltips, text hierarchy and state colors, and interactive states from hover to disabled. Surface layering rules require paper and default backgrounds, no white-on-white stacking, dividers or alpha borders, and no hardcoded white or black on large surfaces. Rich content and form controls get their own checks.

When your agent uses it

  • Changing colors or surfaces in a light and dark mode UI
  • Editing shared theme helpers or dialog and card styles
  • Reviewing a pull request for theme regressions

Example prompts

  • “Run the theme check on my new settings dialog in both light and dark mode.”
  • “I changed the shared card styles, so list every component that needs rechecking.”
  • “Review this PR for hardcoded white and black backgrounds.”

Requirements

  • The project's docs/frontend-theme-guidelines.md

Workflow steps

10 steps, taken from the step headings in SKILL.md.

  1. Mode Coverage
  2. Device Coverage
  3. Component Structure Coverage
  4. Text Hierarchy
  5. Interactive States
  6. Surface Layering
  7. Component-Specific Checks
  8. Mobile-Specific
  9. Code Quality
  10. Reference Patterns Used

What it can do on your machine

Read from SKILL.md and the folder at commit d9d9e5a. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Theme Adaptation Checklist loads about 1.4k tokens when it runs. Until then it costs about 46 tokens; SKILL.md has 550 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~46
When it runs · the whole SKILL.md, loaded when a task matches
~1.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from ZeroDeng01/sublinkPro at commit d9d9e5a, republished under its MIT licence (© ZeroDeng01). 550 words, ~1,379 tokens.

Download SKILL.mdSave it as .claude/skills/theme-check/SKILL.md (or your agent's skills folder).
name
theme-check
description
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
  • Changing theme infrastructure (webs/src/themes/*, webs/src/utils/colorUtils.js)
  • Updating shared sx helpers or common dialog/card/panel styles
  • Working on any UI component that affects light/dark mode presentation

Prerequisites

Before running this checklist:

  1. Read docs/frontend-theme-guidelines.md for complete theme rules
  2. Identify the blast radius: page, module, shared component, or theme infrastructure
  3. Find reference patterns in the codebase (NodePreview*, Chain*, Airport* clusters)

Checklist

1. Mode Coverage
  • Checked both light and dark modes (not just visual validation in current mode)
  • Verified with actual theme toggle, not just screenshots
2. Device Coverage
  • Checked desktop view
  • Checked mobile view
  • Verified responsive breakpoints (useMediaQuery)
  • Tested fullscreen dialogs on mobile
  • Checked safe-area handling
3. Component Structure Coverage
  • Page body
  • Dialogs (Dialog component)
  • Drawers (Drawer component)
  • Popovers (Popover component)
  • Menus (Menu component)
  • Tooltips (Tooltip component)
  • Preview cards
  • Detail panels
  • Footer overlays
  • Empty states
  • Skeletons
  • Notification/overlay entry points
4. Text Hierarchy
  • Primary text (text.primary)
  • Secondary text (text.secondary)
  • Icons
  • Chips
  • Badges
  • Links
  • Code blocks (code, pre)
  • Placeholders
  • Helper text
  • Disabled copy
  • State colors (success/warning/error/info)
5. Interactive States
  • Default state
  • Hover state
  • Active/selected state
  • Disabled state
  • Focus-visible state
  • Expanded/collapsed state
6. Surface Layering
  • Outer containers use background.paper
  • Nested panels use background.default or tinted surfaces
  • No white-on-white layering
  • Borders use divider or alpha()/withAlpha()
  • No hardcoded #fff, white, #000, black for large surfaces
7. Component-Specific Checks
Rich Content
  • ReactMarkdown content
  • Code blocks
  • List markers
  • Tables
  • Footer overlays
Form Controls
  • DataGrid
  • Autocomplete (including popups)
  • Select (including dropdowns)
  • ToggleButtonGroup
  • Tabs
  • Search bars
  • Filter bars
  • Focused states
8. Mobile-Specific
  • Responsive collapsed layouts
  • Sticky footers
  • Horizontal scrolling areas
  • Tap target sizes
  • Icon button visibility
  • Bottom action bars
  • Safe-area padding
9. Code Quality
  • No isDark ? ... : ... magic numbers scattered in JSX
  • Used semantic variables (dialogSurface, mutedPanelSurface, etc.)
  • Reused existing helpers or created focused helper (not copy-paste)
  • No new dark-mode magic numbers in multiple files
Show full SKILL.md (220 more words)Show less
10. Reference Patterns Used

Document which existing patterns were followed:

  • NodePreview cluster (NodePreviewDialog.jsx, NodePreviewCard.jsx, NodePreviewDetailsPanel.jsx)
  • Chain proxy cluster (ChainProxyDialog.jsx, ChainPreviewDialog.jsx, MobileChainBuilder.jsx, ConditionBuilder.jsx)
  • Common UI (layout/MainLayout/Header/NotificationSection/index.jsx, views/dashboard/Default/index.jsx)
  • Airport management cluster (views/airports/index.jsx, AirportMobileList.jsx, AirportFormDialog.jsx, AirportBatchEditDialog.jsx, components/CronExpressionGenerator.jsx)

Delivery Requirements

Before marking complete, the change summary must include:

  1. Coverage statement: Which pages/modules/overlays/mobile entry points were checked
  2. Reference patterns: Which existing repo patterns were reused
  3. Inspection results: Which similar instances were checked but did not need changes
  4. 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

© ZeroDeng01, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/theme-check of ZeroDeng01/sublinkPro.

Open the folder on GitHubat commit d9d9e5a

Compare with similar skills

Theme Adaptation Checklist next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Theme Adaptation Checklist compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Theme Adaptation Checklist this skillZeroDeng01/sublinkPro1.7k—~1.4kAutomated safety check: PassMIT
Tailwind CSS Patternsever-works/ever-works1583 repos~1.6kAutomated safety check: NotesAGPL-3.0
Shadcn Tailwind UILiarMTTT/TavernWeave150—~1.7kAutomated safety check: PassCustom licence
Frontend Designseb1n/awesome-ai-agent-skills206—~2.3kAutomated safety check: PassMIT
UI StylingOhh-889/skyroc79513 repos~2.5kAutomated safety check: PassMIT
UI UX Pro Maxsaoudi-h/solar-icons18418 repos~11kAutomated safety check: NotesCustom licence

Similar skills

  • Tailwind CSS Patterns

    ever-works/ever-works

    Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices.

    158 GitHub starsUsed in 3 repos~1.6k tokens
    Frontend & DesignAuto-check: notes

  • Shadcn Tailwind UI

    LiarMTTT/TavernWeave

    Build, restyle, or review accessible React interfaces that use shadcn/ui, Radix UI primitives, and Tailwind CSS.

    150 GitHub stars~1.7k tokensUpdated 3 days ago
    Frontend & DesignAuto-check passed

  • Frontend Design

    seb1n/awesome-ai-agent-skills

    Design and build production-ready frontend interfaces with design systems, responsive layouts, accessible components, and dark mode support.

    206 GitHub stars~2.3k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

  • UI Styling

    Ohh-889/skyroc

    Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.

    795 GitHub starsUsed in 13 repos~2.5k tokens
    Frontend & DesignAuto-check passed

  • UI UX Pro Max

    saoudi-h/solar-icons

    UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.

    184 GitHub starsUsed in 18 repos~11k tokens
    Frontend & DesignAuto-check: notes

  • Ask Sonner

    leepokai/Codync

    Guide to Sonner, the React toast library — install and wire up the Toaster, pick the right toast() call, promise and loading toasts, updating, dismissing and persisting toasts, styling, theming and…

    177 GitHub starsUsed in 4 repos~1.8k tokens
    Frontend & DesignAuto-check: warnings

More from ZeroDeng01/sublinkPro

All 8 skills in this repo

  • Performance Check

    ZeroDeng01/sublinkPro

    Checklist for reviewing code changes that touch queries, APIs, rendering, caching or algorithms for performance, scalability and resource-usage problems.

    1.7k GitHub stars~1.8k tokensUpdated today
    Auto-check passed

  • Security Review Checklist

    ZeroDeng01/sublinkPro

    Checklist-driven security review for changes to authentication, authorization, MFA, secrets, input validation and other security-critical code.

    1.7k GitHub stars~2.3k tokensUpdated today
    Auto-check passed

  • SublinkPro Manager

    ZeroDeng01/sublinkPro

    Manages a SublinkPro proxy subscription server through natural language, adding nodes, building subscriptions and share links, and editing templates and tags.

    1.7k GitHub stars~7.2k tokensUpdated today
    Auto-check passed

  • Post-Development Workflow

    ZeroDeng01/sublinkPro

    A required checklist for after code changes: validate each changed layer, check that docs and other layers stay in sync, and test before committing or opening a PR.

    1.7k GitHub stars~4.4k tokensUpdated today
    Auto-check passed

  • Documentation Sync Check

    ZeroDeng01/sublinkPro

    Checklist for keeping README, feature, configuration, install and API docs in step with code changes in the same PR, including the Chinese copies.

    1.7k GitHub stars~2.6k tokensUpdated today
    Auto-check passed

  • Pre-Commit Check Gate

    ZeroDeng01/sublinkPro

    Blocking checklist that runs formatting, lint and test commands for changed Go and frontend files before any git add, commit or pull request.

    1.7k GitHub stars~2.9k tokensUpdated today
    Auto-check: notes

Works with

Categories

Questions about Theme Adaptation Checklist

What does Theme Adaptation Checklist do?

A checklist for UI changes that touch colors, surfaces or theme code, making sure light and dark modes, devices, states and layering all still work. The checklist applies when you modify colors, surfaces, shadows, borders, icons, dialogs, panels, overlays or status colors, change theme infrastructure such as the theme files and color utilities, or update shared style helpers. Before starting, the agent reads the project's frontend theme guidelines, works out the blast radius from a single page to the theme layer, and finds reference patterns in existing component clusters.

When should I use Theme Adaptation Checklist?

Theme Adaptation Checklist fits situations like: changing colors or surfaces in a light and dark mode UI; editing shared theme helpers or dialog and card styles; reviewing a pull request for theme regressions.

How do I install Theme Adaptation Checklist in Claude Code?

Run `npx skills add ZeroDeng01/sublinkPro --skill theme-check -a claude-code`. Or copy the skill folder (.agents/skills/theme-check in ZeroDeng01/sublinkPro) into .claude/skills/theme-check in your project. Claude Code loads it when a task matches its description.

How do I install Theme Adaptation Checklist in Codex?

Run `npx skills add ZeroDeng01/sublinkPro --skill theme-check -a codex`. Or copy the skill folder (.agents/skills/theme-check in ZeroDeng01/sublinkPro) into .agents/skills/theme-check in your project. Codex loads it when a task matches its description.

Can I use Theme Adaptation Checklist in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add ZeroDeng01/sublinkPro --skill theme-check -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/theme-check, .gemini/skills/theme-check, .github/skills/theme-check and .opencode/skills/theme-check in your project.

What does Theme Adaptation Checklist need to run?

SKILL.md names no scripts, command-line tools or credentials: Theme Adaptation Checklist is instructions for the agent only. Our summary lists: The project's docs/frontend-theme-guidelines.md.

Does Theme Adaptation Checklist access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Theme Adaptation Checklist safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Theme Adaptation Checklist use?

Theme Adaptation Checklist is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Theme Adaptation Checklist use?

About 1.4k tokens (SKILL.md is roughly 5.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Theme Adaptation Checklist?

Skills that share tags, products or a category with Theme Adaptation Checklist: Tailwind CSS Patterns (ever-works/ever-works, 158 stars), Shadcn Tailwind UI (LiarMTTT/TavernWeave, 150 stars), Frontend Design (seb1n/awesome-ai-agent-skills, 206 stars) and UI Styling (Ohh-889/skyroc, 795 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Theme Adaptation Checklist?

ZeroDeng01 (a GitHub user) maintains it in ZeroDeng01/sublinkPro, which has 1,666 GitHub stars. The repository holds 8 skills in this directory. The repository was last updated on October 8, 2026.

Source: ZeroDeng01/sublinkPro on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.