skills.rest
juprem
jupremCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-specialist

Build responsive React UIs with TanStack Router, Ant Design, Panda CSS, and Motion.

Updated Mar 4, 2024
Search Tags:#react#ui-design#motion#panda-css#tanstack-router#ant-design#lucide-react
One-click install
npx skills add https://github.com/juprem/sandbox-react --skill ui-ux-specialist-juprem
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-specialist
Source: https://github.com/juprem/sandbox-react/tree/main/.gemini/skills/ui-ux-specialist
Command: npx skills add https://github.com/juprem/sandbox-react --skill ui-ux-specialist-juprem

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill helps teams build highly interactive, responsive, and visually polished user interfaces by combining TanStack Router for routing, Ant Design for components, Panda CSS for atomic styling, and Motion for animations. It ensures a cohesive design system and smooth user experiences across modern React apps.

Core Features & Use Cases

  • Type-safe routing with TanStack Router for scalable navigation and layout composition.
  • Rich UI components via Ant Design to cover complex forms, tables, and modals.
  • Atomic styling with Panda CSS for high-performance, responsive layouts.
  • Micro-interactions and animations powered by Motion/framer-motion to improve engagement.
  • Consistent iconography using Lucide React.
  • Use cases include dashboards, admin panels, form-heavy apps, and content-rich interfaces.

Quick Start

Design a responsive UI component using TanStack Router, Ant Design, Panda CSS, and Motion.

Frequently Asked Questions about ui-ux-specialist

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build polished React UIs using TanStack Router and Ant Design?▼

Build polished React UIs by combining TanStack Router for type-safe routing and Ant Design for rich components. This approach ensures scalable navigation and covers complex forms, tables, and modals for responsive applications.

What is the best way to combine Panda CSS and Framer Motion in React?▼

Combine Panda CSS and Framer Motion by using Panda CSS for high-performance atomic styling and Motion for micro-interactions. This pairing improves engagement and ensures cohesive design systems across interactive components.

Can I use TanStack Router with Ant Design for admin dashboards?▼

Yes, you can use TanStack Router with Ant Design for admin dashboards. This combination provides type-safe navigation and rich UI components suitable for form-heavy apps and content-rich interfaces.

Do I need TypeScript to use Panda CSS with TanStack Router?▼

Yes, TypeScript is required when building UIs with Panda CSS and TanStack Router. The workflow enforces a single-component-per-file rule, named exports, and structured metadata patterns for scalable React applications.

How do I add responsive animations to React components using Lucide React?▼

Add responsive animations by integrating Motion for micro-interactions and Lucide React for consistent iconography. This combination enhances visual polish and user engagement across your React application interfaces.

Related Skills

Explore More Design & Creative Skills→
mklozmkloz

react-dev

Builds type-safe React applications with TypeScript and React 19 features.

Community
Advanced
hashintelhashintel
1.6k

panda-css

Automate CSS-in-JS styling with Panda CSS design tokens and atomic output.

Official
Intermediate
zuzu59zuzu59

optimizer

Prescribe Zustand, TanStack Form, Router URL state, and Convex data access patterns.

Community
Advanced
richardadonnellrichardadonnell
45

radix-ui-design-system

Build accessible React design systems with Radix UI primitives.

Community
Advanced