Communitygithub.com

TomasValleDuran/ui-stack-advisor

Curated, up-to-date knowledge of UI component libraries, animation libraries and building blocks (icons, charts, tables, forms, toasts, drag-and-drop, virtualization, rich text) for web (React, Next.js, Vue, Svelte, Solid, Angular) and mobile (React Native/Expo, Flutter, SwiftUI, Jetpack Compose), with a decision process for picking one. Use this whenever a project is being started or scaffolded, when the user asks "which UI library / component library / design kit should I use", compares libraries (shadcn vs MUI vs Mantine, Tamagui vs NativeWind, etc.), needs a specific widget (date picker, data table, command palette, carousel, bottom sheet, chart), wants "cool animated components", or when you are about to hand-roll a component that a mature library already solves well.

What is ui-stack-advisor?

ui-stack-advisor is a Claude Code agent skill that curated, up-to-date knowledge of UI component libraries, animation libraries and building blocks (icons, charts, tables, forms, toasts, drag-and-drop, virtualization, rich text) for web (React, Next.js, Vue, Svelte, Solid, Angular) and mobile (React Native/Expo, Flutter, SwiftUI, Jetpack Compose), with a decision process for picking one. Use this whenever a project is being started or scaffolded, when the user asks "which UI library / component library / design kit should I use", compares libraries (shadcn vs MUI vs Mantine, Tamagui vs NativeWind, etc.), needs a specific widget (date picker, data table, command palette, carousel, bottom sheet, chart), wants "cool animated components", or when you are about to hand-roll a component that a mature library already solves well.

Works with~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/TomasValleDuran/pomos-skillzzeria/tree/HEAD/plugins/skillzzeria/skills/ui-stack-advisor
View original→Browse all skills

Ask in your favorite AI

Open a new chat with this agent skill pre-loaded.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

UI Stack Advisor

Picking the stack is the highest-leverage UI decision in a project: it fixes accessibility quality, theming flexibility, bundle size and how "templated" the result looks. Make the pick deliberately, once, and write it down.

Knowledge snapshot: November 2026. Libraries move fast — before installing, confirm the current major version and API (see Freshness check). Prefer what's already in the project over anything listed here.

Step 1 — Read the project first

Check package.json / pubspec.yaml / Package.swift / build.gradle for existing UI libs, styling (Tailwind version, CSS-in-JS), framework version, and any components.json (shadcn), DESIGN.md, or token files. Don't introduce a second component library next to an existing one — extend the existing one or wrap it. If the project already uses a competitor to a recommendation here, mention it but don't churn dependencies unasked.

Step 2 — Answer five questions

  1. Platform(s): web only, mobile only, or both from one codebase?
  2. Ownership: copy-in source you own and restyle freely (shadcn model) vs. a versioned dependency with a theme API (MUI/Mantine model)? Copy-in = maximum design freedom + you maintain it. Dependency = faster, consistent, upgrades for free, harder to make distinctive.
  3. Product type: marketing/landing (expressive, motion-heavy), product UI/dashboard (dense, consistent, keyboard-friendly), content (typography-first), mobile consumer app (native feel, gestures).
  4. Accessibility bar: public sector / enterprise / EU (European Accessibility Act) → choose primitives with proven a11y (React Aria, Base UI, Radix) and don't hand-roll interactive widgets.
  5. Styling system: Tailwind v4 (default for new web projects), CSS Modules/vanilla-extract, or CSS-in-JS; on RN: NativeWind vs Unistyles vs Tamagui.

Step 3 — Default picks (when nothing else constrains)

SituationDefaultWhy
React/Next.js product UIshadcn/ui (Base UI primitives — the default since July 2026; Radix and React Aria also supported) + Tailwind v4You own the code, great a11y, huge ecosystem of registries, AI tooling knows it well
React, accessibility-critical / complex widgets (date ranges, comboboxes, drag & drop, i18n)React Aria Components (or shadcn's React Aria variant / HeroUI v3, which is built on it)Most rigorous a11y + i18n behavior
React, batteries-included, no TailwindMantine100+ components + hooks + forms + dates, strong docs
React, enterprise/Material look or heavy data gridsMUI v9 (+ MUI X Data Grid/Date Pickers/Charts)Mature, complete; harder to make distinctive
Enterprise admin (esp. CN/APAC teams)Ant DesignHuge component set, data-dense patterns
Vue / NuxtNuxt UI v4 (free, built on Reka UI + Tailwind v4) or shadcn-vue
Svelte / SvelteKitshadcn-svelte (on Bits UI)
SolidKobalte / solid-ui (shadcn port) / Ark UI
AngularSpartan UI (shadcn-like) or Angular Material / PrimeNG
Framework-agnostic primitivesArk UI (Zag.js state machines; React/Vue/Solid/Svelte)
Marketing / landing page flairshadcn + Motion + selected pieces from Magic UI / Aceternity / Animate UI / React BitsUse 1–3 signature effects, not a collage
React Native / Expo (new app)Expo + Expo Router + NativeWind v5 + React Native Reusables (shadcn for RN) or HeroUI Native; @expo/ui for truly native SwiftUI/Compose controls; Reanimated 4 + Gesture Handler for motion
React Native, StyleSheet-style perf focusUnistyles 3 + your own components
React Native + web from one codebaseTamagui (compiler, universal) or Expo + NativeWind with react-native-web
FlutterMaterial 3 (built-in) / Cupertino; forui or shadcn_ui for a non-Material look
iOS nativeSwiftUI system components (Liquid Glass on iOS 26+ comes free with standard controls)Fight the platform as little as possible
Android nativeJetpack Compose Material 3 (Expressive APIs in material3 1.5 line)

Details, alternatives and trade-offs per platform live in the references — read the one that matches:

  • references/web-react.md — React primitives, styled kits, shadcn ecosystem & registries, Tailwind tooling
  • references/web-other.md — Vue, Svelte, Solid, Angular, Astro, plain HTML/web components
  • references/mobile.md — React Native/Expo, Flutter, SwiftUI, Compose, Kotlin Multiplatform
  • references/motion.md — animation libraries per platform and when CSS/native is enough
  • references/building-blocks.md — icons, fonts, charts, tables, forms, toasts, dates, DnD, virtualization, editors, command menus, carousels, maps, 3D
  • references/inspiration.md — where to look for references (Mobbin, Refero, etc.) and AI design tooling

Step 4 — Record the decision

Write the choice into the project (DESIGN.md or README "UI stack" section): library + version, styling approach, icon set, motion library, font, and why. Future sessions (and other agents) will read it instead of re-deciding.

Freshness check (do this before installing)

npm view <pkg> version time.modified repository.url   # current version + last publish
npm view <pkg> deprecated                               # deprecation notice, if any
# Flutter: https://pub.dev/packages/<pkg> (likes, pub points, last publish)
# Swift: check the repo's latest release tag

Signals to avoid a library: no release in 12+ months with open critical issues, README says "unmaintained/archived", peer deps pinned to old React/RN, no TypeScript types, a11y issues ignored. Known retired/at-risk examples: react-beautiful-dnd (deprecated → use @atlaskit/pragmatic-drag-and-drop or dnd kit), @base-ui-components/react (renamed → @base-ui/react), Chakra v2 APIs (v3 is a rewrite on Ark UI/Panda), Reanimated 2/3 gesture APIs (useAnimatedGestureHandler removed in v4).

If docs MCPs are available (e.g. Context7, shadcn MCP, the Figma MCP for design-system lookups), use them to read current docs instead of relying on memory.

Anti-patterns

  • Two component libraries in one app (MUI + shadcn) → inconsistent focus, spacing, theming.
  • Hand-rolling dialogs, menus, comboboxes, date pickers, toasts, tooltips → accessibility bugs (focus trap, escape, aria, scroll lock, collision). Use primitives.
  • Installing an "animated components" library wholesale → copy only the 1–3 pieces you need.
  • Using a web UI kit inside React Native via webviews, or forcing Material components on iOS users.
  • Leaving the library's default theme untouched → the "every shadcn app looks the same" problem. Change at minimum: font, radius, accent color, neutral temperature, and density (see design-system-builder and color-theory skills).

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

TomasValleDuran/color-theory

Color theory and palette engineering for UI on any platform (web, iOS, Android, Flutter, React Native). Choose and derive brand palettes, build tonal ramps, tinted neutrals and status colors, map them to light/dark semantic tokens, and verify contrast (WCAG 2.2 + APCA) and color-blind safety with a bundled zero-dependency OKLCH tool. Use this whenever the user picks, generates, critiques or fixes colors — "what colors should I use", brand color, palette, color scheme, theme, dark mode colors, accent, gradient, "this looks dull/garish", contrast problems, color-blind friendliness, or turning one hex into a full system — even if they don't say "color theory".

TomasValleDuran/design-system-builder

Create, extend, or audit a design system for any project and platform — design tokens (color, typography, spacing, radius, elevation, motion, breakpoints), token architecture (primitive → semantic → component), the W3C DTCG token format, theming (light/dark, brands, density), multi-platform output (CSS variables, Tailwind v4 @theme, React Native, Flutter, SwiftUI, Compose), component API conventions, documentation (DESIGN.md, Storybook) and governance. Use this whenever the user starts a new app and needs a visual foundation, says "design system", "design tokens", "theme", "style guide", "UI kit", "make it consistent", "set up Tailwind theme", wants to unify inconsistent UI, extract tokens from existing code or Figma, support dark mode or multiple brands, or share styles between web and mobile.

TomasValleDuran/ui-ux-playbook

The entry point for any UI/UX work on web or mobile — the end-to-end workflow (brief → direction → system → stack → build → motion → verify), industry standards and best practices (WCAG 2.2, Apple HIG, Material 3, Nielsen heuristics, Laws of UX, Core Web Vitals, forms, navigation, states, i18n), a pre-ship UI checklist, and a routing map telling you which specialized design/animation/color/library skill to load for each sub-task. Use this whenever you start or plan a frontend or mobile app, build or redesign screens, review UI/UX quality, answer "what's the best practice for X" in interface design, or when several design skills could apply and you need to decide which.

Related Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community