Codex native
OK
👍 0 · Vote
web-design-engineer
A front-end design skill whose output is always HTML (pages, dashboards, prototypes, slides, data visualization). It starts with a design-direction step and ships 25 style recipes. Instructions only, no scripts.
- Source
- ConardLi/garden-skills
- Path
skills/web-design-engineer· SKILL.md- Pinned commit
2b9a89340b- License
- MIT
Each prompt shows a fixed 2×2: Codex native, Codex + skill, Claude Code native, Claude Code + skill. Click a screenshot to see the full page. Install and use ↓
Strengths
What the skill's own documentation says it is good at, with a link to where it says so. These are claims, not results: compare them with the pages below.
- Polished browser-rendered visual artifacts with HTML/CSS/JavaScript, including pages, dashboards and data visualizations source
- Aims for "stunning", not just "functional" source
- Declares a design system before building, with an anti-cliché checklist and 25 style recipes source
Test scope: SaaS landing page, Data dashboard, Personal blog and portfolio. Prompts outside this list are marked “Out of scope”, not pending.
Checked against the skill text after the v0 runs (not decided in advance); the text names all three page types.
SaaS landing page
landing-saas
Data dashboard
dashboard
Personal blog and portfolio
blog-portfolio
Install and use
Project-level install: copy the skill folder (the one that contains SKILL.md) into your project at the pinned commit. The gallery runs installed it the same way.
Claude Code
Install
Copy the folder to <project>/.claude/skills/web-design-engineer/.
git clone https://github.com/ConardLi/garden-skills.git /tmp/web-design-engineer-src
git -C /tmp/web-design-engineer-src checkout 2b9a89340b70f632d31c0f1c69fce94a7912423e
mkdir -p .claude/skills
cp -R /tmp/web-design-engineer-src/skills/web-design-engineer .claude/skills/web-design-engineerUse
# interactive
/web-design-engineer <your task>
# or end any request with
Use the web-design-engineer skill.
# headless, as in the gallery runs
claude -p '<your task> Use the web-design-engineer skill.'To make it available in every project, put the folder in ~/.claude/skills/web-design-engineer/ instead. Claude Code can also load the skill by itself when a request matches the skill's description.
Codex
Install
Copy the folder to <project>/.agents/skills/web-design-engineer/.
git clone https://github.com/ConardLi/garden-skills.git /tmp/web-design-engineer-src
git -C /tmp/web-design-engineer-src checkout 2b9a89340b70f632d31c0f1c69fce94a7912423e
mkdir -p .agents/skills
cp -R /tmp/web-design-engineer-src/skills/web-design-engineer .agents/skills/web-design-engineerUse
# interactive: mention it, or pick it from /skills
$web-design-engineer <your task>
# headless, as in the gallery runs
codex exec -s workspace-write '<your task> Use the $web-design-engineer skill.'To make it available in every project, put the folder in ~/.agents/skills/web-design-engineer/ instead. Codex can also pick the skill by itself, based on its description.
Notes
- Takes the place of OpenAI's frontend-skill in v0, because that skill was removed from OpenAI's official catalog and readers can no longer install it.
- Its React path loads React and Babel from a CDN; the default hand-written CSS path needs no network.
Metadata: skills/web-design-engineer/meta.yaml · Copyright (c) 2026 (no name given; attribute to ConardLi/garden-skills)