Skill UI

Guides the creation of Mermaid sequence diagrams by offering best-practice patterns, code generation, and validation suited for visual documentation or presentation workflows.

Offers automated guidance for building Mermaid state diagrams, covering best practices, code generation, and validation to streamline visual documentation requests.

A comprehensive toolkit for senior UI designers to build robust and scalable design systems. It guides the generation of design tokens (colors, spacing, typography), structuring component libraries (Atoms to Organisms), implementing responsive layouts, and preparing detailed developer handoff documentation. Essential for maintaining visual consistency and bridging the gap between design and development.

This skill provides a comprehensive guide on programmatically interacting with the Lucidchart API. It demonstrates how to create new documents, add structured shapes and connecting lines using standard import formats, and finally export the finished diagram (e.g., as PNG). It is ideal for automating the visualization of architecture diagrams, system workflows, or business processes within an application.

Generate images with Google Gemini's image model straight from a Claude Code session. Create UI placeholders, icons, documentation illustrations, diagrams and concept visuals, saved locally as PNG files with a returned file path.

Generate presentations with AI from supplied documents, producing evidence-linked outlines and styled slide images. Builds one sample slide first, then renders, checks layout, legibility, aspect ratio and factual consistency before export.