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

Ready to run

npx skills add https://github.com/tgautier/dotfiles --skill react-tgautier

💬 Prompt for ChatGPT / Claude Chat▼

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.