Skills tagged ui-ux: 51 agent skills for Claude Code
2d-pixel-perfect — Sets up, diagnoses, and fixes pixel perfect 2D rendering in Unity projects. Use when working on any retro-style or pixel art 2D game.
animate — Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool.
animation-vocabulary — Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop.
apple-design — Apple's approach to interface design and fluid, physical motion, translated for the web.
ask-sonner — Guide to Sonner, the React toast library — install and wire up the Toaster, pick the right toast() call, promise and loading toasts, updating.
browse — Drive a real browser through Aside: open a page, read it, click through a flow, take screenshots, check console errors. (gstack)
design-consultation — Design consultation: understands your product, researches the landscape, proposes a complete design system (aesthetic, typography, color, layout, spacing.
design-review — Designer's eye QA: finds visual inconsistency, spacing issues, hierarchy problems, AI slop patterns, and slow interactions — then fixes them. (gstack)
design-shotgun — Design shotgun: generate multiple AI design variants, open a comparison board, collect structured feedback, and iterate. (gstack)
design-style-picker — Batch-generate and compare visual design directions so a user can choose the style they actually want.
emil-design-eng — This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
expo-animation — Framework (OSS). Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate.
expo-design-system — Framework (OSS). Build and maintain a design system inside an Expo app - a reusable theme of design tokens (color, spacing, typography, radius, shadow.
hallmark — Anti-AI-slop design skill for greenfield pages, audits, redesigns, and design extraction from URLs or screenshots.
i-have-adhd — Shape output for a reader with ADHD: lead with the next action, number multi-step work, restate state across turns, suppress tangents.
interaction-design-board — Generate several genuinely different, runnable HTML interaction prototypes for one product surface, combine them in an interactive Design Board.
ios-design-review — Visual design audit for iOS apps on real hardware. (gstack)
localization — Sets up and configures Unity Localization, including locales, String/Asset Tables, CJK font support, and Addressables workflows.
Make Bot UI — Use when building a custom UI (page, dashboard, buttons) that should wake a Grok Bot over a webhook, when the user must provide a webhook sender key.
mobile-native — Make a web app feel native on a phone — the small CSS and meta-tag fixes that separate "a website in a browser" from something that feels installed.
optimize-text-mesh-pro — Covers TextMeshPro font stacks, dynamic fallback atlases, padding and sampling ratios, SDF16, AutoSize discipline, worldspace vs UGUI.
pick-ui-library — Pick the right library for a given frontend task from a curated, opinionated list — numbers, OTP inputs, charts, command menus, virtualization, drag and drop.
plan-design-review — Designer's eye plan review — interactive, like CEO and Eng review. (gstack)
principle-exhaust-the-design-space — Apply when facing a novel UI interaction or architectural decision with no precedent in the codebase.
prototype — Build multiple genuinely different versions of a UI piece you describe.
prototype — Build a throwaway prototype to answer a design question.
review-animations — Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy. Default to flagging; approval is earned.
review-walkthrough — Generates an interactive HTML walkthrough for reviewing code changes. Use only when explicitly called.
seo-sxo — Search Experience Optimization: reads Google SERPs backwards to detect page-type mismatches, derives user stories from search intent signals.
signup — When the user wants to optimize signup, registration, account creation, or trial activation flows.
stitch::generate-design — Generate new screens from text prompts or images, edit existing screens with prompts and design system tokens, and generate design variants using Stitch MCP.
swiftui-expert-skill — Use when writing, reviewing, or refactoring SwiftUI code for iOS or macOS, including state and `@Observable` data flow, view composition, resizable layouts.
swiftui-pro — Comprehensively reviews SwiftUI code for best practices on modern APIs, maintainability, and performance.
ui — Unity UI expert for menus, HUDs, screens, panels, buttons, labels, and all visual interface elements.
ui-designer — Extract design systems from reference UI images and generate implementation-ready UI design prompts.
ui-imgui — Unity IMGUI (Immediate Mode GUI) expert for legacy editor tools using OnGUI/immediate mode.
ui-ugui — Unity uGUI (Canvas-based) UI expert. Understands, edits, and generates Canvas hierarchies, RectTransforms, Layout Groups, and prefab UI.
ui-uitk — Unity UI Toolkit expert for Unity 6.0+. Understands, edits, and generates UXML and USS files with flex-based layouts. Use for requests involving .uxml, .uss.
vue-best-practices — MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar.
vue-testing-best-practices — Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing.