frontend-design

A frontend design skill for Claude Code that builds hot, sleek, sexy, usable, fun, and addictive interfaces.

Dark-first themes, terminal-inspired typography, neon accents, tactile micro-interactions, and visual discovery patterns — distilled from real projects into a reusable skill.

Install

npx skills add mager/frontend-design

What it does

• Generate new UI — Describe what you want and get components/pages in this style
• Restyle existing code — Point it at your frontend and it'll apply the aesthetic
• Design guidance — Ask for feedback and get opinionated direction

The aesthetic

• Dark mode by default (rich blacks, not gray)
• JetBrains Mono + Space Grotesk typography
• Neon accent colors — cyan, purple, lime, gold, coral
• Tactile hover interactions (lifts, glows, border transitions)
• Visual discovery layouts (masonry walls, bento grids, dense scrollable content)
• CSS custom properties for contextual theming
• Mobile-first, always

Tech stack

Adapts to whatever framework you're using. When starting fresh, prefers Astro, SvelteKit, or Next.js with custom CSS. Never suggests Bootstrap.

License

MIT