frontend-ui-ux

frontend-ui-ux is the design skill. Loaded when the work is UI/UX, styling, animation, or layout — typically alongside playwright for browser verification.

Triggers

UI/UX tasks, styling, "design", "responsive", "make this look better".

Design process

1. Purpose — what the screen is for.
2. Tone — brutalist, maximalist, retro-futuristic, luxury, playful — pick an extreme.
3. Constraints — what's fixed (brand, dimensions, supported browsers).
4. Differentiation — what makes this distinct.

Anti-patterns the skill avoids

• Generic fonts (Inter, Roboto, Arial).
• Purple-on-white "AI slop" palettes.
• Predictable layouts, cookie-cutter design.
• Hover states that "just fade."

Pair with

• playwright — verify rendering in a real browser before declaring done.
• task(category: "visual-engineering") — implementation runs on Gemini 3.1 Pro by default.

Source Notes

Aligned with upstream docs/reference/features.md#built-in-skills. The "The Designer (UI Implementation)" combo is the canonical reference for pairing this skill with the visual-engineering category.