Web Artifacts Builder
anthropics/skills
Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.
Design React interfaces with the full shadcn/ui catalog. An agent skill from notque/vexjoy-agent.
$ npx skills add notque/vexjoy-agent --skill jev-design -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install notque/vexjoy-agent jev-design --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/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-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 "jev-design" agent skill from https://github.com/notque/vexjoy-agent/tree/main/skills/frontend/jev-design into .claude/skills/jev-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "jev-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 install https://github.com/notque/vexjoy-agent/tree/main/skills/frontend/jev-designType 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 notque/vexjoy-agent --skill jev-design -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install notque/vexjoy-agent jev-design --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/notque/vexjoy-agent.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/frontend/jev-design .agents/skills/jev-design && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "jev-design" agent skill from https://github.com/notque/vexjoy-agent/tree/main/skills/frontend/jev-design into .agents/skills/jev-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "jev-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.
$ npx skills add notque/vexjoy-agent --skill jev-design -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install notque/vexjoy-agent jev-design --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/notque/vexjoy-agent.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/frontend/jev-design .cursor/skills/jev-design && 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 "jev-design" agent skill from https://github.com/notque/vexjoy-agent/tree/main/skills/frontend/jev-design into .cursor/skills/jev-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "jev-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 https://github.com/notque/vexjoy-agent.git --path skills/frontend/jev-design--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 notque/vexjoy-agent --skill jev-design -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install notque/vexjoy-agent jev-design --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/notque/vexjoy-agent.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/frontend/jev-design .gemini/skills/jev-design && 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 "jev-design" agent skill from https://github.com/notque/vexjoy-agent/tree/main/skills/frontend/jev-design into .gemini/skills/jev-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "jev-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.
$ gh skill install notque/vexjoy-agent jev-designInstalls 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 notque/vexjoy-agent --skill jev-design -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/notque/vexjoy-agent.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/frontend/jev-design .github/skills/jev-design && 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 "jev-design" agent skill from https://github.com/notque/vexjoy-agent/tree/main/skills/frontend/jev-design into .github/skills/jev-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "jev-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.
$ npx skills add notque/vexjoy-agent --skill jev-design -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install notque/vexjoy-agent jev-design --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/notque/vexjoy-agent.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/frontend/jev-design .opencode/skills/jev-design && 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 "jev-design" agent skill from https://github.com/notque/vexjoy-agent/tree/main/skills/frontend/jev-design into .opencode/skills/jev-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "jev-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.
jev-designDesign 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. 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.
4 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit 5218674. It shows what the files ask for, not the result of running them.
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.
Ships 1 file in scripts/ (Python), which the agent can run.
Shell commands in SKILL.md call:
python3npxFrom the folder's file list and the shell code blocks in SKILL.md.
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.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
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.
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.
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.
The full file from notque/vexjoy-agent at commit 5218674, republished under its MIT licence (© notque). 745 words, ~1,602 tokens.
.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.Each part of the work goes to whoever does it best:
| Phase | Who | Output |
|---|---|---|
| 1. Brief | the agent running the skill | brief.json |
| 2. Pick | Jev, through scripts/plan.py | a component per requirement, a style recipe, install commands, and CSS |
| 3. Compose and build | the agent, with the frontend skill | layout, hierarchy, copy, custom parts, and working code |
| 4. Review | the agent, with any screenshot tool | concrete 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.
Turn the user's request into brief.json. Read references/brief-writing.md for the procedure and a worked example.
{"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. Use only listed names."primitives": "radix" | "base" | "aria" when the project already uses one primitive set.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.cssThe 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:
| Reason | Do |
|---|---|
no_compatible_component | Fix the listed capabilities, or split the requirement. |
low_fitness, none_or_out_of_catalog | Rewrite 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_fitness | Add or change style_traits, and rerun. If it abstains again, pick from --list-capabilities styles yourself. |
jev_unavailable, malformed_response | Use the baseline, check it against each candidate's use_when, and say in your summary that Jev did not pick. |
request_too_large, invalid_request | Shorten the brief or roles as the message says. |
Run the planner at most three times per screen.
Use the frontend skill. Follow this order:
init (if needed), install, and npm exactly as the plan gives them.css into the app's global stylesheet, replacing the existing theme variables. Load fonts.layout_tokens everywhere: the same control height, row height, gap, and section spacing on every part of the screen.item + dropdown-menu, card + chart). Write new markup only when that fails, and reuse the recipe's variables.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.
brief.json, and rerun phase 2.visual-review.md to check by eye, and do not claim visual quality.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
SKILL.md and 7 other files (scripts, references) in skills/frontend/jev-design of notque/vexjoy-agent.
Open the folder on GitHubat commit 5218674
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Jev Design this skillnotque/vexjoy-agent | 438 | — | ~1.6k | Automated safety check: Pass | MIT | |
| Web Artifacts Builderanthropics/skills | 180k | 41 repos | ~769 | Automated safety check: Pass | Apache-2.0 | |
| UI UX Pro Maxsaoudi-h/solar-icons | 184 | 18 repos | ~11k | Automated safety check: Notes | Custom licence | |
| Creative Tim UI Blockscreativetimofficial/ui | 12k | — | ~2.1k | Automated safety check: Notes | MIT | |
| Cosscrafter-station/petdex | 4.2k | — | ~1.4k | Automated safety check: Pass | MIT | |
| Ss Learnbitjaru/styleseed | 972 | — | ~1.3k | Automated safety check: Pass | MIT |
anthropics/skills
Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.
saoudi-h/solar-icons
UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.
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.
crafter-station/petdex
Helps implement coss UI components correctly. An agent skill from crafter-station/petdex.
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…
TheOrcDev/youtube-to-blog
Migrates React projects and components from Radix UI to Base UI.
notque/vexjoy-agent
Deterministic palette/matrix pixel art (not AI). An agent skill from notque/vexjoy-agent.
notque/vexjoy-agent
Pull request lifecycle: commit, codex review, sync, review, fix, status, cleanup, and PR mining.
notque/vexjoy-agent
Improve architecture across modules by deepening interfaces.
notque/vexjoy-agent
Code quality: cleanup, linting, formatting, quality gates. An agent skill from notque/vexjoy-agent.
notque/vexjoy-agent
Statistical rule discovery from Go codebase patterns. An agent skill from notque/vexjoy-agent.
notque/vexjoy-agent
Review and fix temporal references in code comments. An agent skill from notque/vexjoy-agent.
Categories
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.
Jev Design fits situations like: frontend & Design work in your project.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.