Skill UI

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 acts as a Visual Psychologist and Environmental Researcher, guiding the systematic mapping of visual elements—including color, typography, spacing, and imagery—to desired emotional states and conversion goals. It ensures that design decisions are strategic, supporting persuasion and brand narrative rather than merely being decorative. Use it when you need visuals to evoke a specific feeling (e.g., trust, urgency, calm) for a defined target audience, while respecting cultural and accessibility constraints.

Craft production-ready frontend pages, dashboards, or components with a clear visual point of view; focus on typography, color, motion, and layout so the experience feels intentional instead of generic.

Defines a premium UI/UX persona that enforces agency-grade typography, textures, and motion choreography, guiding AI to avoid cheap defaults and deliver cinematic, tactile web experiences in varied archetypes.

Guidelines for crafting industrial brutalist interfaces that merge Swiss print and military terminal aesthetics, emphasizing rigid grids, stark typography, utilitarian color, and analog degradation for data-heavy dashboards or editorial sites.

Automates Figma workflows via Composio's Rube MCP client, covering file inspection, exports, design token extraction, comments, and project browsing while enforcing tool discovery first.

This skill scaffolds a complete, cohesive, mobile-first page structure, ensuring consistency across the entire application. It guides the user to define the page's core purpose, apply the Information Pyramid, and compose the layout using established design systems and existing components (shell, navigation, cards). It is ideal for starting new product flows or developing new screens while maintaining professional structural integrity and mobile-first best practices.

This skill provides a deep audit of user experience (UX) and usability, going beyond basic visual checks. It systematically evaluates screens, flows, and components against Nielsen's 10 usability heuristics and modern mobile best practices. Use it when you need to identify structural flaws, cognitive load issues, or navigation regressions in a product design, providing prioritized issues, violated heuristics, and concrete remediation steps.

This skill generates concise, tone-consistent microcopy for various UI states, including buttons, error messages, empty states, toasts, and form guidance. Inspired by a casual yet polite voice, it ensures that product messaging is actionable, helpful, and aligns with a consistent brand tone, moving beyond generic or robotic wording.

This skill helps enhance the robustness of data-dependent user interfaces (UIs) by implementing the four critical feedback states: loading, empty, error, and success. It ensures that applications provide clear, graceful, and actionable feedback regardless of data fetching status, making the product reliable and user-friendly.

This skill acts as an elite Art Director for generating premium, highly actionable, and structurally sound frontend design references. It moves beyond generic AI aesthetics by enforcing principles like strong hierarchy, generous spacing, and image-led composition. Ideal for creating realistic, development-ready concepts for landing pages, hero sections, and multi-section websites.

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.