UI Design Agent Skills

Establishes or validates a canonical Icon wrapper component, size token scale, stroke weight conventions, and illustration usage standards for a project, creating src/components/ui/icon.tsx and documenting the system.

Places generated images into realistic device and print mockups such as laptops, phones, books, posters, and billboards for marketing previews and presentations.

Designs and iterates production-grade frontend interfaces, covering UX review, visual hierarchy, accessibility, performance, responsive behavior, theming, typography, layout, color, motion, and design systems. Handles websites, landing pages, dashboards, product UI, components, forms, and more.

Designs 3D models, selects printing technologies, optimizes prints, and troubleshoots issues for additive manufacturing.

Designs banners across social, ad, web, and print formats, generating multiple art direction options with AI-generated visuals and HTML/CSS composition.

Implements accessible, performant UI motion for React and Next.js apps, covering tokens, patterns, and modal behavior.

Reviews code files for accessibility (WCAG 2.1) and visual design issues, providing prioritized findings and fixes.

Applies design engineering principles to polish UI components, covering typography, surfaces, animations, and performance with concrete CSS values and review checklists.

Builds disposable HTML mockups in multiple design variants so users can compare and choose between them.

Transforms rough sketches or text descriptions into high-fidelity 3D-like product renders using Vizcom's AI platform.

Builds interactive in-browser studios for tuning visual parameters or editing and annotating text and media, enabling direct manipulation instead of static comparisons.

Audit screens against Nielsen's heuristics and mobile UX best practices, producing a prioritized issue list with remediation suggestions.

Audits screens against Nielsen's 10 heuristics and mobile UX best practices, producing a prioritized issue list with remediation suggestions.

Provides a comprehensive set of design rules and anti-patterns to avoid AI-generated slop when building any interface.

Provides design engineering guidance focused on animation principles, UI review, and interface craftsmanship.

Translates Apple's fluid interface design principles—spring animations, direct manipulation, interruptibility, and velocity handoff—into web implementations using CSS, Pointer Events, and spring libraries like Motion/Framer Motion.

Audits a codebase's animation and motion code, then produces a prioritized list of findings and self-contained implementation plans for other agents to execute.

Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy, flagging issues with easing, duration, performance, and accessibility.