Frontend Design
Create distinctive, production-grade frontend interfaces with high design quality. Use when building web components, pages, artifacts, posters, or applications. Generates creative, polished UI code that avoids generic AI aesthetics.
This skill ships only metadata — no inline instructions. See the source repo for details.
SKILL.md source
--- name: frontend-design description: Create distinctive, production-grade frontend interfaces with high design quality. Use when building web components, pages, artifacts, posters, or applications. Generates creative, polished UI code th ---
Want the full curated bundle?
Get every Claude Skill we've vetted — packaged, ready to drop into your project, plus install scripts and updates.
Related skills 6
Web Artifacts Builder
Build self-contained interactive web artifacts (single-file HTML+CSS+JS apps) like calculators, visualisers, mini-tools and demos. Use when the user wants a runnable web artifact rather than a full project.
shadcn/ui
Use shadcn/ui components correctly in Next.js / React projects: install the right primitives, follow the radix patterns, theme via CSS variables. Use when the user is building a polished React app.
Algorithmic Art
Generate algorithmic and generative art with HTML5 Canvas, SVG, p5.js patterns and shaders. Use when the user wants creative coding, generative visuals, or mathematical art.
Theme Factory
Generate cohesive design themes (color palettes, typography, spacing scales) and apply them as design tokens across a codebase. Use when the user wants to rebrand, retheme, or unify styling.
Brand Guidelines
Apply and enforce brand guidelines across designs and content: voice, tone, color, type, logo placement, and asset rules. Use when the user references a brand, style guide, or visual identity.
Canvas Design
Design visual canvases including posters, social cards, illustrations, and graphics using HTML/CSS/SVG. Use when the user asks for visual design output other than code-driven web UIs.