Skills tagged "ux" (484)

🎨 Web Design Guidelines

This skill reviews UI code against Web Interface Guidelines and outputs concise file:line findings to improve accessibility and consistency.

accessibilityfrontenddesigncode-review

64.2k

🎨 Frontend Design

This skill helps you design production-grade frontend interfaces with bold aesthetics and polished code for components, pages, and apps.

frontenddesignuxaccessibility

34.9k

📈 Baoyu Infographic

This skill generates publication-ready infographics by analyzing content and recommending optimal layout and style combinations across 20 layouts and 17 styles.

designdatamarketingcontent

1.6k

🎨 Mobile Android Design

This skill helps you master Material Design 3 and Jetpack Compose to build adaptive Android interfaces with accessible responsive layouts.

designuxaccessibilityfrontend

1.1k

🎨 Baseline Ui

This skill enforces a consistent Baseline UI by guiding components to follow opinionated Tailwind and motion conventions with accessible primitives.

frontenddesignuxaccessibility

824

🎨 Swiftui Ui Patterns

This skill helps you design and refactor SwiftUI interfaces using pattern-driven guidance for views, tabs, and component composition.

frontenddesignuxaccessibility

481

🎨 Tailwind Css Patterns

This skill helps you implement Tailwind CSS development patterns for mobile-first, responsive layouts, design tokens, and component reuse to speed up UI work.

frontenddesignuxproductivity

342

🎨 Web Perf

This skill analyzes web performance using Chrome DevTools MCP to reveal Core Web Vitals, render-blocking resources, and optimization opportunities.

performancedebuggingfrontendanalytics

304

🎨 Skills

This skill helps you create responsive HTML emails with React Email templates, enabling brand-driven designs across clients.

frontenddesignuxbranding

286

📋 Ui Ux Design Expert

This skill provides expert UI/UX guidance covering accessibility, design systems, research, and inclusive 2025 best practices to deliver user-centered

designuxaccessibilityresearch

122

🎨 Heroui Native

This skill helps you select, install, and customize HeroUI Native components for React Native with Uniwind support.

frontenduxperformancedocs

113

📋 Screenshot Feature Extractor

This skill analyzes product screenshots to extract feature lists and generate development task checklists for PRDs and roadmaps.

analyticsproductdesignux

107

🎨 Implement Design

This skill translates Figma designs into production-ready code with pixel-perfect fidelity and design-system integration using MCP server context for accurate

designfrontenduxaccessibility

81

🎨 Custom Ui

This skill helps you tailor Clerk component appearance by applying themes, layout, colors, and fonts to match branding.

frontendnextjsdesignux

78

🎨 Ios Ux Design

This skill analyzes iOS UI/UX, applies Human Interface Guidelines, and proposes interface improvements with SwiftUI patterns and accessibility in mind.

uxdesignaccessibilityfrontend

68

🎨 Expo App Design

This skill helps you design and implement cross-platform mobile apps using Expo Router, NativeWind, and React Native styling best practices.

frontenddesignuxproduct

58

📋 Design Skills

This skill helps you apply Resend brand guidelines across artifacts by routing to brand resources and ensuring visual consistency.

designbrandinguxaccessibility

50

🎨 Spec Workflow

This skill guides structured software development from requirements to task execution using EARS syntax and UI-design references to ensure quality.

planningdesignfrontendbackend

50

🎨 Canvas Design

This skill creates visual design philosophy artifacts and expresses them as printable posters, infographics, and canvases in PNG or PDF formats.

designuxbrandingproduct

48

🐛 Chatgpt App Builder

This skill guides developers through creating and updating ChatGPT apps, from ideation and bootstrapping to deployment and integration with the Skybridge

aifullstackapidevops

35

🎨 Landing Page Guide V2

This skill creates distinctive, high-converting landing pages using Next.js 14+ and ShadCN UI, delivering memorable design and production-ready code.

frontenddesignmarketingseo

35

📋 Cro Methodology

This skill helps you audit landing pages, uncover conversion blockers, and design evidence-based experiments to steadily boost your conversion rate.

strategyresearchcopywritingux

34

🔎 Ios Hig Design

This skill helps you design native iOS interfaces that align with Apple's HIG, ensuring accessible, safe-area aware SwiftUI/UIKit components.

swiftdesignaccessibilityux

29

🎨 Mobile Responsiveness

This skill helps you implement responsive, mobile-first layouts and interactions across breakpoints, touch events, and viewport-safe navigation.

frontenduxdesign

24

🎨 Screenshot To Code

This skill converts UI screenshots into production-ready React code with responsive layouts and accessible HTML/CSS.

frontendcode-reviewaccessibilitydesign

18

📝 Documentation Expert

This skill helps you improve documentation quality and user experience by analyzing structure, navigation, and readability and proposing actionable

docscontentuxaccessibility

17

🎨 Tailwindcss Development

This skill helps you style components and pages with Tailwind CSS v3, enforcing project conventions, dark mode, and responsive patterns.

frontenddesignuxphp

16

🎨 Tailwind Ui

This skill helps you implement consistent Tailwind CSS patterns, responsive design, and accessible components using a utility-first approach.

frontenduxaccessibilitydesign

15

🎨 Micro Interactions

This skill helps design micro-interactions by applying Disney's animation principles to small UI feedback moments for more engaging interfaces.

frontenduxdesignaccessibility

14

🛡️ Mobile Development

This skill helps you design, implement, and optimize cross-platform mobile apps with offline-first architecture and platform-aware UX.

performancetestinguxsecurity

14

🎨 Suggest Lucide Icons

This skill helps you pick Lucide icons that symbolize concepts or UI contexts with real icon recommendations and rationale.

designuxfrontenddocs

13

🎨 Flowchart Creator

This skill generates interactive HTML flowcharts and process diagrams with nodes, arrows, and swimlanes for clear workflow visualization.

frontendautomationdesignux

10

🎨 Animejs Skills

This skill helps you implement web animations using Anime.js v4, covering timelines, SVGs, scroll effects, and draggable interactions.

frontendscriptingdebuggingux

9

🎨 Dashboard Creator

This skill helps you generate interactive HTML dashboards with KPI cards and charts for metrics visualization and monitoring.

frontenddataanalyticsdesign

9

🧪 Ux Specification

This skill translates PRDs into actionable UX specifications, detailing flows, screens, and interactions to guide implementation.

uxdesignproductplanning

9

🎨 Frontend Design

This skill helps design and review SaaS frontends, clarifying value, improving hierarchy, and delivering production-grade UI that converts.

designuxfrontendproduct

7

🎨 A2ui_skills

This skill generates A2UI protocol v0.8 compliant UI code and JSONL messages to build agent-driven surfaces across platforms.

frontendapidataux

6

🎨 Flutter Api

This skill provides a comprehensive Flutter API reference guide that accelerates cross platform development by detailing widgets, layout, animations,

apifrontenddocswriting

6

🎨 Frontend Slides

This skill helps you create zero-dependency, animation-rich HTML slide decks from scratch or PPTs, delivering production-ready presentations with distinctive

frontenduxaccessibilityproduct

6

🎨 Shadcn Vue

This skill helps you scaffold and configure shadcn-vue projects with Tailwind, Vite, and TypeScript for accessible UI components.

frontenduxaccessibilitydocs

6

🔍 Design Critique

This skill provides direct, actionable UI/UX critiques focused on clarity, hierarchy, accessibility, and craft to improve design reviews and ship-ready

designuxaccessibilityproduct

5

🎨 Framer Expert

This skill helps you master Framer workflows from design to production, including MCP integration, motion, and CMS for fast, polished web experiences.

aifrontendproductivityautomation

5

🧪 Ui Extractor

This skill analyzes UI sources like URLs and recordings to generate implementation specs, design systems, and component catalogs.

frontenddesignuxjavascript

5

🎨 Ant Design

This skill helps you select Ant Design components and theming strategies for a performant, accessible SSR React app using v6 and Pro/X patterns.

reactfrontendperformanceaccessibility

4

🎨 Composable Svelte Navigation

This skill helps you implement state-driven navigation and Motion One animations for modals, sheets, and route transitions in Composable Svelte.

frontenduxproductdesign

4

🎨 Design Exploration

This skill generates a visual design catalogue with multiple proposals to explore directions before implementing.

designuxresearchfrontend

4

🧪 Ai Product Patterns

This skill helps you design AI-native products by applying evals as product specs, hybrid patterns, and future-proof UX based on OpenAI patterns.

aiproductuxdesign

3

🎨 Ai Sdk Ui

This skill helps you build AI-powered chat, streaming, and generative UI in React/Next.js with the Vercel AI SDK.

aifrontendfullstackapi

3

🎨 Animejs V4

This skill enables smooth web components animations using Anime.js 4 for drag interactions, visual feedback, swaps, and automatic cleanup.

frontendperformancescriptingdebugging

3

🎨 Feature Sliced Design

This skill helps you implement Feature-Sliced Design in Next.js with a custom views layer, delivering scalable, maintainable architecture.

frontenddesignuxproduct

3

🧪 Heuristic Evaluation

This skill performs heuristic evaluation of UI designs using Nielsen's 10 framework to identify usability issues and provide prioritized recommendations.

designuxaccessibilityproduct

3

🧪 Image_editing

This skill helps you edit images by applying user-specified changes such as background, color, or style modifications to uploaded images.

aidesignuxproduct

3

📋 Jobs To Be Done

This skill helps you apply Jobs-to-be-Done insights to shape product strategy, conduct research interviews, write user stories, and identify true competition.

productresearchstrategyux

3

🧪 Mobbin Ux

This skill discovers Mobbin UX patterns, generates a design spec for approval, then implements research-backed interfaces.

designuxresearchfrontend

3

🎨 Modern Tailwind

This skill helps you implement clean, scalable UI with Tailwind CSS by following best practices for utilities, theming, and maintainability.

frontenddesignuxperformance

3

🔍 Review

This skill reviews chapters for coherence, tone, pace, and character, delivering targeted rewrites to improve consistency and engagement.

writingcontentaiproduct

3

🧪 Standards Components

This skill guides building reusable, single-responsibility UI components with clear interfaces and composition for scalable frontend development.

frontenddesignuxaccessibility

3

📋 Swift Navigation

This skill helps you simplify and empower Swift navigation across SwiftUI, UIKit, and AppKit with ergonomic tooling and practical guidance.

uxdesigndocs

3

🎨 Tailwindcss

This skill guides Tailwind CSS v4 usage with utility-first patterns, theme variables, and maintainable composition for scalable UI.

frontenddesignuxproductivity

3

📋 Ux Design Principles

This skill helps you apply cognitive psychology UX principles to plan features, reduce complexity, and optimize user journeys.

uxdesignproductresearch

3