skills.rest
xfz1987
xfz1987COMMUNITY
Explore all skills by this author →
GitHub

react-typescript

Guide React 18 TypeScript projects with Vite through standardized coding conventions.

1|3|Updated Jan 17, 2026
Search Tags:#typescript#accessibility#frontend#react#hooks#component#best-practices
One-click install
npx skills add https://github.com/xfz1987/ai-agents-marketplace --skill react-typescript-xfz1987
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-typescript
Source: https://github.com/xfz1987/ai-agents-marketplace/tree/main/.agent/skills/react-typescript
Command: npx skills add https://github.com/xfz1987/ai-agents-marketplace --skill react-typescript-xfz1987

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often struggle with inconsistent React + TypeScript practices, leading to code debt and maintainability issues. This guide provides standardized patterns and guidelines to ensure scalable, robust, and accessible frontend code across projects.

Core Features & Use Cases

  • Standardized component structure, typing, and naming conventions for React 18+ projects.
  • Practical patterns for hooks, state management, performance optimization, and integration with libraries like Vite, Framer Motion, wagmi/viem, and TanStack Query.
  • Real-world use cases including scaffolding, code reviews, and refactoring tasks to align with best practices.

Quick Start

Apply these guidelines when scaffolding or auditing a React + TypeScript module to ensure type-safety, consistent architecture, and accessible UI.

Frequently Asked Questions about react-typescript

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

FAQPage Schema
What are the best practices for structuring React components with TypeScript in scalable apps?▼

React and TypeScript best practices for scalable apps involve enforcing type safety, standardized component structure, naming conventions, and accessibility standards to eliminate code debt and improve maintainability.

How do I write type-safe custom hooks and manage state in React 18 using TypeScript?▼

Writing type-safe custom hooks and state management in React 18 requires applying practical TypeScript patterns and performance-oriented conventions to ensure robust component logic and consistent data fetching.

Can I use these React TypeScript patterns with Vite, TanStack Query, and wagmi/viem?▼

Yes, these React TypeScript coding standards apply directly to React 18 projects using Vite, providing practical integration patterns for libraries like TanStack Query, wagmi/viem, and Framer Motion.

How do I review and refactor existing React TypeScript components for accessibility?▼

Reviewing and refactoring React components for accessibility involves applying standardized component structure conventions and testing guidelines to align existing codebases with type safety and accessibility standards.

Why should frontend teams enforce strict TypeScript coding standards for React development?▼

Enforcing strict TypeScript coding standards for React development solves the problem of inconsistent frontend practices, preventing code debt and ensuring robust, maintainable, and accessible UI across projects.

Related Skills

Explore More Software Engineering Skills→
sayali-ingle-pdlsayali-ingle-pdl

tsconfig

Generate a tsconfig.json with @/ path alias, Jest types, and Vite client types.

Community
Basic
devon87warren-afkdevon87warren-afk

web-design-guidelines

Review UI code against Web Interface Guidelines for accessibility and best practices.

Community
Intermediate
LuisSambranoLuisSambrano
7

wagmi

Integrate Celo blockchain wallet connections and contract interactions in React apps.

Community
Intermediate
memorysavermemorysaver

vercel-composition-patterns

Replace boolean props with explicit variant components and shared context in React.

Community
Basic