<!-- Vendored from Leonxlnx/taste-skill (https://github.com/Leonxlnx/taste-skill), MIT License, (c) 2026 Leonxlnx. -->

Redesign Skill

How This Works

When applied to an existing project, follow this sequence:

1. Scan, Read the codebase. Identify the framework, styling method (Tailwind, vanilla CSS, styled-components, etc.), and current design patterns.
2. Diagnose, Run through the audit below. List every generic pattern, weak point, and missing state you find.
3. Fix, Apply targeted upgrades working with the existing stack. Do not rewrite from scratch. Improve what's there.

Design Audit

Typography

Check for these problems and fix them:

• Browser default fonts or Inter everywhere. Replace with a font that has character. Good options: Geist, Outfit, Cabinet Grotesk, Satoshi. For editorial/creative projects, pair a serif header with a sans-serif body.
• Headlines lack presence. Increase size for display text, tighten letter-spacing, reduce line-height. Headlines should feel heavy and intentional.
• Body text too wide. Limit paragraph width to roughly 65 characters. Increase line-height for readability.
• Only Regular (400) and Bold (700) weights used. Introduce Medium (500) and SemiBold (600) for more subtle hierarchy.
• Numbers in proportional font. Use a monospace font or enable tabular figures (font-variant-numeric: tabular-nums) for data-heavy interfaces.
• Missing letter-spacing adjustments. Use negative tracking for large headers, positive tracking for small caps or labels.
• All-caps subheaders everywhere. Try lowercase italics, sentence case, or small-caps instead.
• Orphaned words. Single words sitting alone on the last line. Fix with text-wrap: balance or text-wrap: pretty.

Color and Surfaces