Design Tools Agent Skills

Stitch Build Loop

Automates the autonomous creation of multi-page websites through an iterative baton-relay system using Stitch MCP.

React Flow UI Development

Builds customizable node-based editors, workflow diagrams, and interactive flow-based interfaces using React Flow.

Atomic Design Templates

Architects structural page layouts using Atomic Design principles to create reusable, content-agnostic frontend skeletons.

Svelte Flow Fundamentals

Builds highly customizable node-based user interfaces and interactive flow diagrams using the Svelte Flow framework.

Atomic Design Quarks & Design Tokens

Architects foundational design tokens and CSS primitives to establish a consistent, scalable design system using sub-atomic principles.

Atomic Design Molecules

Builds functional UI molecules by composing primitive atoms into reusable, single-purpose components like form fields and navigation items.

Atomic Design: Organisms

Constructs complex, standalone UI sections like headers and dashboards by aggregating atoms and molecules.

Stitch Prompt Enhancer

Transforms vague UI concepts into highly detailed, structured prompts optimized for Stitch UI generation.

Nano Banana Image Generation

Generates and edits professional visual assets including icons, diagrams, and blog graphics directly within the terminal using Gemini CLI.

Stitch React Transform

Converts Stitch design screens into production-ready, modular React component systems with automated design token extraction.

Figma Design-to-Code Generator

Converts Figma frames and components into semantic, production-ready code for multiple frameworks.

Tailwind Component Architect

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

Vue Reactivity System

Implements efficient state management in Vue 3 using refs, reactive objects, computed properties, and optimized watchers.

Tailwind CSS Utility Classes

Implements utility-first CSS patterns for rapid, responsive frontend development using Tailwind CSS classes.

Figma Frame Analyzer

Analyzes Figma design frames to provide comprehensive technical implementation guidance, including HTML structure, CSS layouts, and accessibility requirements.

Storybook Configuration

Configures Storybook environments with optimal addons, builders, and framework-specific integrations for professional UI development.

Gluestack UI Theming

Implements comprehensive design systems and theming configurations for gluestack-ui and NativeWind projects.

Storybook Story Writing

Generates and maintains professional UI component stories using modern Component Story Format 3 (CSF3) standards.

Tailwind Responsive Design

Implements mobile-first layouts and adaptive UI components using Tailwind CSS responsive breakpoints and container queries.

Gluestack UI Components

Builds accessible, high-performance universal user interfaces using the gluestack-ui component library for React and React Native.

Tailwind CSS Performance Optimizer

Optimizes Tailwind CSS configurations and build processes to minimize bundle sizes and accelerate web performance.

React Performance Optimizer

Optimizes React application performance through advanced memoization, code splitting, and virtualization patterns.

Storybook Args & Controls

Configures dynamic interactive controls and argument types for Storybook components to create explorable and well-documented design systems.

gluestack-ui MCP Tools

Provides direct access to the gluestack-ui component library for discovering, exploring, and retrieving source code via MCP tools.

Tailwind CSS Configuration

Configures and optimizes Tailwind CSS setups, including theme customization, content paths, and plugin integration for scalable design systems.

Rails Hotwire Pro

Builds modern, reactive Ruby on Rails applications using Turbo and Stimulus for a seamless HTML-over-the-wire experience.

Figma Design System Sync

Synchronizes design system components between Figma and codebases using Code Connect mappings to ensure design-to-code parity.

Ink Terminal Layouts & Styling

Builds sophisticated Command Line Interface (CLI) layouts using Ink's Flexbox-based positioning and styling components.

Phoenix Views & Templates

Renders dynamic HTML using Phoenix HEEx templates, function components, and slots with compile-time validation and security.

Ink Component Patterns

Builds sophisticated terminal user interfaces using React-based Ink component patterns and TypeScript.