Wonder Blocks
Khan/wonder-blocks
Implements user interfaces using the Wonder Blocks (WB) design system — Khan Academy's React component library.
Design review and implementation guidance for the Qovery Console.
Install Qovery UI
$ npx skills add Qovery/console --skill qovery-ui -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Qovery/console qovery-ui --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/Qovery/console.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/qovery-ui .claude/skills/qovery-ui && rm -rf skills-srcUse ~/.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/
Install the "qovery-ui" agent skill from https://github.com/Qovery/console/tree/staging/.agents/skills/qovery-ui into .claude/skills/qovery-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "qovery-ui", 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 install https://github.com/Qovery/console/tree/staging/.agents/skills/qovery-uiType 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.
$ npx skills add Qovery/console --skill qovery-ui -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Qovery/console qovery-ui --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Qovery/console.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/qovery-ui .agents/skills/qovery-ui && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "qovery-ui" agent skill from https://github.com/Qovery/console/tree/staging/.agents/skills/qovery-ui into .agents/skills/qovery-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "qovery-ui", 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.
$ npx skills add Qovery/console --skill qovery-ui -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Qovery/console qovery-ui --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Qovery/console.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/qovery-ui .cursor/skills/qovery-ui && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "qovery-ui" agent skill from https://github.com/Qovery/console/tree/staging/.agents/skills/qovery-ui into .cursor/skills/qovery-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "qovery-ui", 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 https://github.com/Qovery/console.git --path .agents/skills/qovery-ui--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add Qovery/console --skill qovery-ui -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Qovery/console qovery-ui --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Qovery/console.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/qovery-ui .gemini/skills/qovery-ui && rm -rf skills-srcUse ~/.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/
Install the "qovery-ui" agent skill from https://github.com/Qovery/console/tree/staging/.agents/skills/qovery-ui into .gemini/skills/qovery-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "qovery-ui", 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.
$ gh skill install Qovery/console qovery-uiInstalls 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).
$ npx skills add Qovery/console --skill qovery-ui -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Qovery/console.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/qovery-ui .github/skills/qovery-ui && rm -rf skills-srcUse ~/.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/
Install the "qovery-ui" agent skill from https://github.com/Qovery/console/tree/staging/.agents/skills/qovery-ui into .github/skills/qovery-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "qovery-ui", 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.
$ npx skills add Qovery/console --skill qovery-ui -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Qovery/console qovery-ui --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Qovery/console.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/qovery-ui .opencode/skills/qovery-ui && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "qovery-ui" agent skill from https://github.com/Qovery/console/tree/staging/.agents/skills/qovery-ui into .opencode/skills/qovery-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "qovery-ui", 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
qovery-ui- GitHub stars
- 227
- Token cost
- ~2k tokens
- SKILL.md length
- 702 words
- Files
- 9 (incl. references)
- Skills in repo
- 2
- Repo updated
- First seen
- Licence
- GPL-3.0
At a glance
Design review and implementation guidance for the Qovery Console.
- Works in 3 steps: Identify if a shared component already… → Return the import path and correct usage… → If nothing fits, explain why before…
- Auditing UI components
- SKILL.md covers Core Design Principles, Commands, /audit and /polish, plus 5 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Qovery UI is an agent skill from Qovery/console. Design review and implementation guidance for the Qovery Console. Use for auditing UI components, refining spacing and color, selecting the right shared component, writing microcopy, and designing new surfaces from scratch.
Its SKILL.md is about 2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 9 other files, including reference files (for example `references/accessibility.md`, `references/anti-patterns.md` and `references/colors.md`).
It sits in Frontend & Design, covering Design review and critique. It works with Cypress, Storybook and React. The repository describes itself as: Qovery Web Console ⚡️. The licence is GPL-3.0.
When your agent uses it
- Auditing UI components
- Refining spacing and color
- Selecting the right shared component
- Writing microcopy
Example prompts
- “/qovery-ui”
Workflow steps
3 steps, taken from the first numbered list in SKILL.md.
- Identify if a shared component already exists — always prefer it
- Return the import path and correct usage with props
- If nothing fits, explain why before scaffolding new
What it can do on your machine
Read from SKILL.md and the folder at commit caa50bf. 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
Qovery UI loads about 2k tokens when it runs, and up to ~13k if it reads all its reference files. Until then it costs about 58 tokens; SKILL.md has 702 words of instructions outside code blocks.
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 Qovery/console at commit caa50bf, republished under its GPL-3.0 licence (© Qovery). 702 words, ~1,963 tokens.
Download SKILL.mdSave it as
.claude/skills/qovery-ui/SKILL.md (or your agent's skills folder). This skill also uses 8 other files; get the full folder from GitHub.- name
- qovery-ui
- description
- Design review and implementation guidance for the Qovery Console. Use for auditing UI components, refining spacing and color, selecting the right shared component, writing microcopy, and designing new surfaces from scratch.
Qovery UI Skill
Design review and implementation guidance for the Qovery Console. Read .claude/design.md first for orientation.
Core Design Principles
.claude/design.md is the source of truth — read it first. These are quick-reference reminders for agents running without that context.
Colors: Tailwind tokens only, never hardcoded. Status colors are semantic, never decorative. Brand violet on actionable controls only.
Typography: text-sm is the default. Two weights: 400 body, 500 anchors. Roboto Mono for tabular data. Max 3 sizes per surface.
Spacing: 4px grid. Variety creates hierarchy. Cards for distinct actionable content only — never nested.
Components: Shared component first, always. <StatusChip> for all system states. <Button> not <ButtonPrimitive>. <Badge> not <Tag>.
Copy: Technical but human. Button copy 1–3 words. Modal titles name the action. Address the user as "you."
Motion: Default is no motion. High-frequency actions never animate. Every animation needs a reason beyond aesthetics.
Accessibility: No color-only state. Focus rings never suppressed. Interactive icon-only controls always have aria-label.
Commands
| Command | When to use |
|---|---|
/qovery-ui audit | Full design review of a component or page |
/qovery-ui polish | Targeted spacing, color, and rhythm refinement |
/qovery-ui component | Find the right component or scaffold a new one |
/qovery-ui copy | Review or write microcopy |
/qovery-ui motion | Audit or add animation |
/qovery-ui craft | Design something new from scratch |
/audit
Load: references/colors.md, references/spacing-layout.md, references/anti-patterns.md, references/accessibility.md
Four-phase review. Label every finding:
[blocking]— ships broken, violates semantic rules, or breaks accessibility[important]— degrades experience, likely to cause design review rejection[nit]— minor inconsistency, low impact
Phase 1 — Token hygiene: hardcoded values, legacy tokens, raw Tailwind palette classes used semantically.
Phase 2 — Semantic color: status colors used decoratively, color-only state, brand as page wash.
Phase 3 — Spacing & density: off-grid values, whitespace inflation, button height overrides.
Phase 4 — Accessibility: missing aria-label, suppressed focus ring, color-only status.
Output format — a single markdown table, one row per issue:
| Location | Severity | Issue | Fix |
|---|---|---|---|
ServiceRow.tsx:42 | [blocking] | text-green-500 used for running state | Replace with text-positive |
Modal.tsx:18 | [important] | Modal title is "Settings" | Rename to the action: "Configure autoscaling" |
Card.tsx:9 | [nit] | gap-5 off the 4px grid | Use gap-4 or gap-6 |
Finish with: total issues by severity.
/polish
Load: references/spacing-layout.md, references/colors.md, references/typography.md, references/anti-patterns.md
Fix without changing functionality. Output a Before / After / Why table, one row per change:
| Before | After | Why |
|---|---|---|
p-5 | p-4 | Off the 4px grid |
text-neutral-600 | text-neutral-subtle | Legacy token |
| No hover state on row | hover:bg-surface-neutral-subtle | Interactive elements need hover feedback |
/component
Load: references/components.md
- Identify if a shared component already exists — always prefer it
- Return the import path and correct usage with props
- If nothing fits, explain why before scaffolding new
Show full SKILL.md (280 more words)Show less
/copy
Load: references/copy.md
Review or generate microcopy. Output findings as a Before / After / Why table:
| Before | After | Why |
|---|---|---|
| "An error occurred" | "Deploy failed. Check the logs for details." | States what happened + what to do |
| "ENVIRONMENT NAME" | "Environment name" | Sentence case |
| "Confirm" | "Delete environment" | Destructive buttons name the object |
/motion
Load: references/motion.md
Ask first: how often will users see this? If the answer is "constantly," remove the animation. Otherwise, check easing and duration against the guide and output a Before / After / Why table.
/craft
Load: references/typography.md, references/spacing-layout.md, references/colors.md, references/components.md, references/copy.md
Generative command — use when designing something new from scratch rather than reviewing existing work.
Input: describe what you're building. Include the user goal, the data or content being shown, and any known constraints (compact, read-heavy, action-dense).
Output: a structured design proposal with:
- Layout skeleton — which primitives to reach for (card, table, modal, inline), rough visual hierarchy
- Component choices — which shared components satisfy each UI need and why
- Typography — size and weight choices per content level
- Color decisions — which semantic tokens to use for each surface and state
- Copy suggestions — headings, labels, CTAs, empty state
Output structured prose and a table for component choices. Do not output code. Flag any working memory concerns (>4 simultaneous choices) and suggest grouping or progressive disclosure where needed.
Reference Files
| File | Contents |
|---|---|
references/colors.md | Token system, semantic rules, contrast, tonal scale |
references/typography.md | Type scale, weights, Roboto Mono, typographic characters |
references/spacing-layout.md | 4px grid, visual rhythm, layout compositions, optical alignment, working memory rule |
references/components.md | Which component to use when |
references/copy.md | Tone, microcopy patterns, modal titles, button copy rules |
references/motion.md | Animation decision framework, easing, duration guide |
references/anti-patterns.md | Match-and-refuse design bans |
references/accessibility.md | Non-negotiables, ARIA, focus management |
© Qovery, GPL-3.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 8 other files (references) in .agents/skills/qovery-ui of Qovery/console.
- SKILL.md
- references/accessibility.md
- references/anti-patterns.md
- references/colors.md
- references/components.md
- references/copy.md
- references/motion.md
- references/spacing-layout.md
- references/typography.md
Open the folder on GitHubat commit caa50bf
Compare with similar skills
Qovery UI 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Qovery UI this skillQovery/console | 227 | — | ~2k | Automated safety check: Pass | GPL-3.0 | |
| Wonder BlocksKhan/wonder-blocks | 163 | — | ~3.2k | Automated safety check: Pass | MIT | |
| DaleuiDaleStudy/daleui | 119 | — | ~675 | Automated safety check: Pass | MIT | |
| Agentos UI UXSapienXai/AgentOS | 118 | — | ~4.4k | Automated safety check: Pass | MIT | |
| StorybookKhan/wonder-blocks | 163 | — | ~4.2k | Automated safety check: Pass | MIT | |
| Dx Insight Usage Guardrailcultureamp/kaizen-design-system | 176 | — | ~1.3k | Automated safety check: Pass | MIT |
Similar skills
Daleui
DaleStudy/daleui
Use the daleui React design system with semantic Panda CSS tokens and accessible components.
Agentos UI UX
SapienXai/AgentOS
Design, review, or implement AgentOS UI and UX work using the project’s operator-console visual system.
Storybook
Khan/wonder-blocks
Storybook best practices for Wonder Blocks component stories.
Dx Insight Usage Guardrail
cultureamp/kaizen-design-system
Checks deps update in widely consumed repos will cause problems or not, and ranks dependency updates by downstream impact for prioritisation.
Frontend Design
jwynia/agent-skills
Create distinctive, production-grade frontend interfaces with high design quality.
More from Qovery/console
Qovery Console Standards
Qovery/console
Qovery Console coding standards, architecture guidelines, naming conventions, testing practices, and development workflows.
Related
Categories
Questions about Qovery UI
What does Qovery UI do?
Design review and implementation guidance for the Qovery Console. Qovery UI is an agent skill from Qovery/console. Design review and implementation guidance for the Qovery Console.
When should I use Qovery UI?
Qovery UI fits situations like: auditing UI components; refining spacing and color; selecting the right shared component; writing microcopy.
How do I install Qovery UI in Claude Code?
Run `npx skills add Qovery/console --skill qovery-ui -a claude-code`. Or copy the skill folder (.agents/skills/qovery-ui in Qovery/console) into .claude/skills/qovery-ui in your project. Claude Code loads it when a task matches its description.
How do I install Qovery UI in Codex?
Run `npx skills add Qovery/console --skill qovery-ui -a codex`. Or copy the skill folder (.agents/skills/qovery-ui in Qovery/console) into .agents/skills/qovery-ui in your project. Codex loads it when a task matches its description.
Can I use Qovery UI 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 Qovery/console --skill qovery-ui -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/qovery-ui, .gemini/skills/qovery-ui, .github/skills/qovery-ui and .opencode/skills/qovery-ui in your project.
What does Qovery UI need to run?
SKILL.md names no scripts, command-line tools or credentials: Qovery UI is instructions for the agent only.
Does Qovery UI 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 Qovery UI 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 Qovery UI use?
Qovery UI is published under the GPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Qovery UI use?
About 2k tokens (SKILL.md is roughly 7.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 11k tokens, read only when the agent opens those files.
What are the alternatives to Qovery UI?
Skills that share tags, products or a category with Qovery UI: Wonder Blocks (Khan/wonder-blocks, 163 stars), Daleui (DaleStudy/daleui, 119 stars), Agentos UI UX (SapienXai/AgentOS, 118 stars) and Storybook (Khan/wonder-blocks, 163 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Qovery UI?
Qovery (a GitHub organization) maintains it in Qovery/console, which has 227 GitHub stars. The repository holds 2 skills in this directory. The repository was last updated on October 7, 2026.
Source: Qovery/console on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.