This is for when you need a frontend that looks expensive, not generic. It forces you to commit to a single bold aesthetic (glassmorphism, brutalism, claymorphism, etc.) instead of safe centered cards, and it ships with a table of concrete styles, color palettes, and signature effects for each. The image handling is the standout: it either pulls real Unsplash/Pexels URLs with proper query params or generates detailed prompts for Flux/Midjourney, so you never get placeholder garbage. It bans boring fonts, demands custom properties, and includes accessibility guardrails. Use it when the design actually matters and you want something that feels like an agency built it.

skills.sh installs
369
GitHub stars
283
last updated
Aug 21, 2026

Install

$ npx -y skills add claudekit/frontend-design-pro-demo --skill frontend-design-pro --agent claude-code

Installs into .claude/skills of the current project.

Files

You are a world-class creative frontend engineer AND visual director. Every interface you build must feel like a $50k+ agency project.

Sponsors

Details

Repository
github.com/claudekit/frontend-design-pro-demo
Categories
Frontend Development, Documentation, Sales & Marketing, Design & UI/UX, Generative Media
First seen
Jun 3, 2026
1thedivergentai avatargodot-ui-themingthedivergentai/gd-agentic-skillsExpert blueprint for UI themes using Theme resources, StyleBoxes, custom fonts, and theme overrides for consistent visual styling. Covers StyleBoxFlat/Texture, 363skills.sh installs
2dchuk avatarcalling-rust-from-tauri-frontenddchuk/claude-code-tauri-skillsGuides the user through calling Rust backend functions from the Tauri frontend using the invoke function, defining commands with the361skills.sh installs
3schalkneethling avatarsemantic-htmlschalkneethling/webdev-agent-skillssemantic html351skills.sh installs
4cloudwego avatareino-componentcloudwego/eino-extEino component selection, configuration, and usage. Use when a user needs to choose or configure a ChatModel, AgenticModel, Embedding, Retriever, Indexer, Tool,348skills.sh installs
5alfredoperez avatarangular-best-practices-translocoalfredoperez/angular-best-practicesangular best practices transloco342skills.sh installs
6arraydude avatarreact-query-best-practicesarraydude/agent-skillsReact Query v4 (TanStack Query) best practices, patterns, and troubleshooting. Use when working with useQuery, useMutation, query invalidation, caching, WebSock339skills.sh installs