frontend-design
🎯Skillfrom pbakaus/impeccable
|Skill for creating distinctive, production-grade frontend interfaces with high design quality, guiding AI to commit to bold aesthetic directions and avoid generic AI aesthetics.
Overview
A comprehensive frontend design skill from Impeccable that guides AI towards creating distinctive, production-grade interfaces that avoid generic AI aesthetics. Based on Anthropic's frontend-design skill with expanded coverage across 7 domain-specific reference files including typography, color systems, spatial design, dark mode, animation, and explicit anti-patterns.
Key Features
- Bold aesthetic direction — Guides AI to commit to intentional design choices rather than safe defaults: brutally minimal, retro-futuristic, organic, editorial, art deco, and more
- 7 reference domains — Typography (type scales, font pairing, OpenType), color and contrast (OKLCH, tinted neutrals, accessibility), spatial design, component architecture, dark mode, animation, and iconography
- Anti-pattern library — Explicitly tells the AI what NOT to do to avoid generic LLM template biases like Inter font, purple gradients, and cards nested in cards
- Modular type scales — Fluid sizing with clamp(), variable font weights, proper font loading strategies
- Production-grade output — Generates functional, accessible, visually striking code with cohesive aesthetic point-of-view
Who is this for?
Frontend developers and designers who want AI-generated UI to look distinctive and polished rather than generic. Ideal for anyone building web components, pages, applications, or artifacts who cares about design quality and wants to break free from the default LLM look.
Same repository
pbakaus/impeccable(10 items)
Installation
npx vibeindex add pbakaus/impeccable --skill frontend-designnpx skills add pbakaus/impeccable --skill frontend-design~/.claude/skills/frontend-design/SKILL.mdSKILL.md
More from this repository9
A design skill that amplifies safe or boring designs to make them more visually interesting and stimulating. Uses techniques like dramatic typography scale, bold color choices, asymmetric layouts, and purposeful motion while maintaining usability.
A design skill that adds moments of joy, personality, and unexpected polish to interfaces. Implements micro-interactions, animations, playful copy, and visual surprises like confetti and celebrations to make functional UIs memorable and enjoyable.
A design skill that strips interfaces to their essence by removing unnecessary complexity. Applies ruthless simplification through progressive disclosure, element consolidation, and reduction to the 20% of features that deliver 80% of value.
Tones down visually aggressive or overstimulating designs by reducing intensity while preserving quality. Part of the Impeccable collection, it provides techniques for desaturating colors, softening contrast, refining typography, and calming animations to achieve a more sophisticated aesthetic.
Pushes interfaces past conventional limits with technically ambitious implementations including shaders, spring physics, scroll-driven reveals, and 60fps animations. Part of the Impeccable collection, it provides structured techniques for creating extraordinary browser experiences while maintaining performance and accessibility.
Designs and improves onboarding flows, empty states, and first-run experiences to help users reach value quickly. Part of the Impeccable design skill collection, it provides structured patterns for progressive onboarding, guided setup wizards, interactive tutorials, and contextual hints.
A design skill that improves interface resilience through better error handling, internationalization support, text overflow handling, and edge case management. Tests against extreme inputs, network failures, and i18n scenarios to make UIs production-ready.
Design fluency for AI coding tools. 1 skill, 17 commands, and curated anti-patterns for impeccable frontend design.
A frontend design plugin with 1 skill, 17 steering commands, and curated anti-patterns for impeccable UI design — including typography, color systems, spatial design, dark mode, animation, and explicit anti-patterns to avoid generic LLM template biases.