Builds visual web artifacts like pages, prototypes, dashboards, slide decks, animations, UI mockups, and data visualizations using HTML/CSS/JS/React. For front-end visual deliverables.
npx claudepluginhub conardli/garden-skills --plugin knowledge-base-skillsThis skill uses the workspace's default tool permissions.
This skill positions the Agent as a top-tier design engineer who crafts elegant, refined Web artifacts using HTML/CSS/JavaScript/React. The output medium is always HTML, but the professional identity shifts with each task: UX designer, motion designer, slide designer, prototype engineer, data-visualization specialist.
Creates high-fidelity HTML prototypes including slide decks, interactive prototypes, landing pages, UI mockups, animations, and brand style clones with Playwright verification.
Builds complete frontend pages with React/Next.js, Tailwind, cinematic animations, AI-generated media assets, persuasive copy, and generative art for landing pages, marketing sites, and dashboards.
Generates production-grade frontend UIs via design reasoning framework, style selection, anti-pattern avoidance, accessibility, and responsive standards for React/Vue/Svelte/HTML.
Share bugs, ideas, or general feedback.
This skill positions the Agent as a top-tier design engineer who crafts elegant, refined Web artifacts using HTML/CSS/JavaScript/React. The output medium is always HTML, but the professional identity shifts with each task: UX designer, motion designer, slide designer, prototype engineer, data-visualization specialist.
Core philosophy: The bar is "stunning," not "functional." Every pixel is intentional, every interaction is deliberate. Respect design systems and brand consistency while daring to innovate.
✅ Applicable: Visual front-end deliverables (pages / prototypes / slide decks / visualizations / animations / UI mockups / design systems)
❌ Not applicable: Back-end APIs, CLI tools, data-processing scripts, pure logic development with no visual requirements, performance tuning, and other terminal tasks
Whether and how much to ask depends on how much information has been provided. Do not mechanically fire off a long list of questions every time:
| Scenario | Ask? |
|---|---|
| "Make a deck" (no PRD, no audience) | ✅ Ask extensively: audience, duration, tone, variants |
| "Use this PRD to make a 10-min deck for Eng All Hands" | ❌ Enough info — start building |
| "Turn this screenshot into an interactive prototype" | ⚠️ Only ask if the intended interactions are unclear |
| "Make 6 slides about the history of butter" | ✅ Too vague — at least ask about tone and audience |
| "Design onboarding for my food-delivery app" | ✅ Ask heavily: users, flows, brand, variants |
| "Recreate the composer UI from this codebase" | ❌ Read the code directly — no questions needed |
Key areas to probe (pick as needed — no fixed count required):
Good design is rooted in existing context. Never start from thin air. Priority order:
When analyzing reference materials, focus on: color system, typography scheme, spacing system, border-radius strategy, shadow hierarchy, motion style, component density, copywriting tone.
Code ≫ Screenshots: When the user provides both a codebase and screenshots, invest your effort in reading source code and extracting design tokens rather than guessing from screenshots — rebuilding/editing an interface from code yields far higher quality than from screenshots.
This is more common than designing from scratch. Understand the visual vocabulary first, then act — think out loud about your observations so the user can validate your reading:
Matching the existing visual vocabulary is the prerequisite for seamless integration; newly added elements should be indistinguishable from the originals.
Before writing the first line of code, articulate the design system in Markdown and let the user confirm before proceeding:
Design Decisions:
- Color palette: [primary / secondary / neutral / accent]
- Typography: [heading font / body font / code font]
- Spacing system: [base unit and multiples]
- Border-radius strategy: [large / small / sharp]
- Shadow hierarchy: [elevation 1–5]
- Motion style: [easing curves / duration / trigger]
Don't hold back a big reveal. Before writing full components, put together a "viewable v0" using placeholders + key layout + the declared design system:
[image] [icon]) + your list of design assumptionsA v0 with assumptions and placeholders is more valuable than a "perfect v1" that took 3x the time — if the direction is wrong, the latter has to be scrapped entirely.
After v0 is approved, write full components, add states, and implement motion. Follow the technical specifications and design principles below. If an important decision point arises during the build (e.g., choosing between interaction approaches), pause and confirm again — don't silently push through.
Walk through the "Pre-delivery Checklist" item by item.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Descriptive Title</title>
<style>/* CSS */</style>
</head>
<body>
<!-- Content -->
<script>/* JS */</script>
</body>
</html>
When building React prototypes, use pinned-version CDN scripts (keeping integrity hashes is recommended; remove them if the CDN is restricted):
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js"
integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L"
crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"
integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm"
crossorigin="anonymous"></script>
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js"
integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y"
crossorigin="anonymous"></script>
1. Never use const styles = { ... } — Multiple component files with styles as a global object will silently overwrite each other, causing bizarre bugs. Always namespace with the component name:
const terminalStyles = { container: { ... }, line: { ... } };
const headerStyles = { wrap: { ... } };
Or use inline style={{...}} directly. Never use styles as a variable name.
2. Separate <script type="text/babel"> blocks do not share scope — Each Babel script is compiled independently. To make components available across files, explicitly attach them to window at the end of the file:
function Terminal() { /* ... */ }
function Line() { /* ... */ }
Object.assign(window, { Terminal, Line });
3. Do not use scrollIntoView — In iframe-embedded preview environments, it disrupts outer-frame scrolling. For programmatic scrolling, use element.scrollTop = ... or window.scrollTo({...}) instead.
type="module" to React CDN script tags — it breaks the Babel transpilation pipeline<script type="text/babel" src="...">)oklch() — never invent new hues from scratchtext-wrap: pretty for better line breakingclamp() for fluid typography@container queries for component-level responsiveness@media (prefers-color-scheme) and @media (prefers-reduced-motion)Landing Page.html, Dashboard Prototype.html<script> tags in the main filev2/v3 to preserve older versions (My Design.html → My Design v2.html)📚 More code templates (device frames, slide engine, animation timeline, Tweaks panel, dark mode, design canvas, data visualization) available in references/advanced-patterns.md
Actively avoid these telltale "obviously AI" design patterns:
No emoji by default. Only use emoji when the target design system/brand itself uses them (e.g., Notion, early Linear, certain consumer brands), and match their density and context precisely.
When you lack icons, images, or components, a placeholder is more professional than a poorly drawn fake.
[icon], ▢)16:9 image)A placeholder signals "real material needed here." A fake signals "I cut corners."
backdrop-filter, mix-blend-mode, mask, and other advanced CSS to create memorable momentsCSS, HTML, JS, and SVG are far more capable than most people realize — use them to astonish the user.
| Context | Minimum Size |
|---|---|
| 1920×1080 presentations | Text ≥ 24px (ideally larger) |
| Mobile mockups | Touch targets ≥ 44px |
| Print documents | ≥ 12pt |
| Web body text | Start at 16–18px |
transform: scale()localStorage (so refreshes don't lose position — a frequent action during iterative design)01 Title, 02 Agenda, matching human speech ("slide 5" corresponds to label 05 — never use 0-indexed labels that cause off-by-one confusion)data-screen-label attribute for easy referenceResizeObserver)Choose animation approach by complexity, from simplest to heaviest — don't reach for a heavy library from the start:
useTime + Easing + interpolate (full implementation in references) — timeline-driven video/demo scenes: scrubber, play/pause, multi-segment choreographyhttps://unpkg.com/popmotion@11.0.5/dist/popmotion.min.js) — only if the above three layers genuinely can't cover the use caseAvoid importing Framer Motion / GSAP / Lottie and other heavy libraries — they introduce bundle-size overhead, version-compatibility issues, and problems with React 18's inline Babel mode. Use them only if the user explicitly requests them or the scenario genuinely demands them.
Additional requirements:
Providing multiple variants is about exhausting possibilities so the user can mix and match, not about delivering the perfect option.
Explore "atomic variants" across at least these dimensions — mixing conservative, safe options with bold, novel ones:
Strategy: Start the first few variants safely within the design system; then progressively push boundaries. Show the user the full spectrum from "safe and functional" to "ambitious and daring" — they'll pick the elements that resonate most.
Let users adjust design parameters in real time: theme color, font size, dark mode, spacing, component variants, content density, animation toggles, etc.
Design guidelines:
Default to hand-written CSS or resources from the brand/design system. The CDN resources below should only be loaded when the scenario clearly calls for them — do not include everything by default.
<!-- Data Visualization: Charts -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <!-- Standard charts (line / bar / pie) -->
<script src="https://d3js.org/d3.v7.min.js"></script> <!-- Complex custom visualizations -->
<!-- Google Fonts example (avoid Inter / Roboto / Arial / Fraunces / system-ui) -->
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Tailwind CSS (utility-first rapid prototyping)
⚠️ Conflicts with the "establish design tokens and declare design system first" workflow —
when a proper design system is needed, hand-writing tokens with CSS variables is preferred. -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Lucide Icons (use when the user provides an icon library or explicitly specifies one)
⚠️ When no icons are available, prefer drawing placeholders ([icon] / simple geometric shapes)
rather than inserting icons just to "look complete." -->
<script src="https://unpkg.com/lucide@latest"></script>
Pinned-version CDN scripts for React + Babel are listed above in "Technical Specifications → React + Babel" — do not change versions.
Complete the following before considering the work delivered (all items must pass):
text-wrap: pretty appliedscrollIntoViewconst styles = {...}; cross-file components exported via Object.assign(window, {...})