Skills tagged "ux" (487)

📋 Cognitive Fallacies Guard

This skill helps detect and prevent visual misleads, cognitive biases, and data integrity issues in visualizations and reports.

dataanalyticsdesignux

🧪 Color Accessibility

This skill helps you design accessible color palettes and contrast checks to ensure color-blind friendly visuals across interfaces and charts.

accessibilitydesignuxfrontend

🎨 Color System

This skill helps you design accessible, themed color systems with harmony, dark mode support, and color-blind friendly palettes across brands.

designuxaccessibilitybranding

🧪 Colorize

This skill strategically colorizes monochromatic designs to improve hierarchy, meaning, and engagement while respecting brand and accessibility.

frontenddesignuxaccessibility

🎨 Comparison Table Generator

This skill helps you generate interactive comparison tables as MicroSims with ratings, badges, logos, and documentation to streamline educational decisions.

frontenddocsuxaccessibility

🎨 Component Library

This skill generates production-ready React components with shadcn/ui patterns and CVA variants to save 8-10 hours per project.

frontenduxaccessibilitydesign

🧪 Concurrent Safe Animation

This skill helps implement concurrency-safe animations that resist re-entrancy and interrupted updates, ensuring glitch-free rendering and stable layouts.

frontendperformancetestingdebugging

🎨 Create Remotion Geist

This skill generates Remotion Geist videos in Vercel's dark Geist style with spring animations and Geist typography.

frontenduxperformanceautomation

🎨 Creating Share Images

This skill helps you generate OpenGraph and Twitter share images for Next.js apps with dynamic gradients, icons, and responsive sizes.

frontendsocial-mediadesignux

⚙️ Creative Intelligence

This skill helps you generate structured brainstorming and research insights to fuel innovative BMAD development across phases.

aiautomationproductplanning

🧪 Critique

This skill evaluates interface design from a UX perspective, delivering actionable feedback on hierarchy, architecture, emotion, and overall quality.

designuxproductfrontend

📋 Cro

This skill orchestrates conversion optimization across funnels, loads patterns, and outputs prioritized, actionable recommendations to reduce friction and

analyticsmarketinggrowthux

🎨 Css Architecture

This skill helps you apply modern CSS architecture patterns, enabling consistent theming, scalable layouts, and accessible, maintainable styles.

frontenddesignuxproductivity

🎨 Css Container Queries

This skill helps you implement responsive components using CSS container queries and Tailwind, enabling components to adapt to their container size.

frontendtailwinddesignux

⚙️ Dashform

This skill creates AI-powered forms, surveys, and quizzes on the Dashform MCP server, guiding you through credentials, design, and publishing.

aiautomationapiscripting

🎨 Data Visualization Expert

This skill helps you design, build, and optimize interactive data visualizations and dashboards using modern libraries for clear insights.

dataanalyticsfrontenddesign

📋 Deepchat Settings

This skill helps you safely modify DeepChat application settings by guiding, validating, and applying user requests to theme, language, and font size.

productdesignuxaccessibility

🧪 Design

This skill helps you design UI mockups and specs using the Polaris design system, outlining components, flows, and low-fidelity visuals.

designuxfrontendproduct

📝 Design Doc Interviewer

This skill interviews users to generate a structured design document for a proposed change, using progressive questions and a clean template.

designuxproductplanning

🎨 Design Guide

This skill analyzes websites to generate pixel-perfect design guides and design systems documentation, including colors, typography, components, interactions,

designuxaccessibilityfrontend

🎨 Design Guide

This skill enforces a modern, consistent UI design across platforms, guiding color, spacing, typography, and interactive states for polished interfaces.

designuxaccessibilityfrontend

🎨 Design Iterator

This skill acts as a proactive design-iterator to deliver iterative refinements for UI components, escalating visual balance and polish through focused cycles.

designuxfrontendaccessibility

🎨 Design Lab

This skill helps you explore UI design options by generating multiple variations, collecting feedback, and producing actionable implementation plans.

designuxproductresearch

🧪 Design Like

This skill helps you apply a brand's design language to code and UI by generating brand-specific Agent Skills and IDE config.

designuxbrandingcli

📋 Design Md

This skill analyzes Stitch projects and synthesizes a semantic design system into DESIGN.md to ensure new screens align with the existing design language.

designuxproductdocs

🎨 Design Principles

This skill helps you design consistent enterprise dashboards and SaaS interfaces by applying a 4px grid, typography, and color principles.

designuxfrontendproduct

🧪 Design Sprint

This skill guides you through a five-day design sprint to validate ideas with real customers and a tested prototype.

designuxproductresearch

🧪 Design Style

This skill helps you design frontend interfaces by applying a specific design system prompt to build distinctive, production-ready UI.

frontenddesignuxaccessibility

🎨 Design System Analyzer

This skill analyzes any website's UI style using ChromeDevTools to extract CSS tokens, animations, and interaction states, then generates a design system

designuxfrontenddebugging

🎨 Design System Patterns

This skill helps you design and manage design system tokens and components using Pencil patterns for consistent theming and scalable UI.

designuxfrontend

🎨 Design System Starter

This skill helps you design scalable design systems with tokens, components, documentation, and accessibility guidelines to ensure consistency and usability.

designuxaccessibilitydocs

🎨 Designing Systems

This skill helps you design scalable design systems using OKLCH colors, semantic CSS variables, and Tailwind v4 theming for consistent UX.

designuxfrontendtypescript

🎨 Desktop Ui Design

This skill helps you design intuitive desktop interfaces by applying native widgets, platform conventions, and usability patterns to boost usability and

designuxaccessibilityproduct

📋 Devdocs Insights

This skill helps you convert UI/UX findings, research, and external references into actionable development requirements, preserving traceability and

uxdocsproductwriting

🎨 Diagram Generator

This skill generates draw.io diagrams from natural language requests, outputs valid mxCell XML, and renders them in a browser preview.

aiautomationfrontendcloud

📋 Discovery

This skill helps you master user discovery and research by guiding interviews, persona creation, and journey mapping to inform product decisions.

productresearchplanningux

🎨 Distill

This skill helps simplify designs by stripping complexity to reveal the essential elements, accelerating clarity and user focus.

designuxfrontendrefactor

📝 Docs

This skill helps you generate concise, reader-friendly documentation for Next.js SaaS boilerplates with a relaxed tone.

docswritingcontentseo

🔍 Docs Writer

This skill helps you write, review, and edit documentation in apps/docs and all md or mdx files with clear, user-focused guidance.

docswritingcontentux

📝 Documentation System

This skill helps you create and maintain clear, AI-navigable documentation for codebases, guiding structure, content, and updates across docs.

docswritingcontentai

⚙️ Drawio

This skill helps you create draw.io diagrams by generating compressed URLs and opening diagrams in your browser for flowcharts, architectures, and more.

pythonautomationcliscripting

🔍 Educational Course Kit

This skill helps you generate complete micro-courses with scripts, visuals, audio, and previews for diverse platforms.

docswritingcontentdesign

🎨 Email Template Design

This skill designs production-ready HTML email templates with inline CSS and cross-client compatibility, ensuring responsive, accessible campaigns.

designuxmarketingbranding

🔍 Emilkowal Animations Swift

This skill helps you apply SwiftUI and AppKit animation best practices to write, review, and implement polished, accessible motion.

designuxaccessibilityperformance

🎨 Enhance Prompt

This skill transforms vague UI ideas into polished Stitch prompts with design system context and structured output for better generation results.

designuxfrontendai

📋 Excalidraw Generation

This skill helps you generate Excalidraw diagrams that convey concepts with hand-drawn aesthetics, spatial layouts, and accessibility-aware design.

designuxaccessibilityproduct

🎨 Excalidraw Skill

This skill helps you design and refine Excalidraw diagrams in real time, export/import scenes, and manage elements across a live canvas.

frontenddesignuxapi

⚙️ Excalidraw Slides Skills

This skill transforms user topics into polished Excalidraw 16:9 slide decks by outlining, visualizing ideas, and generating ready-to-export slides.

designuxproductcontent

🎨 Explainer Visuals

This skill creates animated, self-contained explainer visuals as HTML/CSS/JS to clarify ideas in essays and blog posts.

frontenduxaccessibilitydesign

🎨 Extract

This skill helps identify and extract reusable components, tokens, and patterns from your design system to enable systematic reuse.

designuxfrontendrefactor

🧪 Feature Spec

This skill helps product teams craft structured PRDs and feature specs with problem statements, user stories, requirements, and success metrics.

productplanningresearchwriting

🎨 Figma Code To Canvas

This skill helps you push running UI code to Figma as editable design layers using the Code to Canvas MCP integration.

designuxautomationfrontend

🎨 Figma Illustration Import

This skill helps you convert multi-layer Figma illustrations into reusable React atom components with assets, stories, and theme support.

reactfrontenddesignux

🎨 Figma Implement Design

This skill translates Figma designs into production-ready code with pixel-perfect fidelity using MCP workflows and design-system mapping.

designfrontenduxaccessibility

⚙️ Figma Use

This skill lets you automate Figma design tasks from the CLI or JSX, creating and editing frames, text, icons, and exports.

designautomationcliproductivity

🧪 Fixing Accessibility

This skill helps you fix accessibility issues in UI by applying targeted, minimal changes that improve usability and compliance.

frontenduxdesignproduct

⚙️ Fixing Metadata

This skill helps ensure metadata is correct and complete across pages, enforcing single sources, proper titles, descriptions, and social cards.

seocontentuxdesign

🎨 Fixing Motion Performance

This skill helps optimize animation performance by applying motion guidelines to CSS, WAAPI, and scroll-linked effects across the UI.

performancefrontenddebuggingux

🧪 Flutter

This skill helps you build Flutter apps by guiding widgets, state management, navigation, and platform integration with practical best practices.

frontenddesignuxproductivity

🧪 Flutter Adaptive Ui

This skill helps you build adaptive Flutter UIs that gracefully respond to screen size and platform, enhancing usability across mobile, tablet, and desktop.

frontenduxaccessibilitydesign