Agent skill

Vibeusage Design

A skill your agent uses to generate well-branded interfaces and assets for VibeUsage, either for production or throwaway prototypes/mocks/etc.

MITAuto-check passedFrontend & Design

Install Vibeusage Design

skills CLI

$ npx skills add victorGPT/vibeusage --skill vibeusage-design -a claude-code

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

GitHub CLI

$ gh skill install victorGPT/vibeusage vibeusage-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/victorGPT/vibeusage.git skills-src && mkdir -p .claude/skills && cp -r skills-src/design-system .claude/skills/vibeusage-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/

Paste into Claude Code

Install the "vibeusage-design" agent skill from https://github.com/victorGPT/vibeusage/tree/main/design-system into .claude/skills/vibeusage-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vibeusage-design", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/victorGPT/vibeusage/tree/main/design-system

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add victorGPT/vibeusage --skill vibeusage-design -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install victorGPT/vibeusage vibeusage-design --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/victorGPT/vibeusage.git skills-src && mkdir -p .agents/skills && cp -r skills-src/design-system .agents/skills/vibeusage-design && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "vibeusage-design" agent skill from https://github.com/victorGPT/vibeusage/tree/main/design-system into .agents/skills/vibeusage-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vibeusage-design", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add victorGPT/vibeusage --skill vibeusage-design -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install victorGPT/vibeusage vibeusage-design --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/victorGPT/vibeusage.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/design-system .cursor/skills/vibeusage-design && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "vibeusage-design" agent skill from https://github.com/victorGPT/vibeusage/tree/main/design-system into .cursor/skills/vibeusage-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vibeusage-design", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/victorGPT/vibeusage.git --path design-system

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add victorGPT/vibeusage --skill vibeusage-design -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install victorGPT/vibeusage vibeusage-design --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/victorGPT/vibeusage.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/design-system .gemini/skills/vibeusage-design && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "vibeusage-design" agent skill from https://github.com/victorGPT/vibeusage/tree/main/design-system into .gemini/skills/vibeusage-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vibeusage-design", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install victorGPT/vibeusage vibeusage-design

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add victorGPT/vibeusage --skill vibeusage-design -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/victorGPT/vibeusage.git skills-src && mkdir -p .github/skills && cp -r skills-src/design-system .github/skills/vibeusage-design && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "vibeusage-design" agent skill from https://github.com/victorGPT/vibeusage/tree/main/design-system into .github/skills/vibeusage-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vibeusage-design", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add victorGPT/vibeusage --skill vibeusage-design -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install victorGPT/vibeusage vibeusage-design --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/victorGPT/vibeusage.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/design-system .opencode/skills/vibeusage-design && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "vibeusage-design" agent skill from https://github.com/victorGPT/vibeusage/tree/main/design-system into .opencode/skills/vibeusage-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vibeusage-design", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: vibeusage-design
GitHub stars: 131
Token cost: ~566 tokens
SKILL.md length: 268 words
Files: 42 (incl. assets)
Skills in repo: 6
Repo updated: Jul 31, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

A skill your agent uses to generate well-branded interfaces and assets for VibeUsage, either for production or throwaway prototypes/mocks/etc.

Generate well-branded interfaces and assets for VibeUsage
SKILL.md covers Quick orientation and Hard "do not" list
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
Either for production

What it does

Vibeusage Design is an agent skill from victorGPT/vibeusage. Use this skill to generate well-branded interfaces and assets for VibeUsage, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.

Its SKILL.md is about 570 tokens, which your agent loads only when the skill is triggered. The skill folder holds 46 other files, including assets (for example `HANDOFF.md`, `README.md` and `chats/chat1.md`).

It sits in Frontend & Design, covering Prototyping and Design systems. The licence is MIT.

When your agent uses it

Generate well-branded interfaces and assets for VibeUsage
Either for production
Throwaway prototypes/mocks/etc

Example prompts

“/vibeusage-design”

What it can do on your machine

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

Vibeusage Design loads about 566 tokens when it runs. Until then it costs about 64 tokens; SKILL.md has 268 words of instructions outside code blocks.

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

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 victorGPT/vibeusage at commit 4891a58, republished under its MIT licence (© victorGPT). 268 words, ~566 tokens.

Download SKILL.mdSave it as .claude/skills/vibeusage-design/SKILL.md (or your agent's skills folder). This skill also uses 41 other files; get the full folder from GitHub.

name: vibeusage-design
description: Use this skill to generate well-branded interfaces and assets for VibeUsage, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
user-invocable: true

Read the README.md file within this skill, and explore the other available files.

If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy assets out and create static HTML files for the user to view. If working on production code, you can copy assets and read the rules here to become an expert in designing with this brand.

If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artifacts or production code, depending on the need.

Quick orientation

Brand: VibeUsage — Bloomberg terminal × The Matrix. Three words: hacker · 复古 · cyberpunk.
Pocket color: Matrix Green #00FF41 on #050505. Single gold accent #FFD700 reserved for leaderboard #1 / cost.
Font: Geist Mono only (system fallback to ui-monospace). No exceptions.
Signature: ASCII-frame panel + corner-cross title chip + scanline overlay.
Drop-in tokens: colors_and_type.css — covers all colors, type, spacing, shadows, animations.
Hard rules: zero radius on every data surface (only the status dot, avatars, and floating action buttons round — see README §Corner radii), 1px solid borders only, no emoji, uppercase labels, tabular numerals.
Reference recreation: ui_kits/dashboard/ — open index.html to see the product.

Hard "do not" list

Don't add emoji.
Don't use text-[Npx], [#hex], tracking-[Xem], shadow-[…], opacity-30..90, rounded-*, bg-white, text-white.
Don't introduce a third hue for prose / surfaces / accents. Palette ceiling is two ink stops + one gold + neutral surfaces + the warn/err status escape hatch (warn #FFB300 / err #FF3344, status indicators only).
Don't use bouncy / spring easing. Linear / ease only, 200ms.
Don't use SaaS rounded cards, gradient headers, or icon-tile grids.
Don't soften numbers ("~1M"). Show 1,042,318.

Files

SKILL.md and 41 other files (assets) in design-system of victorGPT/vibeusage.

SKILL.md
HANDOFF.md
README.md
assets/brand/claude.svg
assets/brand/gemini.svg
assets/brand/github.svg
assets/brand/openai.svg
assets/icon.svg
chats/chat1.md
chats/chat2.md
colors_and_type.css
fonts/GeistMono-Black.woff2
fonts/GeistMono-Bold.woff2
fonts/GeistMono-Medium.woff2
fonts/GeistMono-Regular.woff2
preview/_card.css
… and 26 more

Open the folder on GitHubat commit 4891a58

Compare with similar skills

Vibeusage 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.

Vibeusage Design compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Vibeusage Design this skillvictorGPT/vibeusage	131	—	~566	Automated safety check: Pass	MIT	2 mo ago
Fast Agent Designevalstate/fast-agent	3.9k	—	~220	Automated safety check: Pass	Apache-2.0	today
Baby Menu Designkunchenguid/baby-menu	235	—	~1.1k	Automated safety check: Pass	MIT	13 days ago
Beava Designbeava-dev/beava	138	—	~443	Automated safety check: Pass	Apache-2.0	4 mo ago
Irrlicht Designingo-eichhorst/Irrlicht	100	—	~512	Automated safety check: Pass	MIT	4 days ago
Prototype to Figmaalima-max/prototype-to-figma-skill	140	—	~7.8k	Automated safety check: Pass	MIT	2 mo ago

Similar skills

Fast Agent Design
evalstate/fast-agent
A skill your agent uses to generate well-branded interfaces and assets for fast-agent, either for production or throwaway prototypes/mocks/etc.
3.9k GitHub stars~220 tokensUpdated today
Frontend & DesignAuto-check passed
Baby Menu Design
kunchenguid/baby-menu
A skill your agent uses to generate well-branded interfaces and assets for Baby Menu, either for production or throwaway prototypes/mocks/etc.
235 GitHub stars~1.1k tokensUpdated 13 days ago
Frontend & DesignAuto-check passed
Beava Design
beava-dev/beava
A skill your agent uses to generate well-branded interfaces and assets for beava (beava.dev, an open-source single-binary feature server for stream processing), either for production or throwaway…
138 GitHub stars~443 tokensUpdated 4 mo ago
Frontend & DesignAuto-check passed
Irrlicht Design
ingo-eichhorst/Irrlicht
A skill your agent uses to generate well-branded interfaces and assets for Irrlicht, either for production or throwaway prototypes/mocks/etc.
100 GitHub stars~512 tokensUpdated 4 days ago
Frontend & DesignAuto-check passed
Prototype to Figma
alima-max/prototype-to-figma-skill
Converts a working code prototype into a structured Figma file with one frame per interaction state, mapped to your design system and annotated with transitions.
140 GitHub stars~7.8k tokensUpdated 2 mo ago
Frontend & DesignAuto-check passed
Process Router
hashgraph-online/awesome-codex-plugins
A skill your agent uses whenever the question is how to design well over time or how to make a design that doesn't break — accessibility, prototyping cadence, MVP scoping, edge cases, performance…
1.2k GitHub stars~855 tokensUpdated today
Frontend & DesignAuto-check passed

More from victorGPT/vibeusage

Frontend UI Functional
victorGPT/vibeusage
A skill your agent uses when building or refactoring functional React/Vite/Tailwind UI pages, templates, or component libraries that need consistent structure, tokenized styling, accessibility…
131 GitHub stars~939 tokensUpdated 2 mo ago
Auto-check passed
Backend Mvp Guardrails
victorGPT/vibeusage
A skill your agent uses when designing or reviewing a backend MVP with tight budget, evolving schema, and reliance on third-party backends where idempotency, replay, and responsibility attribution…
131 GitHub stars~1.3k tokensUpdated 2 mo ago
Auto-check passed
Codex PR Review Loop
victorGPT/vibeusage
A skill your agent uses when managing Codex review iterations for a PR and you must enforce preflight risk-layer checks and post-merge learning capture.
131 GitHub stars~1.3k tokensUpdated 2 mo ago
Auto-check passed
PR Review Cycle Retro
victorGPT/vibeusage
A skill your agent uses when a team sees repeated @codex review cycles or Codex Cloud feedback churn and needs root-cause attribution by development stage.
131 GitHub stars~1.4k tokensUpdated 2 mo ago
Auto-check passed
Vibeusage Agent Readiness
victorGPT/vibeusage
Use VibeUsage to track AI coding agent token usage, inspect model and project usage, and find scoped API documentation.
131 GitHub stars~252 tokensUpdated 2 mo ago
Auto-check passed

Questions about Vibeusage Design

What does Vibeusage Design do?

A skill your agent uses to generate well-branded interfaces and assets for VibeUsage, either for production or throwaway prototypes/mocks/etc. Vibeusage Design is an agent skill from victorGPT/vibeusage. Use this skill to generate well-branded interfaces and assets for VibeUsage, either for production or throwaway prototypes/mocks/etc.

When should I use Vibeusage Design?

Vibeusage Design fits situations like: generate well-branded interfaces and assets for VibeUsage; either for production; throwaway prototypes/mocks/etc.

How do I install Vibeusage Design in Claude Code?

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

How do I install Vibeusage Design in Codex?

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

Can I use Vibeusage 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 victorGPT/vibeusage --skill vibeusage-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/vibeusage-design, .gemini/skills/vibeusage-design, .github/skills/vibeusage-design and .opencode/skills/vibeusage-design in your project.

What does Vibeusage Design need to run?

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

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

Vibeusage Design 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 Vibeusage Design use?

About 566 tokens (SKILL.md is roughly 2.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 Vibeusage Design?

Skills that share tags, products or a category with Vibeusage Design: Fast Agent Design (evalstate/fast-agent, 3.9k stars), Baby Menu Design (kunchenguid/baby-menu, 235 stars), Beava Design (beava-dev/beava, 138 stars) and Irrlicht Design (ingo-eichhorst/Irrlicht, 100 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Vibeusage Design?

victorGPT (a GitHub user) maintains it in victorGPT/vibeusage, which has 131 GitHub stars. The repository holds 6 skills in this directory. The repository was last updated on July 31, 2026.

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

Install Vibeusage Design

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Quick orientation

Hard "do not" list

Files

Compare with similar skills

Similar skills

More from victorGPT/vibeusage

Related

Questions about Vibeusage Design