What does this skill do, and when should you use it?
theme-system is one of 18 skills bundled in the openchamber/openchamber repository (MIT license), located at .agents/skills/theme-system/. It governs how an AI agent creates or modifies OpenChamber UI components, colors, buttons, visual states, themes, and icons: semantic theme tokens instead of hardcoded hex or generic Tailwind palette colors, reuse of the shared Button, Icon, and dropdownTriggerVariants. It also defines an animation contract (only transform and opacity) and a keyboard-navigation contract (menus must support both arrow keys and Ctrl+N/P). Task-specific reference docs on tokens, icons, and adding themes are loaded from references/ as needed.
Defines OpenChamber UI conventions: a six-level token decision tree (syntax.*, status.*, primary.*, interactive.*, surface.* and semantic utilities); a usage table for the shared Button's 7 variants and 5 sizes; a sprite-generated Icon component workflow (run bun run icons:generate when introducing a sprite name, never edit sprite.ts manually); an animation contract limited to transform/opacity, measurable via bun run profile:animation; and a requirement that menus and pickers support ArrowDown/ArrowUp alongside Ctrl+N/Ctrl+P through shared navigation logic. It loads references/tokens-and-examples.md, references/icons.md, or references/adding-themes.md depending on the task.
- A developer contributing to the OpenChamber frontend who needs to add or change component colors without introducing hardcoded values
- A contributor adding new icons or custom themes to OpenChamber who must follow the sprite-generation and theme-adding workflows
- A developer refactoring existing buttons or dropdown-style pickers who should replace ad-hoc styling with shared variants and sizes
- An engineer implementing menus or autocomplete pickers who must ensure arrow-key and Ctrl+N/P navigation coexist without breaking IME input
- A maintainer reviewing UI PRs who can use the skill's completion-criteria checklist to verify token, button, icon, and animation compliance
How do you install this skill?
- Static review only; no commands executed. All conclusions are source-read based with low confidence.
- The skill is tightly coupled to the OpenChamber repository structure (packages/ui paths, bun scripts) and is not usable outside that repo.
- Referenced files (docs/CUSTOM_THEMES.md, scripts/*.mjs) were not provided in evidence; verify their contents before use.
- Publisher identity is not verified by the FollowSkills registry; this is not negative evidence but attribution remains unconfirmed.
- No declared Chinese-language support; reachability of dependencies (opencode.ai, GitHub) from mainland-China networks was not assessed.
- Shell / CLI
- Local filesystem
Bun (bun run icons:generate, profile:animation)OpenChamber monorepo (packages/ui)
The skill already lives at .agents/skills/theme-system/ inside the openchamber/openchamber repository. For Agent Skills-compatible clients, place the skill directory (SKILL.md plus references/) into the client's skills location. The repository documents no separate install command for this sub-skill; the OpenChamber application itself installs via GitHub Releases (desktop), the VS Code Marketplace, or on Node.js 22+ via: curl -fsSL https://raw.githubusercontent.com/openchamber/openchamber/main/scripts/install.sh | bash.
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/openchamber/openchamber.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/.agents/skills/theme-system" ~/.claude/skills/
rm -rf "$tmp"Generated from the source repository and skill path; it copies only this skill's folder. If the author's install steps above differ, follow those first. To scope it to one project, replace ~/.claude/skills with that project's .claude/skills.
How do you use this skill?
Once installed, send your agent any of these to trigger it:
- add a hover state to component X
- add a new theme
Triggers automatically when a task involves creating or modifying OpenChamber UI components, styling, colors, buttons, visual states, themes, or icons (per the frontmatter description). Typical usage: ask the agent to 'add a hover state to component X' or 'add a new theme'; the skill directs it to load the matching references file first, then apply the token decision tree, Button contract, icon contract, and animation contract. Icon changes require running bun run icons:generate.
What are this skill's strengths and limitations?
- Highly specific and actionable: token decision tree, button variant/size tables, and icon workflow give concrete paths and commands
- Covers easily-missed details: IME input preservation, disabled-item skipping, compositing-only animation cost, high-contrast and long-text legibility
- Built-in completion criteria checklist supports agent self-verification and PR review
- Ties into shared component contracts (Button, Icon, dropdownTriggerVariants), effectively preventing duplicated implementations
- Tightly bound to the OpenChamber codebase: references specific packages/ui paths, bun commands, and sibling skills (locale-ui-patterns, settings-ui-patterns, performance-engineering); near-useless outside this repository
- Not a general design-system resource — only meaningful for OpenChamber UI contributors
- SKILL.md itself contains no automated test evidence; compliance relies on type-checks and visual/runtime validation whose full scripts are not shown in the source
How does this skill compare with similar options?
Side by side with related skills; every score comes from the same FSRS standard.
| Skill | FS score | Stars | Last updated | License |
|---|---|---|---|---|
| OpenChamber Theme System Skill this page | 57 · Use with care | ★ 12k | 11d ago | MIT |
| TypeUI Design Fundamentals | 70 · Strongly recommended | ★ 2k | 3mo ago | NOASSERTION |
| Impeccable | 58 · Recommended | ★ 81k | 12d ago | Apache-2.0 |
| SwiftUI Design Skill | 57 · Use with care | ★ 209 | 5mo ago | MIT |
| Design Auditor Skill | 53 · Use with care | ★ 86 | 5mo ago | — |
How did FollowSkills review this skill?
Pure coding-convention guidance with no network calls, credential access, or destructive defaults; only local scripts (type-check/lint/build) are invoked, small permission surface, transparent data flow. Deducted: helper scripts (convert/harmonize) not source-audited here, publisher unverified, no explicit rollback guidance.
Internally consistent instructions: token decision tree, Button/Icon/keyboard/animation contracts align with referenced files, and validation commands are provided. Static cap of 10 applies: referenced files (generate-icon-sprite.mjs, docs/CUSTOM_THEMES.md) not supplied, and failure-feedback quality on abnormal input is unverified.
Precise frontmatter trigger (use when creating/modifying UI components, colors, buttons, icons), clear task-based reference loading, explicit boundaries (chrome-less exceptions, performance-engineering ownership). Deducted: narrow audience (repo-internal developers), no declared Chinese support or environment-reachability notes.
Well-layered structure (SKILL.md plus task-scoped references) with key-file lists, naming rules, wrong-pattern examples, generator workflow. Deducted: no skill-level versioning/changelog, maintenance responsibility and update path not stated at skill level, some cited docs not attached.
Clear marginal value as a repo convention skill (consistent tokens, icons, keyboard contracts) with checkable completion criteria. Static cap of 7: no execution evidence that following it yields directly usable code; representative outputs unverified.
Claims trace to concrete file paths and commands; repo has test scripts and lint/type-check pipelines, but no third-party execution evidence covering this skill's key paths (theming, icon generation), hence 4.
Open a dimension to read why it scored that way
Evidence confidence：Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.
See the full review method →