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

Volt UI Design

by owenHochwald in owenHochwald/volt

Design, implement, or review Volt's Bubble Tea and Lip Gloss terminal UI using the repository's Controlled Voltage design system.

MPL-2.0Auto-check passedFrontend & Design

Install Volt UI Design

skills CLI
$ npx skills add owenHochwald/volt --skill volt-ui-design -a claude-code

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

GitHub CLI
$ gh skill install owenHochwald/volt volt-ui-design --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/owenHochwald/volt.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/volt-ui-design .claude/skills/volt-ui-design && 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
volt-ui-design
GitHub stars
141
Token cost
~820 tokens
SKILL.md length
376 words
Files
2
Skills in repo
2
Repo updated
First seen
Licence
MPL-2.0

At a glance

Design, implement, or review Volt's Bubble Tea and Lip Gloss terminal UI using the repository's Controlled Voltage design system.

  • Works in 8 steps: Inspect the affected models, views,… → List the relevant states before styling:… → Reuse the documented component… → …
  • Volt color themes
  • SKILL.md covers Load the canonical references, Workflow, Design constraints and Theme implementation, plus 1 more section
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Volt UI Design is an agent skill from owenHochwald/volt. Design, implement, or review Volt's Bubble Tea and Lip Gloss terminal UI using the repository's Controlled Voltage design system. Use for Volt color themes, theme configuration, settings, layout, focus behavior, reusable UI components, motion, startup/header treatments, load-test visualization, accessibility, screenshots, or any change under internal/ui or internal/app that affects presentation or interaction.

Its SKILL.md is about 820 tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `agents/openai.yaml`).

It sits in Frontend & Design, covering UI design, Load testing and Design systems. The repository describes itself as: High-performance, concurrent, terminal-based HTTP client. The licence is MPL-2.0.

When your agent uses it

  • Volt color themes
  • Theme configuration
  • Reusable UI components
  • Startup/header treatments

Example prompts

  • “s Bubble Tea and Lip Gloss terminal UI using the repository”
  • “/volt-ui-design”

Workflow steps

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

  1. Inspect the affected models, views, update paths, layout tests, and current
  2. List the relevant states before styling: idle, focused, busy, empty, success,
  3. Reuse the documented component vocabulary and semantic theme roles. Do not
  4. Preserve keyboard-first behavior. Define focus entry, movement, activation,
  5. Follow the repository's test-driven workflow. Add a failing state or layout
  6. Verify wide, focused, minimum-size, ANSI-256, and mono behavior in
  7. Check animation cadence, stop conditions, stable widths, and reduced-motion
  8. Run focused tests and then the full Go test suite before handoff.

What it can do on your machine

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

Volt UI Design loads about 820 tokens when it runs. Until then it costs about 107 tokens; SKILL.md has 376 words of instructions outside code blocks.

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

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 owenHochwald/volt at commit 35e1ad9, republished under its MPL-2.0 licence (© owenHochwald). 376 words, ~820 tokens.

Download SKILL.mdSave it as .claude/skills/volt-ui-design/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
volt-ui-design
description
Design, implement, or review Volt's Bubble Tea and Lip Gloss terminal UI using the repository's Controlled Voltage design system. Use for Volt color themes, theme configuration, settings, layout, focus behavior, reusable UI components, motion, startup/header treatments, load-test visualization, accessibility, screenshots, or any change under internal/ui or internal/app that affects presentation or interaction.

Volt UI Design

Apply Volt's canonical design language without inventing component-local colors or interaction patterns.

Load the canonical references

Before UI work, read ../../../DESIGN_SYSTEM.md completely.

For themes, settings, configuration discovery, imports, exports, or custom colors, also read ../../../CUSTOMIZATION.md completely.

Treat those files as authoritative. Update the canonical document in the same change when intentionally extending the system.

Workflow

  1. Inspect the affected models, views, update paths, layout tests, and current screenshots or captures.
  2. List the relevant states before styling: idle, focused, busy, empty, success, partial failure, failure, disabled, cancelled, and narrow as applicable.
  3. Reuse the documented component vocabulary and semantic theme roles. Do not add raw color literals outside the design/theme layer.
  4. Preserve keyboard-first behavior. Define focus entry, movement, activation, cancellation, and focus return for new interactions.
  5. Follow the repository's test-driven workflow. Add a failing state or layout test, implement the smallest behavior, then refactor.
  6. Verify wide, focused, minimum-size, ANSI-256, and mono behavior in proportion to the change.
  7. Check animation cadence, stop conditions, stable widths, and reduced-motion behavior for any timed UI.
  8. Run focused tests and then the full Go test suite before handoff.
Show full SKILL.md (185 more words)Show less

Design constraints

  • Keep the idle interface neutral and controlled. Use violet for brand/focus and charge for primary action/live execution.
  • Make focus visible through at least two properties and understandable without color.
  • Keep success, warning, error, HTTP methods, charts, brand, and focus as separate semantic roles.
  • Reserve the large ASCII logo for startup, About, and promotional output.
  • Prefer rails, separators, spacing, and alignment to nested rounded boxes.
  • Treat load testing as the visual centerpiece, with live progress, stable metrics, and a real bounded time series for sparklines.
  • Do not animate idle screens or decorative borders.
  • Do not let user themes alter layout, spacing, key behavior, or semantic meaning.

Theme implementation

Keep configuration data separate from the complete, validated Theme consumed by components. Resolve inheritance and fallbacks before constructing styles. Pass Theme explicitly; avoid mutable package-global styles.

When changing the public theme schema, preserve versioning, safe fallback, atomic preview/apply behavior, and the YAML-only format described in the customization contract.

Review output

For design reviews, lead with concrete findings ordered by user impact and cite the relevant file or screenshot. Distinguish implementation defects from intentional future design work.

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

Files

SKILL.md and 1 other file in .agents/skills/volt-ui-design of owenHochwald/volt.

  • SKILL.md
  • agents/openai.yaml

Open the folder on GitHubat commit 35e1ad9

Compare with similar skills

Volt UI Design 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.

Volt UI Design compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Volt UI Design this skillowenHochwald/volt141—~820Automated safety check: PassMPL-2.0
UI Designmblode/agent-skills144—~6.3kAutomated safety check: PassMIT
UI StylingOhh-889/skyroc79513 repos~2.5kAutomated safety check: PassMIT
Design Dnazanwei/design-dna1.9k1 repos~2.1kAutomated safety check: PassMIT
Stitch Prompt Enhancergoogle-labs-code/stitch-skills8.4k5 repos~1.7kAutomated safety check: PassApache-2.0
Creative Tim UI Blockscreativetimofficial/ui12k—~2.1kAutomated safety check: NotesMIT

Similar skills

  • UI Design

    mblode/agent-skills

    Designs and builds React/Next/Tailwind UI, audits visual and interaction defects, and stress-tests components with worst-case data.

    144 GitHub stars~6.3k tokensUpdated today
    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

  • Design Dna

    zanwei/design-dna

    Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…

    1.9k GitHub starsUsed in 1 repo~2.1k tokens
    Frontend & DesignAuto-check passed

  • Stitch Prompt Enhancer

    google-labs-code/stitch-skills

    Official

    Rewrites a vague UI generation idea into a structured, keyword-rich prompt for Stitch, pulling in an existing DESIGN.md design system when the project has one.

    8.4k GitHub starsUsed in 5 repos~1.7k tokens
    Frontend & DesignAuto-check passed

  • 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

  • Improve UI Audit and Plans

    ibelick/ui-skills

    Audits one product surface against its own design evidence and writes self-contained implementation plans for another agent, without touching product source.

    9.5k GitHub stars~2k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed

More from owenHochwald/volt

  • Volt Load Testing

    owenHochwald/volt

    Safely exercise and evaluate HTTP APIs with the Volt CLI, including authenticated requests, JSON bodies, staged load, machine-readable results, performance baselines, and before/after comparisons.

    141 GitHub stars~1.2k tokensUpdated 2 mo ago
    Auto-check passed

Categories

Questions about Volt UI Design

What does Volt UI Design do?

Design, implement, or review Volt's Bubble Tea and Lip Gloss terminal UI using the repository's Controlled Voltage design system. Volt UI Design is an agent skill from owenHochwald/volt. Design, implement, or review Volt's Bubble Tea and Lip Gloss terminal UI using the repository's Controlled Voltage design system.

When should I use Volt UI Design?

Volt UI Design fits situations like: volt color themes; theme configuration; reusable UI components; startup/header treatments.

How do I install Volt UI Design in Claude Code?

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

How do I install Volt UI Design in Codex?

Run `npx skills add owenHochwald/volt --skill volt-ui-design -a codex`. Or copy the skill folder (.agents/skills/volt-ui-design in owenHochwald/volt) into .agents/skills/volt-ui-design in your project. Codex loads it when a task matches its description.

Can I use Volt UI Design 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 owenHochwald/volt --skill volt-ui-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/volt-ui-design, .gemini/skills/volt-ui-design, .github/skills/volt-ui-design and .opencode/skills/volt-ui-design in your project.

What does Volt UI Design need to run?

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

Does Volt UI Design 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 Volt UI Design 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 Volt UI Design use?

Volt UI Design is published under the MPL-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Volt UI Design use?

About 820 tokens (SKILL.md is roughly 3.3k 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 Volt UI Design?

Skills that share tags, products or a category with Volt UI Design: UI Design (mblode/agent-skills, 144 stars), UI Styling (Ohh-889/skyroc, 795 stars), Design Dna (zanwei/design-dna, 1.9k stars) and Stitch Prompt Enhancer (google-labs-code/stitch-skills, 8.4k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Volt UI Design?

owenHochwald (a GitHub user) maintains it in owenHochwald/volt, which has 141 GitHub stars. The repository holds 2 skills in this directory. The repository was last updated on July 25, 2026.

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