Skip to main content

UI & UX

40 skills. Source of truth: skills/.

The shared catalog has 41 entries; mini carries 40 portable entries. Full-only Impeccable is excluded; prometheus-impeccable-core is a bounded adaptation, not native-engine parity. See UI/UX routing for selective loading, project authority and completed-phase review. User-only entries are never invoked automatically.

android-compose-adaptive​

Instructions to make or update an app's UI so that it adapts to different Android devices including phones, tablets, foldables, laptops, desktop, TV, Auto and XR. It includes how to handle different window sizes, pointing devices (such as mouse) and text entry devices (such as keyboard) using the Compose MediaQuery API. It also covers multi-pane layouts using Navigation3 Scenes, adaptive UI components (such as buttons) with varying target sizes, and adaptive layouts (including navigation areas - nav rails and nav bars) using the Compose Grid and FlexBox APIs.

v1.0.0-prometheus.1 · ui ux android-compose-adaptive · source

android-edge-to-edge​

Use this skill to migrate your Jetpack Compose app to add adaptive edge-to-edge support and troubleshoot common issues. Use this skill to fix UI components (like buttons or lists) that are obscured by or overlapping with the navigation bar or status bar, fix IME insets, and fix system bar legibility.

v1.0.0-prometheus.1 · ui ux android-edge-to-edge · source

better-accessibility​

Helps your project comply with accessibility standards and best practices.

v1.0.0-prometheus.1 · ui ux better-accessibility · source

better-colors​

Helps you build a color system and answer anything about color in your project. You can generate palettes, use semantic tokens, convert between formats, check contrast and more.

v1.0.0-prometheus.1 · ui ux better-colors · source

better-interface​

Combines all of the better-* skills into a single review across accessibility, layout, writing, typography, color and UI polish.

v1.0.0-prometheus.1 · ui ux better-interface · source

better-layout​

Helps with grouping, alignment, reading order, progressive disclosure and other details that make a good layout.

v1.0.0-prometheus.1 · ui ux better-layout · source

better-typography​

Focuses on type scale, spacing, sizing, variable fonts, OpenType features, wrapping, truncation and other details that make typography feel great across your product.

v1.0.0-prometheus.1 · ui ux better-typography · source

better-ui​

Polishes and improves the UI in your project. Covers concentric border radius, optical alignment, surface depth, contextual icons, hit areas and more.

v1.0.0-prometheus.1 · ui ux better-ui · source

better-writing​

Focuses on improving product copy in your project.

v1.0.0-prometheus.1 · ui ux better-writing · source

break​

Renders a component you choose in every state and scenario on a temporary page and stress tests it.

v1.0.0-prometheus.1 · User-only invocation · ui ux break · source

design-taste-frontend​

Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.

v1.0.0-prometheus.1 · ui ux design-taste-frontend · source

design-taste-frontend-v1​

The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is design-taste-frontend (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.

v1.0.0-prometheus.1 · ui ux design-taste-frontend-v1 · source

explain-interface​

Helps you figure out how something was built on the web.

v1.0.0-prometheus.1 · User-only invocation · ui ux explain-interface · source

expo-animation​

Framework (OSS). Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use animate.

v1.0.0 · ui ux expo-animation · source

expo-design-system​

Framework (OSS). Build and maintain a design system inside an Expo app - a reusable theme of design tokens (color, spacing, typography, radius, shadow, motion), reusable component structure with variant/size/state prop conventions, and rules for when to extract a repeated view into a shared component. Use when creating or organizing theme files and design tokens (theme.ts / theme/), extending an existing theme or styling library (NativeWind, Tamagui, Restyle, Unistyles) in its own idiom, standardizing styles so screens (including AI-generated ones) look consistent and polished, fixing an app that looks AI-generated or generic instead of native (the named native-slop tells), building an in-app component library, or auditing an app for design-system drift (hardcoded colors, spacing, fonts). For platform styling specifics (semantic colors, HIG rules, native controls) use expo-native-ui; for folder layout of a new app use expo-project-structure.

v1.0.0 · ui ux expo-design-system · source

expo-native-ui​

Framework (OSS). Build beautiful, native-feeling Expo screens. Covers Apple HIG styling, semantic colors, native controls, SF Symbols, media, visual effects, gradients, storage, and responsive layout. For routing and navigation, use the expo-router skill; for motion and animation, use the expo-animation skill.

v1.1.1 · ui ux expo-native-ui · source

expo-router​

Framework (OSS). Navigation and routing for Expo Router. Covers file-based routes, groups and dynamic routes, folder organization, Link with previews and context menus, native Stack, page titles, modals and form sheets, NativeTabs, headers and toolbars, and header search bars.

v1.0.1 · ui ux expo-router · source

expo-ui​

Framework (OSS). Build native UI with the @expo/ui package: real SwiftUI on iOS and Jetpack Compose on Android. Default to @expo/ui for sheets (BottomSheet), pickers, sliders, toggles, menus, and grouped-form sections — do NOT reach for Reanimated, @gorhom/bottom-sheet, or RN built-in Picker/Switch; use @expo/ui instead. Fall back to RN built-ins only when @expo/ui is missing the component. NOTE: @expo/ui List renders native grouped rows like an iOS Settings screen — it is NOT a virtualized list; use FlatList/FlashList for large datasets. Covers universal components (Host, Column, Row, Button, Text, List, BottomSheet, FieldGroup, Switch, Slider, Picker, Menu), drop-in replacements for RN community libraries, and platform-specific SwiftUI/Jetpack Compose trees. Not for Expo Router navigation, Reanimated, or data fetching.

v1.0.0 · ui ux expo-ui · source

flutter-build-responsive-layout​

Use LayoutBuilder, MediaQuery, or Expanded/Flexible to create a layout that adapts to different screen sizes. Use when you need the UI to look good on both mobile and tablet/desktop form factors.

v1.0.0-prometheus.1 · ui ux flutter-build-responsive-layout · source

flutter-fix-layout-issues​

Fixes Flutter layout errors (overflows, unbounded constraints) using Dart and Flutter MCP tools. Use when addressing "RenderFlex overflowed", "Vertical viewport was given unbounded height", or similar layout issues.

v1.0.0-prometheus.1 · ui ux flutter-fix-layout-issues · source

flutter-setup-declarative-routing​

Configure MaterialApp.router using a package like go_router for advanced URL-based navigation. Use when developing web applications or mobile apps that require specific deep linking and browser history support.

v1.0.0-prometheus.1 · ui ux flutter-setup-declarative-routing · source

flutter-setup-localization​

Add flutter_localizations and intl dependencies, enable "generate true" in pubspec.yaml, and create an l10n.yaml configuration file. Use when initializing localization support for a new Flutter project.

v1.0.0-prometheus.1 · ui ux flutter-setup-localization · source

full-output-enforcement​

Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.

v1.0.0-prometheus.1 · ui ux full-output-enforcement · source

gpt-taste​

Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing.

v1.0.0-prometheus.1 · ui ux gpt-taste · source

high-end-visual-design​

Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic.

v1.0.0-prometheus.1 · ui ux high-end-visual-design · source

industrial-brutalist-ui​

Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.

v1.0.0-prometheus.1 · ui ux industrial-brutalist-ui · source

interface-review​

Reviews your work across multiple categories like UI, typography, layout, color, writing and accessibility and gives you a detailed analysis of the findings.

v1.0.0-prometheus.1 · User-only invocation · ui ux interface-review · source

minimalist-ui​

Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.

v1.0.0-prometheus.1 · ui ux minimalist-ui · source

prometheus-impeccable-core​

Load incumbent design context, surface mode and bounded phase review for UI tasks. Portable Prometheus adaptation of Impeccable guidance; not the native engine.

v1.0.0-prometheus.1 · ui ux prometheus-impeccable-core · source

prometheus-ui-review​

Automatically review completed UI work for scope, incumbent identity, accessibility and platform behavior in a separate read-only context, without taste-driven redesign.

v1.0.0-prometheus.1 · ui ux prometheus-ui-review · source

prometheus-ui-ux​

Route UI and UX work for designers, creative directors, implementers and reviewers through project context, Pro Max, craft and platform guidance. Use for rendered UI, styles, tokens, interaction, motion or on-screen copy; not backend-only tasks.

v1.0.0-prometheus.1 · ui ux prometheus-ui-ux · source

redesign-existing-projects​

Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.

v1.0.0-prometheus.1 · ui ux redesign-existing-projects · source

stitch-design-taste​

Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.stitch.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.

v1.0.0-prometheus.1 · ui ux stitch-design-taste · source

swiftui-pro​

Comprehensively reviews SwiftUI code for best practices on modern APIs, maintainability, and performance. Use when reading, writing, or reviewing SwiftUI projects.

v1.1 · ui ux swiftui-pro · source

ui-ux-pro-max​

Search bundled UI/UX product, style, color, typography, accessibility and platform knowledge; generate a reasoned design-system recommendation when establishing visual direction. Portable Node implementation of the pinned UI/UX Pro Max catalog.

v1.0.0-prometheus.1 · ui ux ui-ux-pro-max · source

variant​

Builds multiple variants of a component you're working on and helps you iterate and pick one.

v1.0.0-prometheus.1 · User-only invocation · ui ux variant · source

vercel-composition-patterns​

React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.

v1.0.0 · ui ux vercel-composition-patterns · source

vercel-react-best-practices​

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

v1.0.0 · ui ux vercel-react-best-practices · source

vercel-react-native-skills​

React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.

v1.0.0 · ui ux vercel-react-native-skills · source

web-design-guidelines​

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

v1.0.0 · ui ux web-design-guidelines · source