Design Tools Agent Skills

Screenshot Design Analyzer

Extracts precise design tokens, component inventories, and layout structures from UI screenshots through a systematic eight-phase analysis.

Design System Architect

Synthesizes multiple visual extractions into a unified, production-ready design system with consistent tokens and components.

User Flow & Interaction Mapping

Transforms static app screenshots into structured interaction flows, navigation architectures, and comprehensive user journeys.

Interface Design

Generates high-craft, domain-specific professional interfaces like dashboards and SaaS tools while avoiding generic AI design patterns.

Frontend Design Architect

Generates distinctive, production-grade frontend interfaces that prioritize high-end aesthetics and unique design systems over generic patterns.

AI Image Generation

Generates professional-quality AI images and UI assets directly within your development workflow using Pollinations.ai.

Multicultural Holidays Expert

Manages inclusive, data-driven holiday configurations and themes to ensure cultural accuracy and sensitivity in web applications.

Inspira UI for Vue and Nuxt

Streamlines the implementation of over 120 animated Vue and Nuxt components using TailwindCSS v4, motion-v, and Three.js.

Design Exploration

Explores diverse UI/UX design approaches by generating interactive galleries for side-by-side comparison of interaction models and visual styles.

AutoAnimate Zero-Config

Simplifies adding smooth, production-ready animations to React components with zero configuration and minimal overhead.

Rapid Design Prototyper

Generates high-fidelity, single-file design variations with externalized controls for rapid UI/UX exploration.

Image Sprout

Generates and manages images with consistent style and subject identity using reusable project context.

Rails ViewComponents

Builds modern, component-based Ruby on Rails user interfaces using ViewComponent, Turbo, and Stimulus.

Frontend Design Professional

Generates distinctive, production-grade frontend interfaces that avoid generic AI aesthetics in favor of high-fidelity, custom designs.

V-Style Design System

Implements professional UI/UX design standards and production-grade CSS frameworks to create beautiful, accessible web interfaces.

Gran Maestro Picks

Manages UI element captures and converts natural language design requests into actionable implementation plans.

Mobile-First Design

Implements responsive, performance-focused web interfaces starting from mobile screens with progressive enhancement for larger devices.

Tailwind v4 + shadcn/ui Stack

Standardizes production-ready React setups using Tailwind CSS v4, shadcn/ui, and Vite with automatic dark mode support.

Design Review

Performs systematic 7-phase frontend design audits covering accessibility, responsiveness, and visual polish.

AI Elements Chatbot

Simplifies the creation of production-ready AI chat interfaces using shadcn/ui and Vercel AI SDK v5.

AI SDK UI Hooks

Implements high-performance React hooks for Vercel AI SDK v5 to build streaming chat interfaces and structured data UIs.

Base UI React Components

Streamlines the implementation of accessible, unstyled React components using MUI Base UI and Floating UI positioning.

TanStack Table & Data Grids

Builds high-performance, headless data tables with server-side pagination, filtering, and sorting for React and Cloudflare environments.

Thesys Generative UI

Generates production-grade React components and type-safe generative user interfaces from natural language prompts.

Aceternity UI Components

Empowers Claude to implement over 100 high-performance, animated React components using Aceternity UI for Next.js and Tailwind projects.

shadcn-vue for Claude Code

Implements accessible, production-ready UI components in Vue and Nuxt applications using Reka UI and Tailwind CSS.

Frontend Design Pro

Creates distinctive, production-grade frontend interfaces with high-end aesthetic quality and creative UI design patterns.

UI Design Standards & Constraints

Enforces opinionated constraints and best practices for building accessible, high-performance web interfaces using Tailwind CSS and modern React primitives.

GPUI Development Patterns

Provides standardized UI patterns and implementation guides for building high-performance Rust applications with the GPUI framework.

WPF UI Fluent Integration

Integrates the Wpf.Ui library to build modern, Fluent Design-inspired Windows desktop applications using WPF and .NET.