Custom Wisp Theme

Custom Wisp Theme is a Frontend skill for Claude Code, published by xuzhougeng in wisp-science.

1K stars106 forkson xuzhougeng/wisp-scienceAdded 2026/08/21+1% in starsRepository updated 2026/08/21

agent-skillsai-agentai-assistantai-for-scienceai4sciencebioinformaticscomputational-biologydesktop-appllmlocal-firstmcpmodel-context-protocolpythonreproducible-researchresearch-assistantrstatsrustscientific-computingscientific-workflowtauri

Install in seconds

Install Custom Wisp Theme

Copy Custom Wisp Theme into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.

terminal

npx degit https://github.com/xuzhougeng/wisp-science/tree/main/skills/custom-theme ~/.claude/skills/custom-theme

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/xuzhougeng/wisp-science.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file: skills/custom-theme/SKILL.md in xuzhougeng/wisp-science
Installs to: ~/.claude/skills/custom-theme
Collection: One of 25 skills cataloged from this repository
Category: Frontend — 567 skills

What Custom Wisp Theme does

Custom Wisp Theme writes CSS for Wisp’s injected stylesheet using documented tokens and sanitization limits. Use it to change chat spacing, colors, fonts, table sizes, or hide the paragraph lead bar.

Custom Wisp Theme is cataloged under Frontend on DirSkills. Custom Wisp Theme comes from a repository tagged agent-skills, ai-agent, ai-assistant, ai-for-science and ai4science.

Documentation

README

Excerpt

Custom Wisp theme CSS

Wisp injects one user stylesheet after the built-in theme. Prefer CSS variables on :root. Do not invent Settings toggles for one-off look changes.

Workflow

Ask what should change (lead bar, table size, accent, chat density, fonts).
Write a .css file in the project, usually theme.css.
Apply it:
- Desktop: configure with action=set and values.custom_css set to the full stylesheet text. Empty string clears it.
- Or tell the user to import the file under Settings → Appearance.
Confirm the change is visible. If a rule did nothing, the selector is wrong; do not add !important unless a built-in rule requires it.

Constraints

The host sanitizes CSS before inject. These are stripped:

This is the opening of the README. Read the full README on GitHub.

Frequently asked about Custom Wisp Theme

What else does xuzhougeng publish alongside Custom Wisp Theme?
Custom Wisp Theme is one of 25 skills that DirSkills catalogs from xuzhougeng/wisp-science, the repository it ships in. Its siblings there include Agent Infini, Bear Counter and Bear Map. Each one is a separate skill with its own page in this directory, installs the same way Custom Wisp Theme does, and is maintained by xuzhougeng in that same repository. The rest of the collection is listed on the xuzhougeng/wisp-science page.
How does Custom Wisp Theme compare to other Frontend skills?
Custom Wisp Theme ranks #324 by stars among the 567 Frontend skills in this catalog. The most-starred ones next to it are Angular Developer, Android Clean Architecture and Accessibility. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Custom Wisp Theme against them. Open each page to compare what they document and how they install.