pbakaus/impeccable
Overview
This skill improves typography by fixing font choices, hierarchy, sizing, weight consistency, and overall readability. It turns default or inconsistent text into intentional, polished type that supports brand voice and usability. Before work begins, it follows the frontend-design Context Gathering Protocol and runs teach-impeccable if no design context exists.
How this skill works
First, the skill audits current typography for weak font choices, unclear hierarchy, arbitrary sizing, poor readability, and inconsistency. It then produces a systematic plan: recommended fonts, a modular type scale, weight roles, spacing rules, and web-font loading strategies. Finally, it applies changes and verifies outcomes against readability, consistency, performance, and accessibility checks.
When to use it
- Interfaces that feel generic or use default system fonts (Inter, Roboto, Arial, etc.)
- Designs with unclear heading/body hierarchy or inconsistent weights and sizes
- Content pages that need fluid, readable headings and stable body text
- Apps where type scale and spacing are arbitrary or break at small screens
- Projects prioritizing accessibility, performance, and reduced layout shift
Best practices
- Run frontend-design’s Context Gathering Protocol before changes; run teach-impeccable if no context exists
- Limit families to 1–2 and weights to 3–4 (Regular, Medium, Semibold, Bold)
- Adopt a modular type scale (e.g., ratio 1.25) and express sizes in rem, not px
- Use fixed rem scales for dense app UIs and clamp() fluid sizing for marketing headings
- Set body >=16px, max-width ≈65ch, and appropriate line-height (body 1.5–1.7; headings 1.1–1.2)
- Optimize web fonts (font-display: swap, metric fallbacks) and load only used weights
Example use cases
- Redesigning a SaaS dashboard to improve scanability and reduce visual noise
- Updating a marketing site so headings scale fluidly while body text remains stable
- Standardizing typography across a product suite to ensure consistent brand voice
- Fixing accessibility issues: low contrast, tiny body copy, or poor line-length
- Reducing CLS by configuring font loading and fallbacks for smoother page load
FAQ
No. Sometimes the current family is fine; the priority is meaningful contrast, consistent weights, and a clear scale. Replace only when the font conflicts with brand personality or readability.
When should I use fluid sizing versus fixed rems?
Use fixed rem scales for app UIs where spatial predictability matters. Use clamp() fluid sizing for marketing or long-form content headings that benefit from responsive scale.
15 skills
This skill analyzes typography and delivers a systematic plan to improve font choice, hierarchy, sizing, and readability for clearer, more intentional text.
This skill helps you inject moments of joy and personality into interfaces, turning functional flows into memorable, delightful experiences that feel
This skill helps you adapt designs to work across mobile, tablet, and desktop, ensuring consistent experiences across contexts and devices.
This skill helps you design and implement distinctive production-grade frontend interfaces with polished aesthetics and creative detail.
This skill strategically colorizes monochromatic designs to improve hierarchy, meaning, and engagement while respecting brand and accessibility.
This skill helps normalize a feature to the design system by aligning typography, colors, spacing, components, and accessibility.
This skill performs a comprehensive audit of accessibility, performance, theming, and responsive design, producing a prioritized issue report with actionable
This skill analyzes and refactors layouts to create intentional rhythm, improving spacing, hierarchy, and visual balance for polished interfaces.
This skill helps you push interfaces beyond conventional limits by applying extraordinary frontend techniques that wow users.
This skill amplifies safe designs by applying distinctive typography, color, and layout choices to create memorable, usable experiences.
This skill evaluates interface design from a UX perspective, delivering actionable feedback on hierarchy, architecture, emotion, and overall quality.
This skill gathers project design context and persists it in your AI config to enforce consistent design guidelines across sessions.
This skill helps identify and extract reusable components, tokens, and patterns from your design system to enable systematic reuse.
This skill helps you apply quiet design principles to reduce visual intensity while preserving impact and usability across interfaces.
This skill helps simplify designs by stripping complexity to reveal the essential elements, accelerating clarity and user focus.
