Design Tools Agent Skills

Frontend Component Generator

47

Generates production-ready React and Vue components complete with TypeScript interfaces, unit tests, and scoped styling.

Product Design & Figma Handoff

47

Automates the Figma-to-code handoff process by extracting design tokens, mapping components, and generating phased implementation plans.

Web Interface Guidelines Auditor

46

Audits web application code for compliance with modern interface guidelines, accessibility standards, and UX best practices.

Frontend Accessibility

45

Ensures user interfaces meet established accessibility standards through guided coding practices and inclusive design patterns.

Frontend Responsive

45

Implements responsive design patterns and mobile-first layouts according to established frontend coding standards.

Frontend Components

45

Enforces standardized coding patterns and implementation guidelines for building consistent, high-quality frontend components.

Frontend CSS

45

Enforces standardized coding practices and implementation patterns for frontend styling to ensure consistent and maintainable CSS.

AI Draw.io Diagram Generator

45

Generates professional draw.io flowcharts and architecture diagrams from natural language with instant browser previews.

Tailwind CSS Styling Patterns

44

Streamlines frontend development using utility-first CSS patterns for responsive, high-performance web interfaces.

Shadcn/UI Design System

44

Streamlines the implementation of accessible, high-quality React components using shadcn/ui, Radix UI, and Tailwind CSS.

Professional UI Constraints

42

Enforces opinionated, high-performance, and accessible UI development patterns for frontend agents.

Brand.yml Identity Manager

42

Standardizes brand identity across Shiny applications and Quarto documents using a unified YAML configuration.

TouchDesigner Guide

42

Streamlines TouchDesigner network development by providing standardized patterns for operator creation, data conversion, and GLSL shading.

Nano Banana Prompting

40

Crafts optimized image generation prompts for Nano Banana Pro using structured techniques and visual reference analysis.

Nano Banana

40

Generates high-quality AI images and executes specialized Python scripts using inline dependency management and Gemini models.

Theme Factory

40

Applies professional color palettes and font pairings to digital artifacts like presentations, documents, and landing pages.

Frontend Design

40

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

Professional UI Design & Polish

40

Enforces opinionated constraints and best practices for building accessible, high-performance, and visually consistent user interfaces.

Tailwind Responsive Design System

39

Implements fluid, mobile-first responsive layouts using Tailwind CSS breakpoints and modern container queries.

Tailwind CSS Utility Classes

39

Accelerates UI development by providing specialized guidance on Tailwind CSS utility-first patterns, responsive design, and state management.

Vue Component Patterns

39

Implements professional Vue 3 component architectures including type-safe props, emits, slots, and dependency injection.

Ink Component Patterns

39

Builds professional terminal user interfaces using React-based Ink patterns and best practices.

React Performance Optimizer

39

Optimizes React applications by implementing advanced memoization, code splitting, list virtualization, and rendering strategies.

Storybook Component Documentation

39

Generates comprehensive, professional-grade component documentation using Storybook MDX, autodocs, and JSDoc.

Ink Hooks & State Manager

39

Facilitates professional state management and side-effect handling for building interactive React-based terminal interfaces with Ink.

React Hooks Patterns

39

Implements modern React development patterns using built-in and custom hooks for efficient state management and side effects.

Storybook Story Architect

39

Generates and maintains professional Storybook stories using the modern Component Story Format 3 (CSF3) for comprehensive UI component documentation.

Tailwind CSS Configuration

39

Optimizes and automates the setup, customization, and theme extension of Tailwind CSS configuration files.

Tailwind CSS Component Architect

39

Builds reusable, maintainable, and type-safe UI components using Tailwind CSS and modern design patterns.

Tailwind CSS Performance Optimization

39

Optimizes Tailwind CSS configurations for production to significantly reduce bundle sizes and improve website load times.