Design Tools Agent Skills

Frontend Design

Generates distinctive, production-grade frontend interfaces with high design quality and custom aesthetics that avoid generic AI patterns.

Frontend Design Pro

Generates distinctive, production-grade frontend interfaces that avoid generic AI aesthetics through intentional design choices.

Shadcn Component Management

Manages and installs shadcn/ui components directly within Claude Code to accelerate frontend UI development.

Shadcn UI Component Architect

Manages and customizes shadcn/ui components within shared design systems for consistent frontend development.

Reka UI Primitives

Builds accessible, unstyled Vue 3 component primitives using WAI-ARIA compliant patterns and headless architecture.

Design Token Management

Implements and manages scalable design token systems, CSS variable architectures, and multi-platform style pipelines.

User Journey Mapper

Generates comprehensive user and customer journey maps to visualize experiences, identify friction points, and discover product opportunities.

Frontend Design Guidelines Creator

Automates the creation of comprehensive design guidelines and accessibility documentation for frontend projects.

Canvas Design

Generates high-fidelity visual art and design philosophies through a structured two-step creative workflow.

Image Optimization & Performance

Optimizes web images using modern formats, responsive techniques, and automated build pipelines to improve page load times and SEO.

Design System Architect

Generates scalable design systems featuring semantic tokens, accessible component libraries, and comprehensive UI documentation.

Terminal UI Designer

Creates distinctive, production-grade terminal user interfaces with polished aesthetics and advanced layout techniques.

AI Image Generator

Generates high-quality AI images using OpenAI's gpt-image-1 model with customizable artistic themes and aspect ratios.

Nuxt UI v4

Builds production-grade Nuxt v4 applications using a comprehensive suite of 125+ accessible components powered by Tailwind CSS v4.

Web Design Guidelines Auditor

Audits frontend code against industry-standard Web Interface Guidelines to ensure high-quality UX and accessibility compliance.

SAP Fiori Development Tools

Accelerates the creation and configuration of SAP Fiori applications using Fiori Elements, SAPUI5, and OData services.

Collaborative Gemini UI Designer

Delegates complex UI design, frontend prototyping, and CSS styling tasks to Google Gemini through a specialized CLI bridge.

Design Guide Generator

Extracts and documents complete design systems from websites, including typography, color palettes, and interactive component patterns.

MewUI Custom Control Builder

Builds high-performance custom MewUI controls with precise measurement, rendering, and input handling logic.

MewUI Graphics Rendering

Renders custom graphics and UI components in MewUI using the IGraphicsContext API and the three-pass layout pipeline.

MewUI App Development

Builds sophisticated desktop applications using the MewUI framework with a fluent C# API and advanced theming.

Theme Implementer

Implements and tests custom color schemes, visual themes, and branding variants for AI-driven interfaces.

Use Case Generator

Generates complete, industry-specific implementation templates and emotion-driven user journeys for the Emotive Mascot platform.

Design Consistency Auditor

Audits and maintains design system consistency, UX/UI patterns, and accessibility standards across frontend applications.

Theme Factory

Styles artifacts like slide decks and landing pages using professional color palettes and font pairings.

Brand.yml Configurator

Standardizes visual identity across Shiny applications and Quarto documents using machine-readable YAML brand specifications.

React Component Architect

Builds high-performance, accessible, and reusable React and Next.js components for design systems and monorepos.

Table Filter UI Designer

Generates optimized filtering user interfaces for data tables by analyzing column patterns and implementing modern UX standards.

AI Loading UX

Implements specialized UI/UX patterns for AI reasoning, thinking indicators, and progress states to improve user trust and perceived performance.

Accessibility (a11y) Expert

Ensures React and Next.js applications meet WCAG 2.1 AA standards through semantic HTML, ARIA patterns, and comprehensive audits.