Frontend Design

If you're tired of Claude defaulting to Inter and purple gradients, this skill might save you some frustration. It pushes Claude to commit to bold aesthetic directions before writing code, whether that's brutalist minimalism or maximalist chaos. The instructions emphasize production-grade implementation with distinctive typography, cohesive color systems, and animations that actually matter. It specifically calls out common AI design clichés to avoid and encourages unexpected choices like asymmetric layouts, texture layering, and creative motion design. Works across vanilla HTML/CSS/JS, React, and Vue. The core idea is simple: make Claude think like a designer with a point of view instead of a template generator.

Install to Claude Code

npx -y skills add mrgoonie/claudekit-skills --skill frontend-design --agent claude-code