UI/UX Design Skills for Claude Code, Codex & AI Agents

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

UI UX Kit

Muhammad Arham Athar

Route UI work by product surface, define a visual concept, implement reusable tokens and states, and document the result in DESIGN_SYSTEM.md.

• ui-design
• ux-design
• design-systems

Design Workshop Facilitation

Brian (slb2248)

Plan and facilitate product-design workshops with agendas, activities, synthesis and follow-up.

• workshops
• product design

Uizze UI Pack

UIZZE

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

• ui design
• frontend

AccessLint Accessibility Skills

AccessLint

Five workflows for rendered-page scanning, interaction inspection, sampled site audits, scoped fixes and accessibility regression checks.

• ux-design
• accessibility

Finding Animation Opportunities

Emil Kowalski

Search a codebase or UI for places that don't animate but should, and reject everything that shouldn't. Read-only; it proposes motion with exact values, it does not implement it. Use when the user asks "what could be animated here?" or wants to "make this feel more alive". For fixing existing animations, use improve-animations or review-animations instead.

• web animation
• ui review

Revenue-Centric Design

Hélio Costa

Review SaaS interfaces through landing-page conversion, checkout, onboarding, retention, pricing, and dashboard design workflows.

• ui-design
• conversion-optimization
• SaaS

User Interface Wiki

Raphael Salaja

UI/UX best practices for web interfaces. Use when reviewing animations, CSS, audio, typography, UX patterns, prefetching, or icon implementations. Covers 11 categories from animation principles to typography. Outputs file:line findings.

• ui design
• reference

Agentation Setup

Benji Taylor, Dennis Jin, Alex Vanderzon

Add the Agentation visual-feedback toolbar to a React or Next.js project, choose manual feedback or MCP sync, and verify the selected connection.

• ui-design
• ux-design
• annotations

Typography Audit

mblode

Audits font loading, type scales, measure, spacing, OpenType, and rendered punctuation with 78 scoped rules. Use when asked to "audit typography", "fix the fonts", or "review my type system". For a new visual direction use ui-design Direction; for general UI defects use ui-design Audit.

• typography
• ui review

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

SwiftUI Interface Design

卓林

Design, refine and review native SwiftUI interfaces with adaptive layouts, coherent navigation, interruptible motion and accessibility checks.

• ui-design
• ux-design
• swiftui

Agentation Self-Driving Review

Benji Taylor, Dennis Jin, Alex Vanderzon

Review a page in a visible desktop browser and add specific design critiques through Agentation, checking that each annotation was saved.

• ui-design
• ux-design
• design-review

Web Design Engineer

ConardLi

Build or redesign polished browser-rendered visual artifacts with HTML/CSS/JavaScript/React: pages, dashboards, prototypes, slide decks, animations, UI mockups, and data visualizations.

• web-design
• ui-design