The frontend-design skill guides you in creating distinctive, production-grade frontend interfaces that avoid generic “AI slop” aesthetics. Use this skill when building web components, pages, artifacts, or applications that require exceptional design quality.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/pbakaus/impeccable/llms.txt
Use this file to discover all available pages before exploring further.
Purpose
This skill helps you implement real working code with exceptional attention to aesthetic details and creative choices. It focuses on creating interfaces that are:- Production-grade and functional - Working code, not just mockups
- Visually striking and memorable - Interfaces that stand out
- Cohesive with a clear aesthetic point-of-view - Intentional design direction
- Meticulously refined in every detail - Polished execution
Design Direction Framework
Before implementing any interface, commit to a BOLD aesthetic direction by answering:- Purpose: What problem does this interface solve? Who uses it?
- Tone: Pick an extreme aesthetic—brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc.
- Constraints: Technical requirements (framework, performance, accessibility)
- Differentiation: What makes this UNFORGETTABLE? What’s the one thing someone will remember?
Bold maximalism and refined minimalism both work—the key is intentionality, not intensity. Choose a clear conceptual direction and execute it with precision.
Core Design Areas
The skill provides detailed guidance across eight design disciplines:Typography
Choose distinctive fonts, create visual hierarchy, and implement fluid type scales. Avoid overused fonts like Inter, Roboto, and system defaults.Color & Contrast
Use modern color functions (OKLCH), create cohesive palettes, and implement accessible dark mode. Avoid the AI color palette: cyan-on-dark and purple-to-blue gradients.Spatial Design
Create visual rhythm through varied spacing, embrace asymmetry, and break the grid intentionally. Avoid wrapping everything in cards and identical card grids.Motion Design
Use motion to convey state changes with exponential easing. Avoid bounce/elastic effects and animating layout properties.Interaction Design
Design all interactive states, implement progressive disclosure, and make optimistic UI updates. Avoid removing focus indicators and generic error messages.Responsive Design
Use container queries for component-level responsiveness and adapt interfaces for different contexts. Don’t just shrink desktop layouts.UX Writing
Write specific, helpful copy with clear action labels. Avoid generic buttons like “OK” and “Submit.”The AI Slop Test
A distinctive interface should make someone ask “how was this made?” not “which AI made this?” Review the DON’T guidelines in each reference section—they are the fingerprints of AI-generated work from 2024-2025.Implementation Principles
Match implementation complexity to the aesthetic vision:- Maximalist designs need elaborate code with extensive animations and effects
- Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details