Skill UI

Automates guidance for creating architecture diagrams and visual documentation, following best practices and producing ready-to-use configurations for charts, presentations, and visualization tools.

Use before creative or constructive work (features, architecture, behavior). Transforms vague ideas into validated designs through disciplined reasoning and collaboration.

Transforms natural-language prompts into Excalidraw JSON diagrams, supporting flowcharts, relationships, mind maps, architecture, DFD, swimlane, class, sequence, and ER views; ideal when users ask to visualize processes or system structures and need editable Excalidraw files.

Provides actionable guidance and review checklists for modern clean UI/UX, emphasizing CRAP principles, task-first flows, information architecture, system feedback, consistency, and refined iconography.

This skill applies principles of behavioral psychology and choice architecture to redesign user experience (UX) flows. It is used when a product's conversion friction is rooted in interaction design, not just copy. By auditing cognitive load, defining optimal default paths, and inserting strategic commitment points, it guides users toward desired actions ethically, maximizing commitment while preserving autonomy. Ideal for improving onboarding, checkout funnels, and complex decision-making sequences.

This skill crafts agency-level digital experiences with haptic depth and cinematic spatial rhythm. It enforces premium aesthetics like Apple-esque design, avoiding standard fonts and generic layouts. Features include asymmetrical bento grids, nested component architecture, and fluid physics-based animations using custom cubic-beziers for a polished, high-end user interface.

Generates Excalidraw diagrams from natural language prompts, covering flowcharts, relationship maps, mind maps, architecture, data flow, swimlane, class, sequence, and ER diagrams for communicating processes and systems.

This skill assists in designing comprehensive, user-centric flow maps and navigation architectures. It adheres to established UX principles, such as Progressive Disclosure, Miller's Law, and Hick's Law, ensuring optimal user journeys. Use it to map out the structural connections, screen inventory, and edge case handling for a product feature, creating a scaffolded blueprint before visual implementation.

Generate publication-quality scientific diagrams from natural-language descriptions using Nano Banana 2 AI, with Gemini quality review and smart iteration until your document-type threshold is met. Ideal for neural network architectures, flowcharts, pathways, and posters.

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 publication-quality architecture, workflow, pipeline, and system topology diagrams from structured JSON (FigureSpec) into deterministic, editable SVG vector graphics. Ideal for formal figures needing precise, repeatable, hand-editable output.

A comprehensive skill guide for defining the core intent, tone, and strategic direction of any frontend design. It applies rigorous cross-domain principles drawn from architecture, cinema, marketing, and automotive design. Use this before coding to establish purpose, visual hierarchy, and intentional structure, ensuring every design element is deliberate and highly crafted.