skills.rest
KwaminaWhyte
KwaminaWhyteCOMMUNITY
Explore all skills by this author →
Website𝕏@KwaminaWhyteGitHub

frontend-patterns

Provide reusable React Router v7, React Query, and shadcn/ui patterns for the Rivetr dashboard.

4|Updated Dec 26, 2025
Search Tags:#react-query#shadcn-ui#frontend-patterns#component-patterns#tailwind-css#react-router-v7#rivetr-dashboard
One-click install
npx skills add https://github.com/KwaminaWhyte/rivetr --skill frontend-patterns-kwaminawhyte
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-patterns
Source: https://github.com/KwaminaWhyte/rivetr/tree/main/.claude/skills/frontend-patterns
Command: npx skills add https://github.com/KwaminaWhyte/rivetr --skill frontend-patterns-kwaminawhyte

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Reusable frontend patterns to standardize routing, data fetching, and UI components across the Rivetr dashboard, reducing duplication and friction.

Core Features & Use Cases

  • Reusable patterns for React Router v7 route definitions and layouts.
  • Standardized React Query usage for data fetching and caching.
  • Shadcn/ui and Tailwind CSS integration templates for consistent styling.
  • Use Case: When adding a new page or API integration, copy a pattern and adapt it to your context.

Quick Start

Use these patterns as the starting point for your new frontend components, routes, or API integrations in the Rivetr dashboard.

Frequently Asked Questions about frontend-patterns

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

FAQPage Schema
How do I standardize React Router v7 route definitions and layouts?▼

Standardize React Router v7 routes by applying reusable routing patterns that define consistent layouts across the Rivetr dashboard. Copy a pattern template and adapt it to your new page context to reduce duplication and friction.

How do I set up React Query for data fetching and caching in a Vite stack?▼

Set up React Query for data fetching and caching by applying standardized usage patterns designed for the Rivetr React and Vite stack. These templates ensure consistent API integration logic when adding new data-driven features to the dashboard.

What is the best way to integrate shadcn/ui and Tailwind CSS components consistently?▼

The best way to integrate shadcn/ui and Tailwind CSS consistently is to use pre-built integration templates. These patterns provide standardized styling structures so that new UI components match the existing Rivetr dashboard design without manual configuration friction.

Can I use these frontend component patterns for new API integrations?▼

Yes, you can use these frontend component patterns for new API integrations. They provide standardized structures for connecting UI components to data fetching layers, ensuring that new API integrations within the Rivetr dashboard remain consistent and maintainable.

Does the Rivetr dashboard frontend stack require specific patterns for React and Vite?▼

The Rivetr dashboard frontend stack requires specific patterns for React and Vite to maintain consistency. Using standardized templates for routing, data fetching, and UI components ensures that all new additions align with the existing architectural standards.

Related Skills

Explore More Software Engineering Skills→
jubscodesjubscodes
49

gsp-scaffold

Set up Next.js, Vite, or React Native projects with Tailwind and shadcn/ui, then verify the build.

Community
Advanced
0xjc65eth0xjc65eth
4

deployment-guardian

Validate Next.js TypeScript deployments on Vercel or Railway with pre-deploy checks.

Community
Advanced
aryankumarraiaryankumarrai

fullstack-js

Guide full-stack JavaScript development with Vite, TypeScript, and React Query.

Community
Advanced
netprtonynetprtony

shadcn-ui

Automate shadcn/ui component setup and usage in React and Next.js projects.

Community
Advanced