Frontend Design Skills for Claude Code, Codex & AI Agents

Refactoring UI Design System

wondelai

Audit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off" (or amateur/unprofessional), "fix the design", "Tailwind styling", "color palette", "visual hierarchy", "design system", "spacing scale", or "component styling". Also trigger when building consistent design tokens, creating dark mode themes, improving data-visualization clarity, or polishing UI details before launch. Covers grayscale-first workflow, constrained design scales, shadows, and component styling. For typeface selection, see web-typography. For usability audits, see ux-heuristics.

• ui design
• frontend

Image to UI by Uizze

UIZZE

Implement an interface from a screenshot or mockup and compare the rendered result with the reference.

• frontend
• image to code

Vue Best Practices

vuejs-ai community

Apply Vue 3 component, reactivity and SSR guidance in a Vue project.

• vue
• frontend

UI Craft

educlopez

Use for UI design and implementation work to avoid generic AI-looking interfaces. Provides anti-slop rules, a required discovery phase before coding, and guidance for layout, typography, color, motion, accessibility, dashboards, tables, landing pages, theming, and polish. Trigger when editing UI code or reviewing and refining components, pages, screens, layouts, animations, responsive behavior, or design systems.

• ui design
• frontend

Vite

Anthony Fu

Work with Vite configuration, plugins, server-side rendering and library builds.

• vite
• frontend

Vue

Anthony Fu

Use Vue component, reactivity and Composition API references.

• vue
• frontend

Audit AI Design Slop

Meng To

Audit websites, apps, screenshots, mockups, and design code for harmful AI-design clichés, generic generated defaults, and established UI defects. Use when the user wants evidence-backed design feedback, an anti-slop review, or a removal-first cleanup plan without a speculative redesign.

• ui review
• design quality

Anti-slop check

Gesso

Deterministic design critique for HTML/CSS screens. Runs 73 slop guards extracted from the set of rules professional designers use in production-grade designs to catch the tells that make UI read as AI-generated (gradient-clipped headlines, the default indigo accent, puffy shadows, emoji icons, fake dot charts and decorated gauges, badges floated over the hero, eyebrow kickers above the H1, fake magazine mastheads, colored edge-stripe rails, two-tone headlines, over-designed list rows, layout-collapse bugs, em-dash copy, placeholder imagery), auto-fixes what can be safely rewritten, and reports the rest with concrete edits. Use whenever generated or hand-written HTML/CSS is about to be shown, exported, shipped, or committed, or when asked to critique a design, check it for slop, or give a second opinion on a generated screen.

• ui review
• design quality

Design Engineering

Emil Kowalski

This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.

• ui design
• frontend

Tailwind 4 Docs

Lombiq Technologies

Work with Tailwind CSS v4 using a locally synchronized documentation snapshot, migration notes and implementation guidance.

• tailwind css
• frontend

Uizze UI Pack

UIZZE

Improve UI using a project’s existing components, design tokens and assets, with optional Uizze references.

• ui design
• frontend

Feature-Sliced Design

Feature-Sliced Design

Organize frontend code with Feature-Sliced Design v2.1, from placement and import boundaries to framework integration.

• frontend
• architecture

Astro Usage Guide

astrolicious

Build Astro pages and components, configure adapters and use the framework's development commands.

• astro
• frontend

Improve UI

ibelick

Audit an existing product surface against its own design evidence, identify verified UI problems, and write self-contained implementation plans for another agent. Strictly read-only on product source. Use when asked to review, refine, improve, or clean up an interface without replacing its identity; investigate design-system drift; or prepare a design handoff.

• ui review
• frontend

svelte-core-bestpractices

Svelte

Guidance on writing fast, robust, modern Svelte code. Load this skill whenever in a Svelte project and asked to write/edit or analyze a Svelte component or module. Covers reactivity, event handling, styling, integration with libraries and more.

• svelte
• frontend