Skill UI

This skill guides the creation of production-ready design systems using Tailwind CSS. It covers advanced topics such as implementing design tokens, managing component variants, establishing responsive patterns, and ensuring high accessibility standards. Use this when building component libraries, applying theming, or standardizing UI patterns across a large codebase.

A comprehensive guide to modern utility-first CSS using Tailwind CSS v4 principles. Covers the shift to CSS-first configuration, utilizing CSS variables for design tokens, implementing advanced container queries, and mastering responsive, dark mode, and complex layout patterns (Grid/Flex). Essential for building modern, component-driven UIs efficiently.

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.

Comprehensive expertise in designing and implementing low-latency, production-ready voice AI applications and conversational agents. Covers the full stack from real-time audio streaming (WebRTC, LiveKit) to advanced NLU and speech synthesis (OpenAI, ElevenLabs, Deepgram). Ideal for building next-generation voice assistants, virtual call centers, and voice-enabled mobile experiences while optimizing for perceived responsiveness and latency budgets.

Guidelines for reviewing UI code against web interface best practices, covering accessibility, performance, responsive design, component patterns, CSS practices, security, and internationalization during audits or UX evaluations.

Generates high-fidelity mobile and web UI/UX mockups with atomic design principles, responsive layouts, and accessible design tokens via muapi.ai for product requirements that need professional wireframes or design systems.

Design research posters with HTML/CSS templates that export to PDF or PPTX when PowerPoint format is explicitly requested, integrating responsive layouts and AI-generated visuals for quick preview and iteration.

A comprehensive guide for building production-quality, highly accessible, and responsive user interfaces. Covers advanced topics including component architecture (composition over configuration), robust state management patterns (Context, Redux, Server State), adherence to design systems, and meeting WCAG accessibility standards. Use this skill when developing or refining complex user-facing components that require professional polish and maintainability.

This skill provides a comprehensive review of UI components and codebases to ensure strict adherence to established design systems, accessibility guidelines (WCAG), and modern front-end best practices. It checks for design token compliance (e.g., semantic colors, scaled spacing), component conventions, WCAG accessibility standards (a11y), mobile responsiveness, and visual coherence across the entire application.

Inspects live or staging websites to spot layout, responsive, and accessibility issues, then traces those problems to source files for targeted fixes, making it ideal for developers and designers reviewing static sites, SPAs, or full-stack apps.

This comprehensive skill serves as an entry point for all web UI design needs, covering components, pages, dashboards, and advanced layouts using React, Vue, or pure HTML/CSS. It addresses not only aesthetics and polish (color, typography, spacing) but also deep structural concerns like responsive design, UX auditing, and visual system implementation. Use it whenever a user asks to improve the look, feel, or function of a digital interface.

This skill generates a comprehensive spacing and layout token system for Figma. It establishes foundational design rules, including a scalable spacing scale (e.g., 4px/8px base), responsive grid definitions for various breakpoints, and component-specific spacing conventions. It ensures design consistency and provides clear guidelines for developer handoff.