ui-ux-specialist

Name: ui-ux-specialist
Availability: InStock
Author: juprem

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

Ready to run

npx skills add https://github.com/juprem/sandbox-react --skill ui-ux-specialist-juprem

💬 Prompt for ChatGPT / Claude Chat▼

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.