skills.rest
buchananwill
buchananwillCOMMUNITY
Explore all skills by this author →
GitHub

scaffold-dashboard-patterns

Codify dashboard SPA patterns for Mantine, TanStack Router, and TanStack Query.

2|Updated Mar 17, 2026
Search Tags:#react#tanstack-query#ui-patterns#tanstack-router#mantine#dashboard-patterns
One-click install
npx skills add https://github.com/buchananwill/ue-claude-scaffold --skill scaffold-dashboard-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: scaffold-dashboard-patterns
Source: https://github.com/buchananwill/ue-claude-scaffold/tree/main/skills/scaffold-dashboard-patterns
Command: npx skills add https://github.com/buchananwill/ue-claude-scaffold --skill scaffold-dashboard-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Teams building admin dashboards often diverge on UI patterns, routing practices, and data-fetching strategies, leading to inconsistent experiences and longer onboarding times.

Core Features & Use Cases

  • Establishes a set of conventions for UI components, theming with Mantine, routing with TanStack Router, and data synchronization with TanStack Query.
  • Guides project structure and coding patterns for scalable dashboards, enabling rapid bootstrapping and consistent maintenance across teams.
  • Use Case: A new dashboard project can be scaffolded quickly by applying the recommended patterns to achieve cohesive UI, routing, and server-state behavior.

Quick Start

Install dependencies and apply the Mantine-based UI and TanStack patterns to bootstrap a consistent dashboard codebase.

Frequently Asked Questions about scaffold-dashboard-patterns

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

FAQPage Schema
How do I structure a React admin dashboard with Mantine and TanStack Router?▼

Structure a React admin dashboard by applying codified conventions for component layout, theming, and routing using Mantine and TanStack Router. This provides a cohesive project structure that ensures consistent UI and scalable route management across teams.

What's the best way to manage server state in a React dashboard SPA?▼

Manage server state in a React dashboard SPA using TanStack Query for data fetching and caching. Applying established conventions for query synchronization ensures consistent server-state behavior and reduces onboarding time for new team members.

Does this dashboard pattern work with Vite and TanStack Query?▼

Yes, these dashboard patterns are designed for projects built with Vite, Mantine, TanStack Router, and TanStack Query. The conventions apply directly to this stack to guide project bootstrapping and ongoing maintenance.

How do I bootstrap a consistent React dashboard codebase quickly?▼

Bootstrap a consistent React dashboard codebase by installing dependencies and applying the recommended Mantine UI and TanStack patterns. This achieves cohesive UI, routing, and server-state behavior to rapidly scaffold a new project.

Why do teams need standardized conventions for dashboard SPAs?▼

Teams need standardized conventions for dashboard SPAs to prevent divergence on UI patterns, routing practices, and data-fetching strategies. Establishing these conventions eliminates inconsistent experiences and significantly reduces onboarding time.

Related Skills

Explore More Software Engineering Skills→
MadAppGangMadAppGang
278

tanstack-router

Configure type-safe file-based routes for React with TanStack Router.

Official
Intermediate
raulnqraulnq

add_frontend_feature

Generate React 19 frontend feature files with routing and data fetching.

Community
Intermediate
lips85lips85

frontend-dev-guidelines

Guide React frontend development with Suspense, lazy loading, and TypeScript best practices.

Community
Advanced
daithang-organizationdaithang-organization

React + Ant Design Frontend Development

Builds a React frontend with TypeScript, Vite, and Ant Design.

Official
Intermediate