skills.rest
tale-project
tale-projectOFFICIAL
Explore all skills by this author →
WebsiteGitHub

react

Build React 19 UI with TanStack Router and gated Convex data.

20|5|Updated Nov 30, 2025
Search Tags:#frontend#react#i18n#convex#ui-patterns#tanstack-router
One-click install
npx skills add https://github.com/tale-project/tale --skill react-tale-project
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react
Source: https://github.com/tale-project/tale/tree/main/.claude/skills/react
Command: npx skills add https://github.com/tale-project/tale --skill react-tale-project

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a structured, maintainable approach for building client UI in Tale using React 19, TanStack Router, and Convex as the live data source, covering route-scoped vs shared code, gating, prefetch, and consistent styling with ui-components.

Core Features & Use Cases

  • Pattern-guided UI development: codifies where to place components, hooks, and routes under services/platform/app/** and packages/ui/** to keep dependencies clean and predictable.
  • Routing and data-fetching discipline: advocates using TanStack Router for in-app navigation and gating data access through Convex queries/mutations with proper loading, prefetch, and error handling.
  • Loading, i18n, and styling conventions: prescribes skeleton-based loading, use of i18n client utilities, and styling patterns (CVA / cn and Tailwind) across components to ensure consistency.
  • Best practices for reuse and maintenance: defines when to lift code to top-level shared paths and how to structure for testability and future evolution.

Quick Start

Start by identifying a new UI feature under services/platform/app or packages/ui, then implement it using the container/presentational pattern and gated Convex data fetching for loading and updates.

Frequently Asked Questions about react

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

FAQPage Schema
How do I structure React 19 components and hooks for scalable UI development?▼

Scalable React UI development uses the container/presentational pattern, placing shared code under packages/ui and route-scoped code under services/platform/app to maintain clean, predictable dependencies.

What's the best way to handle data fetching and routing with TanStack Router and Convex?▼

The best way to handle data fetching with TanStack Router and Convex is gating all data access through Convex queries and mutations, ensuring proper loading states, prefetching, and error handling for live data updates.

How do I implement consistent loading and styling conventions in a React application?▼

Consistent loading and styling in React is achieved by using skeleton-based loading for data fetching, CVA and cn utilities with Tailwind for styling, and i18n client utilities for internationalization across all components.

Does this React UI pattern guide support internationalization and live data updates?▼

Yes, this React UI pattern guide supports internationalization through i18n client utilities and handles live data updates by gating Convex queries and mutations with proper loading and error handling.

When should I lift React component code to top-level shared paths?▼

Lift React component code to top-level shared paths under packages/ui when the code is reused across multiple routes or services, ensuring testability and maintainability while keeping route-scoped logic separate.

Related Skills

Explore More Software Engineering Skills→
FujishigeTemmaFujishigeTemma

async-react-best-practices

Implement React 19 async features with TanStack Router and Query.

Community
Advanced
KlotzJesseKlotzJesse

react-dev

Create type-safe React components and hooks in TypeScript for React 18/19.

Community
Intermediate
cartridge-ggcartridge-gg

ui-architecture

Standardize frontend UI components with Radix, Tailwind, CVA, and Storybook.

Official
Intermediate
AmbitionsXXXVAmbitionsXXXV
2

tanstack-router

Implement type-safe file-based routing for React SPAs with TanStack Router.

Community
Advanced