skills.rest
tgautier
tgautierCOMMUNITY
Explore all skills by this author →
Website𝕏@_tgautierGitHub

react

Automate server-first React Router v7 patterns with loaders and actions.

2|1|Updated Jun 30, 2019
Search Tags:#typescript#react#patterns#api-client#react-router#server-side-rendering
One-click install
npx skills add https://github.com/tgautier/dotfiles --skill react-tgautier
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react
Source: https://github.com/tgautier/dotfiles/tree/main/claude/skills/react
Command: npx skills add https://github.com/tgautier/dotfiles --skill react-tgautier

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Server-first React patterns for production apps using React Router v7 reduce boilerplate, improve SSR correctness, and provide a consistent data and UI lifecycle.

Core Features & Use Cases

  • Route loaders and actions patterns for server-side data fetching and mutations
  • Server-first data handling with revalidation and error boundaries
  • Type-safe API client integration and structured action responses
  • Accessible component design, testing guidance, and tooling integration
  • Use cases: building data-driven dashboards, enterprise portals, or SSR-rendered marketing sites

Quick Start

Follow the included guides to scaffold a server-rendered React app using React Router v7 patterns and SSR.

Frequently Asked Questions about react

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

FAQPage Schema
What is the best way to implement server-side rendering with React Router v7?▼

Server-side rendering with React Router v7 is best implemented using server-first patterns with route loaders and actions for data fetching. This approach reduces boilerplate and improves SSR correctness.

How do I handle data fetching and mutations in a server-first React application?▼

Data fetching and mutations in a server-first React app are handled using route loaders and actions. This pattern executes data fetching on the server-side with type-safe API clients and structured action responses.

Does this React Router v7 pattern support type-safe API client integration?▼

Yes, the React Router v7 pattern supports type-safe API client integration. It applies structured action responses and TypeScript guidance to ensure robust data handling for production applications.

How do I manage revalidation and error boundaries in React Router?▼

Revalidation and error boundaries in React Router are managed through server-first data handling patterns. This ensures mutations trigger data revalidation while error boundaries catch structural failures gracefully.

Can I build accessible and responsive UIs using these React patterns?▼

Yes, you can build accessible and responsive UIs using these React patterns. The approach includes guidance files for UX design and CSS responsive styling to support tooling and production-ready component design.

Related Skills

Explore More Software Engineering Skills→
Sienci-LabsSienci-Labs
363

integration-react-react-router-7-declarative

Integrate PostHog analytics into React Router v7 declarative apps.

Official
Intermediate
BrunoAMSilvaBrunoAMSilva

astro

Detect Astro output modes and apply client directive strategies.

Community
Intermediate
VYRE-StudiosVYRE-Studios

frontend-design

Design responsive, accessible UI components with semantic HTML and WCAG AA compliance.

Official
Intermediate
grvpanchalgrvpanchal
1

server-ssr

Coordinates SSR HTML generation, hydration, and data fetching for Next.js and Express applications.

Community
Advanced