Agent skill

Jev Design

by notque in notque/vexjoy-agent

Design React interfaces with the full shadcn/ui catalog. An agent skill from notque/vexjoy-agent.

MITAuto-check passedFrontend & Design

Install Jev Design

skills CLI
$ npx skills add notque/vexjoy-agent --skill jev-design -a claude-code

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

GitHub CLI
$ gh skill install notque/vexjoy-agent jev-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/notque/vexjoy-agent.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/frontend/jev-design .claude/skills/jev-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
jev-design
GitHub stars
438
Token cost
~1.6k tokens
SKILL.md length
745 words
Files
8 (incl. scripts, references)
Skills in repo
61
Repo updated
First seen
Licence
MIT

At a glance

Design React interfaces with the full shadcn/ui catalog. An agent skill from notque/vexjoy-agent.

  • Works in 4 steps: Brief → Pick → Compose and build → …
  • Frontend & Design work in your project
  • SKILL.md covers 1. Brief, 2. Pick, 3. Compose and build and 4. Review, plus 1 more section
  • Runs Python scripts from its folder; calls python3 and npx

What it does

Jev Design is an agent skill from notque/vexjoy-agent. Design React interfaces with the full shadcn/ui catalog. The agent writes a brief, Jev picks components and a style recipe from bounded catalogs, then the agent implements, renders, and reviews against concrete checks.

Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 10 other files, including scripts and reference files (for example `references/brief-writing.md`, `references/catalog-v1.json` and `references/catalog-v2.json`).

It sits in Frontend & Design. It works with shadcn/ui and React. The repository describes itself as: VexJoy AI Agent with Jev Intelligent Routing - /do routes plain-English requests to the right specialist agent and gates the work with reviews, tests, and a learning loop. The licence is MIT.

When your agent uses it

  • Frontend & Design work in your project

Example prompts

  • “/jev-design”

Requirements

  • Python 3
  • Node.js

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. Brief
  2. Pick
  3. Compose and build
  4. Review

What it can do on your machine

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

    Ships 1 file in scripts/ (Python), which the agent can run.

    Shell commands in SKILL.md call:

    • python3
    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.

    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

Jev Design loads about 1.6k tokens when it runs, and up to ~17k if it reads all its reference files. Until then it costs about 57 tokens; SKILL.md has 745 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~57
When it runs · the whole SKILL.md, loaded when a task matches
~1.6k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~17k

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); the scripts in this folder are not scanned.

SKILL.md

The full file from notque/vexjoy-agent at commit 5218674, republished under its MIT licence (© notque). 745 words, ~1,602 tokens.

Download SKILL.mdSave it as .claude/skills/jev-design/SKILL.md (or your agent's skills folder). This skill also uses 7 other files; get the full folder from GitHub.
name
jev-design
description
Design React interfaces with the full shadcn/ui catalog. The agent writes a brief, Jev picks components and a style recipe from bounded catalogs, then the agent implements, renders, and reviews against concrete checks.
user-invocable
true
routing.triggers
jev design, design with jev, shadcn component plan, choose shadcn components, shadcn ui design, component style recipe, which shadcn component, shadcn theme…
routing.category
frontend
routing.pairs_with
frontend, building-with-jev

Jev design

Each part of the work goes to whoever does it best:

PhaseWhoOutput
1. Briefthe agent running the skillbrief.json
2. PickJev, through scripts/plan.pya component per requirement, a style recipe, install commands, and CSS
3. Compose and buildthe agent, with the frontend skilllayout, hierarchy, copy, custom parts, and working code
4. Reviewthe agent, with any screenshot toolconcrete findings, then fixes or a revised brief

Jev only picks from lists: a component from the catalog's candidates and a recipe from its styles. It does not write layout, copy, or code. The agent does all open-ended work. Everything below is a default. Override any step when you have a stated reason, and write the reason in your summary.

1. Brief

Turn the user's request into brief.json. Read references/brief-writing.md for the procedure and a worked example.

json
{"brief":"Support agents triage 200+ cases a day on desktop; calm, dense, keyboard-first.",
 "style_traits":["dense","calm","professional"],
 "requirements":[
  {"id":"results","role":"Compare, filter, and act on open cases","capabilities":["tabular-data","filter","row-actions"]},
  {"id":"details","role":"Inspect one case without leaving the list","capabilities":["overlay","details"]}
]}
  • List capabilities, style traits, recipes, and limits with --list-capabilities. Use only listed names.
  • Keep the brief to audience, task, and tone, 1,500 characters at most. Layout and copy notes stay with you for phase 3.
  • Add "primitives": "radix" | "base" | "aria" when the project already uses one primitive set.
  • Ask the user only when the surface type (landing page or app) or the audience is unknown. Otherwise decide, and record the assumption.

2. Pick

bash
python3 skills/frontend/jev-design/scripts/plan.py \
  --input brief.json --output /tmp/design-plan.json \
  --receipt /tmp/jev-design-receipt.json --css /tmp/design-theme.css

The planner filters the catalog by capability in code: each requirement gets at most six candidates, tightest fit first. It packs requests to 3,500 tokens or fewer and refuses to send any request over 4,500. It sends through the selectable Jev transport (Vercel AI Gateway when configured), which retries 429, 503, and 529 with jittered backoff. It validates every answer and accepts a pick only when its fitness is 0.62 or higher. It never installs anything or edits code.

When the plan is selected, implementation holds:

  • install: the exact npx shadcn@latest add ... command, plus npm for extra dependencies.
  • css: paste-ready @theme inline, :root, and .dark blocks.
  • fonts: the families to load.
  • layout_tokens: radius, density classes, and shadow.
  • contrast: every checked WCAG pair and its ratio.

When the plan abstains, the output still holds baseline and candidates:

ReasonDo
no_compatible_componentFix the listed capabilities, or split the requirement.
low_fitness, none_or_out_of_catalogRewrite that requirement's role as a verb plus an object, and rerun. If it abstains again, build that part as a custom component (phase 3).
low_style_fitnessAdd or change style_traits, and rerun. If it abstains again, pick from --list-capabilities styles yourself.
jev_unavailable, malformed_responseUse the baseline, check it against each candidate's use_when, and say in your summary that Jev did not pick.
request_too_large, invalid_requestShorten the brief or roles as the message says.

Run the planner at most three times per screen.

Show full SKILL.md (298 more words)Show less

3. Compose and build

Use the frontend skill. Follow this order:

  1. Run init (if needed), install, and npm exactly as the plan gives them.
  2. Paste css into the app's global stylesheet, replacing the existing theme variables. Load fonts.
  3. Write the layout. Apply layout_tokens everywhere: the same control height, row height, gap, and section spacing on every part of the screen.
  4. Write real copy: a headline that names the task, labels as nouns, buttons as verbs with objects ("Assign case", not "Submit").
  5. When no catalog component fits, compose from catalog parts first (item + dropdown-menu, card + chart). Write new markup only when that fails, and reuse the recipe's variables.

4. Review

Build with UI design judgment and its recipes. Render the screen and review it with references/visual-review.md. Use the harness's screenshot tool (Playwright or chrome-devtools MCP). Capture 375, 768, and 1280 px widths in light and dark mode.

  • Report each finding as a fact with a location: "Primary button in the dialog footer is below the fold at 375 px", not "spacing feels off".
  • Fix code-level findings in code. Put requirement-level findings (a wrong component, the wrong tone) back into brief.json, and rerun phase 2.
  • Stop after three review rounds. Report what remains.
  • If the harness has no screenshot tool, say so. Give the user the checklist from visual-review.md to check by eye, and do not claim visual quality.

Rules for changing the planner

Apply the Jev production rules to any change in how requests are built or sent. They cover request size, retries by status, and budget checks. Keep the worst-case size test passing: too much context is the most common failure. Read references/decision-card.md before you change the model, catalog, rubric, threshold, bounds, failure policy, or promotion status. references/catalog-v1.json is kept for reference only.

© notque, MIT. 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 7 other files (scripts, references) in skills/frontend/jev-design of notque/vexjoy-agent.

  • SKILL.md
  • references/brief-writing.md
  • references/catalog-v1.json
  • references/catalog-v2.json
  • references/decision-card.md
  • references/visual-review.md
  • scripts/plan.py
  • tests/test_plan.py

Open the folder on GitHubat commit 5218674

Compare with similar skills

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

Jev Design compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Jev Design this skillnotque/vexjoy-agent438—~1.6kAutomated safety check: PassMIT
Web Artifacts Builderanthropics/skills180k41 repos~769Automated safety check: PassApache-2.0
UI UX Pro Maxsaoudi-h/solar-icons18418 repos~11kAutomated safety check: NotesCustom licence
Creative Tim UI Blockscreativetimofficial/ui12k—~2.1kAutomated safety check: NotesMIT
Cosscrafter-station/petdex4.2k—~1.4kAutomated safety check: PassMIT
Ss Learnbitjaru/styleseed972—~1.3kAutomated 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 41 repos~769 tokens
    Frontend & DesignAuto-check passed
  • UI UX Pro Max

    saoudi-h/solar-icons

    UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.

    184 GitHub starsUsed in 18 repos~11k 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…

    972 GitHub stars~1.3k tokensUpdated 7 days ago
    Frontend & DesignAuto-check passed
  • Migrate Radix To Base

    TheOrcDev/youtube-to-blog

    Migrates React projects and components from Radix UI to Base UI.

    180 GitHub starsUsed in 2 repos~2.3k tokens
    Frontend & DesignAuto-check passed

More from notque/vexjoy-agent

All 61 skills in this repo
  • Game Asset Generator

    notque/vexjoy-agent

    Deterministic palette/matrix pixel art (not AI). An agent skill from notque/vexjoy-agent.

    438 GitHub stars~2.3k tokensUpdated 5 days ago
    Auto-check: notes
  • PR Workflow

    notque/vexjoy-agent

    Pull request lifecycle: commit, codex review, sync, review, fix, status, cleanup, and PR mining.

    438 GitHub stars~2.8k tokensUpdated 5 days ago
    Auto-check: notes
  • Architecture Deepening

    notque/vexjoy-agent

    Improve architecture across modules by deepening interfaces.

    438 GitHub stars~3.3k tokensUpdated 5 days ago
    Auto-check: notes
  • Code Quality

    notque/vexjoy-agent

    Code quality: cleanup, linting, formatting, quality gates. An agent skill from notque/vexjoy-agent.

    438 GitHub stars~1.5k tokensUpdated 5 days ago
    Auto-check: notes
  • Codebase Analyzer

    notque/vexjoy-agent

    Statistical rule discovery from Go codebase patterns. An agent skill from notque/vexjoy-agent.

    438 GitHub stars~2k tokensUpdated 5 days ago
    Auto-check: notes
  • Comment Quality

    notque/vexjoy-agent

    Review and fix temporal references in code comments. An agent skill from notque/vexjoy-agent.

    438 GitHub stars~2k tokensUpdated 5 days ago
    Auto-check: notes

Works with

Questions about Jev Design

What does Jev Design do?

Design React interfaces with the full shadcn/ui catalog. An agent skill from notque/vexjoy-agent. Jev Design is an agent skill from notque/vexjoy-agent. Design React interfaces with the full shadcn/ui catalog.

When should I use Jev Design?

Jev Design fits situations like: frontend & Design work in your project.

How do I install Jev Design in Claude Code?

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

How do I install Jev Design in Codex?

Run `npx skills add notque/vexjoy-agent --skill jev-design -a codex`. Or copy the skill folder (skills/frontend/jev-design in notque/vexjoy-agent) into .agents/skills/jev-design in your project. Codex loads it when a task matches its description.

Can I use Jev 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 notque/vexjoy-agent --skill jev-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/jev-design, .gemini/skills/jev-design, .github/skills/jev-design and .opencode/skills/jev-design in your project.

What does Jev Design need to run?

Going by SKILL.md and its folder, Jev Design needs Python for the scripts in its folder and the command-line tools its instructions call (python3 and npx). Our summary lists: Python 3; Node.js.

Does Jev Design access the network?

SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Jev 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. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Jev Design use?

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

About 1.6k tokens (SKILL.md is roughly 6.4k 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 15k tokens, read only when the agent opens those files.

What are the alternatives to Jev Design?

Skills that share tags, products or a category with Jev Design: Web Artifacts Builder (anthropics/skills, 180k stars), UI UX Pro Max (saoudi-h/solar-icons, 184 stars), Creative Tim UI Blocks (creativetimofficial/ui, 12k stars) and Coss (crafter-station/petdex, 4.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Jev Design?

notque (a GitHub user) maintains it in notque/vexjoy-agent, which has 438 GitHub stars. The repository holds 61 skills in this directory. The repository was last updated on October 3, 2026.

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