aaaronmiller

Frontend Design Masterclass — Design skill for Claude Code

Design community

Frontend-design SKILL.md file for svelte 5 + shadcn/ui + bun + hono stack.

How to install Frontend Design Masterclass

This entry records only its repository, not the path inside it, so there is no exact command to give. Open aaaronmiller/frontend-design-masterclass and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Frontend Design Masterclass does

Frontend-design SKILL.md file for svelte 5 + shadcn/ui + bun + hono stack.

Alternatives in Design

Frontend Design — Create distinctive, production-grade frontend interfaces with high design quality 94.1k ★
Od Contribute — Open a first-contribution PR (or bug issue) on nexu-io/open-design — works for non-coders too 91.8k ★
Export Diagram — Export a diagram-design HTML file to .svg and .png next to the source 27.2k ★

README

Frontend Design Masterclass

A Claude Code / CLI-agent **skill** that builds distinctive, high-performance frontend UI — not generic boilerplate.

![Skill](https://img.shields.io/badge/Claude%20Code-Skill-8b5cf6?style=for-the-badge&logo=anthropic&logoColor=white) ![Svelte](https://img.shields.io/badge/SvelteKit%205-FF3E00?style=for-the-badge&logo=svelte&logoColor=white) ![Bun](https://img.shields.io/badge/Bun-000?style=for-the-badge&logo=bun&logoColor=white) ![Hono](https://img.shields.io/badge/Hono-E36002?style=for-the-badge&logo=hono&logoColor=white) ![Tailwind](https://img.shields.io/badge/Tailwind%20v4-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white) ![MIT](https://img.shields.io/badge/License-MIT-green?style=for-the-badge)

A portable `SKILL.md` package that teaches an AI agent to design interfaces that **resonate, not just render** — enforcing bold, intentional design with a modern, opinionated stack. Triggers on web pages, dashboards, landing pages, apps, styling, theming, fonts, animations, charts, and dark/light modes.

Stack it enforces

Layer	Choice
Framework	SvelteKit 5 with Runes (`$state`, `$derived`, `$effect`)
Runtime	Bun
Backend / API	Hono (edge-first routes & middleware)
UI primitives	shadcn-svelte (headless — overrides all defaults)
Charts	LayerChart (Layer Cake)
Animation	Svelte Motion + native `svelte/transition` & `svelte/animate`
Diagrams	beautiful-mermaid (themed SVG, Shiki-compatible)
Styling	Tailwind CSS v4 + CSS custom properties
Testing	Playwright visual regression
Deploy	`adapter-static` / `adapter-vercel`

How it works

**Intent identification** — classifies each request across three dimensions before loading any reference, so the right design language is applied.
**Progressive disclosure** — pulls only the reference docs it needs from [`references/`](references/):

`color-system` · `typography`