Agent skill · design visual · aradotso
garden-skills-web-design-engineer
garden-skills-web-design-engineer — an agent skill for coding agents.
Why this skill is useful
Adds a structured six-step workflow and a pattern library for advanced UI design that the AI cannot generate on its own.
What it needs
Requires git installed locally. About 9k tokens when loaded. Last updated 2026-07-09. 70 stars on the source repository.
What this skill does
your-project/ ├── .agents/skills/web-design-engineer/ │ ├── SKILL.md │ └── references/ │ └── advanced-patterns.md └── ... your-project/ ├── .claude/skills/web-design-engineer/ │ ├── SKILL.md │ └── references/ │ └── advanced-patterns.md └── ... bash git clone https://github.com/ConardLi/garden-skills.git tmpgarden mkdir -p .agents/skills/web-design-engineer/references cp tmpgarden/.agents/skills/web-design-engineer/SKILL.md .agents/skills/web-design-engineer/ cp tmpgarden/.agents/skills/web-design-engineer/references/advanced-patterns.md .agents/skills/web-design-engineer/references/ rm -rf tmpgarden 1. Understand requirements → Ask only when information is insufficient 2. Gather design context → Examine existing code/screenshots; never start from nothing 3. Declare design system → Colors, fonts, spacing, motion — written in Markdown before any code 4. Show v0 draft early → Placeholders + layout + tokens; allow course correction 5. Full build → Components, states, motion; pause at key decision points 6. Verify → Pre-delivery checklist: no console errors, no rogue hues markdown Design System Colors (oklch) Primary: oklch(55% 0.18 265) / blue-violet / Surface: oklch(98% 0.005 265) / near-white with hue tint / On-surface: oklch(18% 0.02 265) / near-black / Accent: oklch(72% 0.14 145) / muted green / Typography Display: "Space Grotesk", sans-serif — weights 400 600 700 Body: "Inter", sans-serif — weights 400 500 Mono: "JetBrains Mono", monospace — weight 400 Spacing scale (rem) 0.25 / 0.5 / 0.75 / 1 / 1.5 / 2 / 3 / 4 / 6 / 8 / 12 Motion Easing: cubic-bezier(0.16, 1, 0.3, 1) Duration: 150ms micro / 300ms element / 600ms page css :root { / Primary scale — same lightness steps, perceptually consistent / --color-primary-900: oklch(25% 0.18 265); --color-primary-700: oklch(40% 0.20 265); --color-primary-500: oklch(55% 0.22 265); / base / --color-primary-300: oklch(72% 0.16 265); --color-primary-100: oklch(93% 0.05 265); / Surface tokens / --color-surface: oklch(98% 0.005 265) …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aradotso/garden-skills-web-design-engineer