Skills tagged "ux" (453)

🎨 Mobile First Design

This skill helps design mobile-first responsive interfaces by guiding breakpoints, touch targets, and progressive enhancement for performance and accessibility.

designuxfrontendperformance

⚙️ Mobile Ios Design

This skill helps you design polished iOS interfaces and SwiftUI layouts aligned with Apple's HIG for accessible, adaptive apps.

designuxaccessibilityautomation

🎨 Mobile Ui

This skill helps you optimize mobile UI for responsive layouts, safe areas, touch targets, and typography across iPhone models.

frontenduxperformancetailwind

🎨 Modal

This skill guides you to implement and open imperative modals with createModal from @lobehub/ui, boosting modal UX consistency.

frontendreacttypescriptux

🎨 Morphing Icons

This skill helps you design morphing icons by transforming three-line SVGs between states, enabling smooth, scalable icon transitions.

frontenduxtypescriptdesign

🎨 Motion

This skill helps you implement Motion Vue animations in Vue 3 and Nuxt with motion component usage, gestures, and scroll effects.

frontenduxperformance

🎨 Motion Design

This skill provides motion design guidance for UI components, recommending easing, duration, and implementation to make interactions purposeful and delightful.

designuxfrontendaccessibility

🎨 Mui

This skill applies MUI v7 styling, theme, and responsive patterns to accelerate building consistent, accessible components with sx prop and hooks.

frontenddesignuxaccessibility

✨ Music Video Generator

This skill generates cohesive music and video from a unified prompt, synchronizing mood, style, and energy for a polished music video.

aiautomationdesignux

📋 Nano Banana Pro

This skill generates or edits images using Google's Nano Banana Pro API, preserving user intent and saving results to the current working directory.

aiapidesignux

⚙️ Nanobanana Skill

This skill generates or edits images using Google Gemini API via nanobanana to streamline creative workflows.

aiautomationapicloud

🧪 New Presentation

This skill helps you craft minimalist, high-impact presentations using Steve Jobs' 3-Second Rule and Billboard Test, with automatic PPTX generation and brand

productbrandingcontentmarketing

🧪 Nuxt Ui

This skill helps you build polished Nuxt and Vue interfaces with 125+ accessible components and Tailwind theming for brand-specific UIs.

nuxtvuefrontendux

🎨 Obsidian Canvas Creator

This skill converts text into interactive Obsidian Canvas visuals, generating mind maps or freeform layouts to organize content spatially.

aidesignuxproduct

🎨 Onboardjs React

This skill helps you implement OnboardJS in React projects to build multi-step onboarding with flow, persistence, and conditional navigation.

frontendapianalyticsperformance

🎨 Onchainkit

This skill helps you build production-ready onchain apps using React components and TypeScript utilities from OnchainKit, simplifying wallet, token, and NFT

frontendfullstackapiux

🧪 Pattern Ui

This skill enhances UI polish by applying layout and styling patterns to pattern-ui components, ensuring responsive structure and two-way data bindings.

frontenddesignuxperformance

⚙️ Pencil Basics

This skill helps you work with Pencil MCP design files by guiding .pen handling, node layouts, and batch design operations.

designuxscriptingproductivity

🎨 Performance Optimization

This skill helps you optimize perceived performance using optimistic UI, skeletons, and latency strategies to boost user trust and loading experience.

performancefrontenduxaccessibility

🎨 Phase 3 Mockup

This skill helps you rapidly create trendy UI mockups and wireframes without a designer, with HTML/CSS/JS ready for Next.js components.

frontenddesignuxaccessibility

🎨 Pixel Perfect Ui

This skill converts Figma designs into production-ready Next.js components with pixel-perfect accuracy and automated visual validation.

frontendnextjsdesignux

🔍 Pr With User Impact

This skill helps you craft PRs and commits that clearly show user workflow impact through concrete before/after examples and emotional resonance.

productuxwritingcode-review

📋 Prd Generation

This skill generates lean, actionable PRDs from design thinking artifacts, guiding development with structure without enterprise bloat.

productplanninguxwriting

📋 Presentation Builder

This skill helps you generate brand-aligned PPTX presentations with structured briefs and validation steps for pitch, roadmap, and product decks.

productdesignuxcontent

📋 Presentation Design

This skill helps you design compelling presentations by applying evidence-based structure, visuals, and storytelling to maximize clarity and audience

designuxcontentbranding

📋 Presentation Design

This skill helps you design and evaluate presentations that maximize audience understanding with evidence-based structure and visuals.

designuxaccessibilitycontent

📋 Problem Framing

This skill helps you transform fuzzy product ideas into validated problem statements, target users, and jobs-to-be-done for actionable design.

productplanningresearchdesign

🧪 Product

This skill generates UI/UX specifications and wireframes from PRD and architecture, delivering UX_SPEC.md and DESIGN_SYSTEM.md for iOS/macOS apps.

designuxproductdocs

🎨 Product Analysis

This skill conducts multi-path parallel product analysis using Claude Code and Codex to generate actionable optimization plans and competitive benchmarks.

productuxanalyticsai

📋 Product Tryon Visualization

This skill generates realistic product try-on visualizations to accurately depict fit, drape, and scale across diverse models for e-commerce.

aiproductuxdesign

🛡️ Progressive Web App

This skill helps you build installable PWAs with offline support, service workers, and install prompts to enhance reliability and engagement.

frontendperformanceuxsecurity

✨ Prompt Export

This skill translates design artifacts into a stepwise prompts.md for Claude Code, enabling incremental code generation from problem framing to final polish.

designuxproductcli

🛡️ Quick

This skill streamlines code reviews by guiding rapid assessments, targeted feedback, and agent-driven security, UX, and architectural insights.

code-reviewsecurityuxtesting

🎨 Quick View

This skill generates minimal, semantic HTML views to review structured output in a browser, improving readability of lists, tables, and drafts.

frontenduxaccessibility

🎨 Rams

This skill performs accessibility and visual design reviews on UI components, identifying WCAG issues and design inconsistencies to improve quality.

accessibilitydesignuxfrontend

🎨 React Composition Patterns

This skill helps you refactor React components by applying composition patterns to reduce boolean props and design flexible, reusable APIs.

frontendrefactorcode-reviewdesign

🎨 React Flow

This skill guides you in building node-based interfaces with React Flow, covering patterns, performance, and TypeScript integration.

frontendperformancedesignproductivity

🎨 React Native Design

This skill helps you build performant cross-platform mobile apps with expert styling, navigation, and animated UI using React Native and Reanimated.

designuxfrontendperformance

🎨 Readme Writing

This skill helps write folder READMEs by explaining why the folder exists, its mental model, and how to place future code within the structure.

docswritingplanningfrontend

🎨 Refactoring Ui

This skill helps you apply Refactoring UI principles to create clean, scalable frontends with consistent spacing, typography, color, and depth.

frontenddesignuxrefactor

🧪 Refract

This skill reframes problems across Field, Standpoint, and Lens to surface hidden insights and generate perspective maps for decision support.

aiautomationproductresearch

🛡️ Release Review

This skill provides a senior release review for macOS and iOS apps, identifying security, privacy, UX, and distribution issues with actionable fixes.

securityuxreleasecode-review

🎨 Remotion Video Creator

This skill helps you create animated videos with Remotion by turning UI concepts into TSX scenes, complete with transitions and exports.

frontenddesignuxautomation

📋 Requirements

This skill converts customer insights into clear user stories, acceptance criteria, and scope guidance to empower engineers.

productplanningwritingdocs

🧪 Requirements Analyst

This skill guides how to analyze and extend client needs into a complete, systematized requirements framework from a customer perspective.

productplanningresearchux

🧪 Responsive System

This skill helps implement responsive layouts and fluid typography using mobile-first patterns, container queries, and adaptive components for scalable UI.

frontendtypescriptdesignux

🎨 Responsive Web Design

This skill helps you design responsive web interfaces with mobile-first CSS, flexible grids, and fluid typography across devices.

frontenduxdesignaccessibility

🎨 Rhdh Frontend Dynamic Plugin

This skill guides you to bootstrap and wire frontend dynamic plugins for Red Hat Developer Hub, delivering UI pages, routes, and theme integrations.

frontenduxdesignproductivity

🛡️ Roblox Development

This skill helps you build and monetize Roblox games with expert Lua scripting, Studio workflows, and scalable systems for millions of players.

scriptingperformancesecurityux

🛡️ Roblox Game Developer

This skill helps you build robust Roblox games with Luau scripting, secure networking, UI and UX design, and monetization strategies from templates.

designuxsecurityperformance

🧪 Runhuman Skills

This skill helps you validate web app UX with human testers, capturing real user feedback and visual issues not caught by automation.

uxtestingaccessibilityproduct

🎨 Seo Optimization Guide

This skill helps you implement comprehensive SEO strategies covering technical SEO, on-page optimization, and core web vitals to boost rankings and UX.

seoperformancefrontendnextjs

🧪 Shadcn

This skill guides you to implement and customize shadcn/ui components using the latest version and modern patterns.

frontenduxaccessibilitydesign

🎨 Shadcn Ui

This skill guides you to build accessible, component-based UIs with shadcn/ui in Next.js, including forms, dialogs, tables, and dark mode.

frontendaiautomationdesign

🎨 Shadcn Ui

This skill guides you through setting up shadcn/ui, installing components, and building accessible, Tailwind-styled React UI patterns.

reactshadcnaccessibilityux

🎨 Skill

This skill translates TemPad Dev UI evidence into project-native TypeScript code, enabling accurate integration without guessing styles.

frontendtypescriptdesignux

🎨 Skills

This skill helps you scaffold and configure an Expo React Native app with RevenueCat paywall, AdMob banners, i18n localization, onboarding, and NativeTabs

frontendadsuxdesign

📋 Slide Quality

This skill helps you assess slide quality using a science-backed 12-point checklist to improve clarity and audience understanding.

accessibilitydesignuxcontent

🎨 Snippets_flutter Infinite Canvas

This skill guides you to build an infinite Flutter canvas with multi touch handling using InteractiveViewer and CustomMultiChildLayout for flexible layouts.

flutterfrontenddesignux

🎨 Spatial Swiftui Developer

This skill guides building visionOS SwiftUI scenes with RealityKit content, helping you choose between SwiftUI and RealityKit APIs and bridging them

frontenddesignuxscripting