Design Tools Agent Skills

Obsidian Excalidraw Diagram Generator

1,037

Transforms complex text descriptions into fully editable Excalidraw diagrams and flowcharts formatted specifically for Obsidian.

React Component Generator

1,030

Generates production-ready React components following modern industry standards, performance optimizations, and accessibility patterns.

Graphviz DOT Generator

1,030

Generates high-quality DOT language scripts and diagrams for complex technical visualizations and system architecture maps.

SVG Icon Generator

1,030

Generates custom, production-ready SVG icons and vector assets directly within your development environment.

Chart.js Configuration Creator

1,030

Generates optimized, production-ready configurations for Chart.js to create dynamic and interactive data visualizations.

Styled Components Helper

1,030

Streamlines CSS-in-JS development by generating, refactoring, and optimizing styled components for modern frontend frameworks.

Gamma Presentation Editor & Exporter

1,030

Modifies existing Gamma presentations and automates exporting slides to professional formats like PDF and PPTX.

Tailwind CSS Class Optimizer

1,030

Optimizes and refactors Tailwind CSS classes to improve code readability and maintainability across modern frontend projects.

Mermaid Class Diagram Generator

983

Generates professional Mermaid class diagrams for architectural visualization and technical documentation directly within Claude Code.

Lazy Loading Implementer

983

Implements efficient lazy loading patterns for images, components, and assets to optimize frontend performance.

Code Splitting Helper

983

Optimizes web application performance by implementing efficient code splitting, lazy loading, and dynamic import patterns.

User Journey Mapper

983

Generates and optimizes detailed user journey maps and visual documentation to streamline product experience design.

Vue Component Generator

983

Generates production-ready Vue.js components with standardized patterns and performance-optimized structures.

Architecture Diagram Creator

983

Generates professional system architecture diagrams and visual technical documentation using industry-standard tools like Mermaid.

Ideogram Core Workflow B

983

Executes secondary Ideogram image generation and optimization workflows within Claude Code.

Process Flow Generator

983

Generates professional process flows, diagrams, and visual documentation directly within the Claude Code environment.

Technical Diagram Analyzer

983

Analyzes and generates technical diagrams, charts, and visual documentation using industry-standard patterns and visualization tools.

Responsive Breakpoint Analyzer

983

Analyzes and implements optimized CSS media query breakpoints for responsive and mobile-first web development.

Gamma AI Presentation Generator

983

Automates the creation of professional AI-generated presentations from text prompts, documents, or structured outlines using the Gamma SDK.

Mindmap Generator

982

Generates structured visual mindmaps and diagrams to organize complex ideas and project workflows within Claude Code.

Org Chart Creator

982

Generates professional organizational charts and hierarchical diagrams using code-based visualization tools.

Ideogram Authentication & Setup

982

Automates the installation and configuration of Ideogram SDKs and API authentication for your projects.

CSS Module Generator

982

Generates and configures scoped CSS modules for modern frontend frameworks to ensure collision-free styling and improved maintainability.

Nanobanana Image Generation

925

Generates and edits high-quality images using the Google Gemini API with customizable aspect ratios and resolutions.

Windsurf IDE Theme Customization

896

Configures and optimizes Windsurf IDE themes, color schemes, and accessibility settings for better developer productivity.

Mermaid State Diagram Creator

896

Generates professional Mermaid.js state diagrams to visualize complex logic flows and system behaviors within technical documentation.

Makepad Event & Action Handling

699

Streamlines the implementation of interaction logic and event propagation within the Makepad UI framework.

Makepad Animation

699

Simplifies the creation of complex, high-performance UI animations and state transitions within the Makepad framework.

Makepad UI Widgets

699

Accelerates Rust application development by generating and styling high-performance Makepad UI components and layouts.

Makepad Shaders

699

Generates high-performance GPU shaders and sophisticated 2D vector shapes using Makepad’s Sdf2d and Rust-based shader language.