New: 97,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

Change Theme

by pagezero-dev in pagezero-dev/pagezero

Updates the shadcn/ui theme by editing OKLCH CSS custom properties in apps/core/styles/tailwind.css.

MITAuto-check passedFrontend & Design

Install Change Theme

skills CLI
$ npx skills add pagezero-dev/pagezero --skill change-theme -a claude-code

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

GitHub CLI
$ gh skill install pagezero-dev/pagezero change-theme --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/pagezero-dev/pagezero.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/change-theme .claude/skills/change-theme && 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
change-theme
GitHub stars
143
Token cost
~805 tokens
SKILL.md length
260 words
Files
1
Skills in repo
5
Repo updated
First seen
Licence
MIT

At a glance

Updates the shadcn/ui theme by editing OKLCH CSS custom properties in apps/core/styles/tailwind.css.

  • Works in 3 steps: root - Light mode colors (lines 73-106) → .dark - Dark mode colors (lines 110-142) → @theme inline - Tailwind color mappings…
  • The user wants to change colors
  • SKILL.md covers Gather Information, Theme File Location, Theme Structure and Available Color Variables, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Change Theme is an agent skill from pagezero-dev/pagezero. Updates the shadcn/ui theme by editing OKLCH CSS custom properties in apps/core/styles/tailwind.css. Use when the user wants to change colors, theme appearance, or match a brand palette.

Its SKILL.md is about 810 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design. It works with Tailwind CSS and shadcn/ui. The repository describes itself as: Open source, Cloudflare-native web app starter for the AI era. The licence is MIT.

When your agent uses it

  • The user wants to change colors
  • Theme appearance
  • Match a brand palette

Example prompts

  • “Use the change-theme skill to update the shadcn/ui theme by editing OKLCH CSS custom properties in apps/core/styles/tailwind.css”
  • “/change-theme”

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. root - Light mode colors (lines 73-106)
  2. .dark - Dark mode colors (lines 110-142)
  3. @theme inline - Tailwind color mappings (lines 33-69)

What it can do on your machine

Read from SKILL.md and the folder at commit 5619f1b. 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

    Links to these hosts (documentation or services it may open):

    • oklch.com

    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

Change Theme loads about 805 tokens when it runs. Until then it costs about 50 tokens; SKILL.md has 260 words of instructions outside code blocks.

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

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 pagezero-dev/pagezero at commit 5619f1b, republished under its MIT licence (© pagezero-dev). 260 words, ~805 tokens.

Download SKILL.mdSave it as .claude/skills/change-theme/SKILL.md (or your agent's skills folder).
name
change-theme
description
Updates the shadcn/ui theme by editing OKLCH CSS custom properties in apps/core/styles/tailwind.css. Use when the user wants to change colors, theme appearance, or match a brand palette.
disable-model-invocation
true

Change Theme

Modify the shadcn/ui theme by updating CSS custom properties in apps/core/styles/tailwind.css.

Gather Information

Ask the user in a single question:

What theme style would you like? (e.g., "blue primary color", "warm and rounded", "minimal with sharp corners", or a specific hex color to match)

Theme File Location

The theme is defined in apps/core/styles/tailwind.css with CSS custom properties using the OKLCH color space.

Theme Structure

The file contains three main sections:

  1. :root - Light mode colors (lines 73-106)
  2. .dark - Dark mode colors (lines 110-142)
  3. @theme inline - Tailwind color mappings (lines 33-69)

Available Color Variables

VariablePurpose
--backgroundPage background
--foregroundDefault text color
--cardCard backgrounds
--card-foregroundCard text
--popoverPopover/dropdown backgrounds
--popover-foregroundPopover text
--primaryPrimary brand color (buttons, links)
--primary-foregroundText on primary color
--secondarySecondary actions
--secondary-foregroundText on secondary
--mutedMuted backgrounds
--muted-foregroundMuted/subtle text
--accentAccent highlights
--accent-foregroundText on accent
--destructiveError/danger states
--borderBorder colors
--inputInput field borders
--ringFocus ring color
--radiusBorder radius base value
--chart-1 to --chart-5Chart colors
--sidebar-*Sidebar-specific colors

Color Format

Colors use OKLCH format: oklch(lightness chroma hue)

  • Lightness: 0 (black) to 1 (white)
  • Chroma: 0 (gray) to ~0.4 (vivid)
  • Hue: 0-360 degrees (red=0, green=142, blue=264, etc.)

Instructions

When the user requests a theme change:

  1. Identify which color variables need to change
  2. Update values in both :root (light) and .dark sections
  3. Ensure sufficient contrast between foreground/background pairs
  4. Keep the OKLCH format for consistency

Tips

  • Use oklch.com to pick colors
  • Test both light and dark modes
  • Ensure accessibility (contrast ratios)

© pagezero-dev, 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/change-theme of pagezero-dev/pagezero.

Open the folder on GitHubat commit 5619f1b

Compare with similar skills

Change Theme 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.

Change Theme compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Change Theme this skillpagezero-dev/pagezero143—~805Automated safety check: PassMIT
Web Artifacts Builderanthropics/skills180k40 repos~769Automated safety check: PassApache-2.0
UI StylingOhh-889/skyroc79513 repos~2.5kAutomated safety check: PassMIT
Integrating shadcn/ui Componentsgoogle-labs-code/stitch-skills8.4k4 repos~2.3kAutomated safety check: NotesApache-2.0
Creative Tim UI Blockscreativetimofficial/ui12k—~2.1kAutomated safety check: NotesMIT
Cosscrafter-station/petdex4.2k—~1.4kAutomated safety check: PassMIT

Similar skills

  • Web Artifacts Builder

    anthropics/skills

    Official

    Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.

    180k GitHub starsUsed in 40 repos~769 tokens
    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

  • Integrating shadcn/ui Components

    google-labs-code/stitch-skills

    Official

    Guides finding, installing, customizing and wiring up shadcn/ui components in a project, with MCP tools for the component catalog and registries.

    8.4k GitHub starsUsed in 4 repos~2.3k tokens
    Frontend & DesignAuto-check: notes

  • Creative Tim UI Blocks

    creativetimofficial/ui

    Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.

    12k GitHub stars~2.1k tokensUpdated 6 mo ago
    Frontend & DesignAuto-check: notes

  • Coss

    crafter-station/petdex

    Helps implement coss UI components correctly. An agent skill from crafter-station/petdex.

    4.2k GitHub stars~1.4k tokensUpdated 9 days ago
    Frontend & DesignAuto-check passed

  • Ss Learn

    bitjaru/styleseed

    Capture a human-approved UI design lesson as a privacy-minimized local StyleSeed candidate, review it, and prepare an opt-in share package without transmitting project code, prompts, screenshots, or…

    970 GitHub stars~1.3k tokensUpdated 6 days ago
    Frontend & DesignAuto-check passed

More from pagezero-dev/pagezero

  • Create Component

    pagezero-dev/pagezero

    Creates a new UI component with implementation, index, tests, and Storybook stories following PageZERO conventions.

    143 GitHub stars~896 tokensUpdated 6 days ago
    Auto-check passed

  • Create PR

    pagezero-dev/pagezero

    Create GitHub pull requests following conventional naming patterns, creating a branch if needed.

    143 GitHub stars~647 tokensUpdated 6 days ago
    Auto-check passed

  • Merge PR

    pagezero-dev/pagezero

    Squash-merge the open pull request for the current branch and clean up the branch, only when that PR exists and all checks pass.

    143 GitHub stars~445 tokensUpdated 6 days ago
    Auto-check passed

  • Pagezero Upgrade

    pagezero-dev/pagezero

    Upgrade a PageZERO-based project to the latest starter while keeping project-specific business logic and marketing content.

    143 GitHub stars~1.6k tokensUpdated 6 days ago
    Auto-check: notes

Works with

Categories

Questions about Change Theme

What does Change Theme do?

Updates the shadcn/ui theme by editing OKLCH CSS custom properties in apps/core/styles/tailwind.css. Change Theme is an agent skill from pagezero-dev/pagezero.css.

When should I use Change Theme?

Change Theme fits situations like: the user wants to change colors; theme appearance; match a brand palette.

How do I install Change Theme in Claude Code?

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

How do I install Change Theme in Codex?

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

Can I use Change Theme 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 pagezero-dev/pagezero --skill change-theme -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/change-theme, .gemini/skills/change-theme, .github/skills/change-theme and .opencode/skills/change-theme in your project.

What does Change Theme need to run?

SKILL.md names no scripts, command-line tools or credentials: Change Theme is instructions for the agent only.

Does Change Theme access the network?

SKILL.md names 1 domain. As links in the text: oklch.com. This is read from the text; nothing was executed.

Is Change Theme 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 Change Theme use?

Change Theme 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 Change Theme use?

About 805 tokens (SKILL.md is roughly 3.2k 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 Change Theme?

Skills that share tags, products or a category with Change Theme: Web Artifacts Builder (anthropics/skills, 180k stars), UI Styling (Ohh-889/skyroc, 795 stars), Integrating shadcn/ui Components (google-labs-code/stitch-skills, 8.4k stars) and Creative Tim UI Blocks (creativetimofficial/ui, 12k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Change Theme?

pagezero-dev (a GitHub organization) maintains it in pagezero-dev/pagezero, which has 143 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on October 1, 2026.

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