UI Design Agent Skills

Scans a codebase to extract design tokens, typography, colors, spacing, and brand patterns, then writes a Design Context section to CLAUDE.md without asking questions.

Runs a headless-Chromium sweep at phone/tablet widths to catch off-screen overflow, tiny touch targets, clipped text, and oversized modals, then reports each offender with a screenshot and a concrete fix.

Provides a frontend design mode for strong visual direction, UI polish, redesigns, landing pages, and production-grade interface work, including shadcn-based surfaces.

Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases.

Performs a meticulous final pass on frontend work, checking visual alignment, typography, color contrast, interaction states, micro-interactions, content, icons, forms, edge cases, responsiveness, performance, and code quality to elevate work from shipped to polished.

Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight.

Simplify UI designs by removing unnecessary complexity, clarifying hierarchy, and focusing on essential elements.

Identifies reusable UI patterns, components, and design tokens, then extracts and consolidates them into a design system for systematic reuse.

Refines overly bold or aggressive designs into a calmer, more sophisticated aesthetic while preserving effectiveness and usability.

Applies curated color palettes and font pairings to style artifacts such as slide decks, docs, and landing pages, with 10 preset themes and the ability to generate custom themes on demand.

Guides distinctive, intentional visual design for new or existing UI, covering aesthetic direction, typography, and avoiding templated defaults.

Routes UX, UI, accessibility, and onboarding design tasks to specialized sub-skills, applying behavioral science and WCAG 2.1 AA standards.

Builds narrative-driven HTML slide decks for pitches, briefings, demos, and talks, applying persuasion frameworks and design tokens.

Creates digital banners for social, display, hero, and email formats, applying behavioral science principles to maximize attention and conversion.

Builds and governs design systems with a three-layer token architecture, component specs, and design-to-code handoff, including slide generation.

Orchestrates cross-domain design work by dispatching to specialized design sub-skills and applying behavioral science frameworks for audits, critiques, and strategy.

Provides a curated library of design references covering typography, color systems, component patterns, animation, accessibility, and critique frameworks, plus a catalog of 59 brand design systems for UI generation.

Applies WCAG accessibility guidelines to structure analysis, decision-making, and recommendations for design and user experience contexts.

Audits product flows to find delight opportunities, then specifies micro-interactions, animations, and usability risk assessments that balance playful design with functional clarity.

Creates walkthrough videos from Stitch project screens using Remotion, with transitions, zoom effects, and text overlays.

Implements accessible, performant animations and transitions in React/Next.js apps using Motion, with tokens, reduced-motion support, and device adaptation.

Generates 2-3 disposable HTML mockups for comparing UI design directions before committing to one.

Author, lint, diff, and export Google's DESIGN.md design token spec files, including WCAG contrast validation.

Guides CLI/API agents through a design process for one-off HTML artifacts like landing pages, prototypes, and decks, emphasizing context gathering and verification.

Escreve microcopy de interface — mensagens de erro, estados vazios, tooltips, rótulos de botão, onboarding e notificações, com foco em clareza e acessibilidade.

Enforces a canonical UI/UX ruleset with 14 sections and 70+ prioritized rules (P0–P3) for implementing, reviewing, or auditing UI components, referencing tokens from a theme reference.

Cria peças únicas de feed (quote card, card de dado, capa, anúncio estático) com hierarquia visual e boas práticas de design, integrando-se ao Figma para montagem e screenshot.

Cria peças verticais 9:16 (story, reels, shorts, TikTok) respeitando as áreas seguras da interface do app, com guias, legendas acessíveis e verificação por screenshot.

Design precise, production-grade enterprise UI — dashboards, admin panels, SaaS interfaces, and data-heavy applications. Use this skill for professional software interfaces that need Jony Ive-level craft: clean, minimal, functional, with intentional personality. Do NOT use for creative landing pages, marketing sites.

Organiza, compara e seleciona variações de imagens geradas, publicando uma grade de comparação como Artifact para aprovação do time, com critérios de avaliação e registro de decisões.

Audita criativos antes da aprovação, verificando contraste, legibilidade, área segura, hierarquia, aderência ao brand kit e conformidade, com veredito de aprovação, ajuste ou reprovação.

Runs a UI redesign experiment by creating three git worktree branches for modern minimal, bold creative, and classic refined design directions, then implements and compares each approach.

Applies curated color palettes and font pairings to presentation slide decks and other artifacts, with ten pre-set themes and the ability to generate custom themes on demand.

Builds distinctive, production-grade frontend interfaces with bold aesthetic direction, avoiding generic AI design patterns.

Audits a page or component against the Digital Curator design spec and movemental conventions, checking visual quality, accessibility, token compliance, and consistency before shipping.

Improves typography by fixing font choices, hierarchy, sizing, weight consistency, and readability, making text feel intentional and polished.