Best Best AI Agent Skills for UI/UX Design

This skill provides a curated collection of professional font and color themes for consistent and professional styling of presentation slide decks and other artifacts.

A toolkit providing utilities and knowledge for creating animated GIFs optimized for Slack.

Create professional, visually appealing Marp presentation slides with 7 pre-designed themes and built-in best practices.

Expert guide for building accessible, customizable UI components with shadcn/ui, Radix UI, and Tailwind CSS.

Infographic Generator that allows users to combine different layouts and styles for creating visually appealing infographics.

Master modern responsive design techniques to create interfaces that adapt seamlessly across all screen sizes and device contexts.

Master iOS Human Interface Guidelines (HIG) and SwiftUI patterns to build polished, native iOS applications that feel at home on Apple platforms.

The 'game-changing-features' skill focuses on product strategy to identify transformative features that can significantly enhance a product's value.

The Frontend Code Review skill helps users inspect and review frontend code, specifically targeting `.tsx`, `.ts`, and `.js` files. It offers two modes for code review: pending-change review and file-targeted review, utilizing a checklist to flag violations and suggest improvements.

Build reusable, maintainable UI components using modern frameworks with clean composition patterns and styling approaches.

Build cohesive, accessible visual systems using typography, color, spacing, and iconography fundamentals.

Tailwind v4 + shadcn/ui Production Stack is a production-tested setup for using Tailwind CSS version 4.1.18 with custom utility-first CSS classes. It provides detailed setup instructions, dark mode setup, and common errors with solutions, aimed at enhancing the development of user interfaces with a focus on responsive and theme-aware applications.

Comprehensive guide to auditing web content against WCAG 2.2 guidelines with actionable remediation strategies.

Facilitates a comprehensive evaluation of mobile feature feasibility by assessing key dimensions like platform clarity and accessibility risk. By using this skill, developers can proactively identify potential issues, ensuring a smoother design process and higher-quality mobile applications.

Facilitates the internationalization and localization of applications by providing best practices and implementation patterns. This skill enhances user experience by ensuring that applications can easily support multiple languages and regional preferences.

Handles the design and structure of an engaging online portfolio that captures attention quickly. By optimizing presentation and usability, it enhances user interaction and increases chances of converting visitors into connections or job offers.

Utilizes a library of predefined components to enforce consistent design patterns across applications. This results in improved UI uniformity and accelerates development by reducing the need for repetitive styling tasks.

Facilitates a thorough auditing process for motion design in user interfaces. Enhances design quality by identifying and fixing motion gaps that could negatively impact user experience.

Converts written text into natural, spoken dialogue using various TTS models. This automation streamlines audio production processes, enabling quicker content creation for videos and podcasts.

Facilitates smooth animations in UI elements by using client-side imports to avoid SSR errors. By implementing this skill, developers reduce the likelihood of animation bugs and improve performance in applications using frameworks like React and Vue.

Selects the appropriate icons for different concepts and provides guidelines to avoid common mistakes. This skill streamlines the design process by ensuring coherence and quality in icon selection, saving time and reducing errors.

Generates diagrams in Excalidraw format based on user-defined keywords and content analysis. This skill automates the diagram creation process, allowing users to produce accurate visual representations quickly, significantly cutting down manual drawing time.

Generates and edits images using Google's Gemini 3 Pro Image model. The developer benefits from automating image creation and modifications, saving significant time and effort while producing high-quality visual content.

Facilitates the creation and deployment of conversational AI voice agents. This streamlines the development process by providing necessary tools and integrations, allowing developers to focus on functionality rather than infrastructure.

Generates a complete accessible color system based on a single brand hex code. This skill simplifies the design process by automating the creation of color palettes, ensuring consistency and adherence to accessibility standards.

Automatically generates professional illustrations based on document content analysis. This streamlines the process of visual content creation, saving significant time and reducing errors in manual design.

Generates and edits dynamic images for websites using Gemini Native Image Generation. This skill enhances visual content quality by automating image creation, thus streamlining design workflows and minimizing manual editing errors.

Consolidated skill for building terminal user interfaces with OpenTUI. Use decision trees to find the right framework and components, then load detailed references.

Automates the process of removing backgrounds from images using the inference.sh CLI. This skill enhances workflow efficiency by providing quick and accurate image editing for various applications, such as e-commerce and marketing.

Streamlines the integration of Tailwind CSS v4 into projects by simplifying the setup process with a more efficient configuration style. Developers gain faster development cycles and reduced complexity by eliminating previous configuration files and adopting a variable-based theming approach.

Handles professional animations for the JARVIS AI Assistant HUD, including various transitions and effects. Installing this skill enhances user engagement and visual appeal by automating animation workflows and ensuring responsive design.

Generates visually appealing Mermaid diagrams from user-defined specifications. Simplifies the process of documentation by producing high-quality SVG and ASCII outputs with minimal setup.

Handles the integration and customization of Material-UI components in React applications, focusing on patterns for styling, theming, and layout. Developers benefit by efficiently implementing responsive designs and maintaining consistent styling practices, which enhances the overall development speed and quality of UI elements.

Facilitates the creation of full-stack web applications using modern frameworks like Next.js, Turborepo, and RemixIcon. Developers benefit from streamlined workflows that enhance productivity by optimizing build performance and ensuring consistent UI design across multiple projects.

Facilitates the development of custom UI extensions for the Medusa Admin dashboard through the use of the Admin SDK and Medusa UI components. This skill streamlines the process of creating tailored admin interfaces, enhancing workflow efficiency by automating repetitive UI setup and ensuring consistency across the dashboard.

Generates clean and professional Mermaid diagrams from textual content in Obsidian and GitHub. This skill streamlines the visualization process, enhancing clarity and presentation quality while minimizing syntax errors.

Handles conversational image understanding tasks by processing and responding to visual content. Developers installing this skill can enhance applications to facilitate interactive dialogues about images, improving user engagement and functionality.

Manages multiple chat threads with built-in and customizable UI components for enhanced user interaction. By installing this skill, developers can streamline chat operations, allowing for easier thread management, which ultimately improves user experience and reduces development time.

Generates custom design rules tailored for Figma-to-code workflows within projects. This skill ensures consistency in component implementation, reducing manual coding errors and enhancing code quality by enforcing project-specific conventions.

Facilitates the creation of detailed user personas based on comprehensive research, targeting product design and marketing strategies. By utilizing this skill, teams can ensure user-centered decisions, leading to improved product relevance and engagement.

Facilitates the creation and maintenance of a consistent design system across products and teams, ensuring unified component usage. By implementing this skill, developers streamline their workflow and enhance collaboration, leading to higher product quality and reduced design inconsistencies.

Structures content to enhance user navigation and understanding of information. Facilitates efficient user journeys by providing a clear framework for content discovery and organization.