Frontend Design Skills for Claude Code, Codex & AI Agents

Baseline UI

ibelick

Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass.

• ui design
• frontend

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

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