skills.rest
g4rcez
g4rcezCOMMUNITY
Explore all skills by this author →
Website𝕏@garcez_allanGitHub

react-typescript-frontend

Guide React + TypeScript component implementation with consistent architecture and typing conventions.

48|2|Updated Dec 23, 2017
Search Tags:#typescript#testing#architecture#accessibility#frontend#react#patterns
One-click install
npx skills add https://github.com/g4rcez/dotfiles --skill react-typescript-frontend-g4rcez
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-typescript-frontend
Source: https://github.com/g4rcez/dotfiles/tree/main/.ai/skills/react-typescript
Command: npx skills add https://github.com/g4rcez/dotfiles --skill react-typescript-frontend-g4rcez

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide helps frontend teams implement React + TypeScript code with consistent architecture, patterns, and best practices.

Core Features & Use Cases

  • Function declarations for components to improve clarity and hoisting
  • Prop typing guidelines using type for props and interface for contracts
  • Composition, modular organization, and accessibility-conscious patterns

Quick Start

Create a new React + TypeScript component following the declared conventions for function components, typing, and accessibility.

Frequently Asked Questions about react-typescript-frontend

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

FAQPage Schema
How do I structure React components with TypeScript for better architecture?▼

Type props using the type keyword and define contracts with interface. This separation ensures consistent React TypeScript architecture, clarifying component inputs versus broader structural definitions.

What is the best way to set up typing for React component props in TypeScript?▼

Type props using the type keyword and define contracts with interface. This separation ensures consistent React TypeScript architecture, clarifying component inputs versus broader structural definitions.

How do I scaffold a new React TypeScript project following best practices?▼

Scaffold React TypeScript projects by applying functional component declarations, modular organization, and design tokens. Follow established conventions for typing, test setup, and accessibility-conscious patterns.

Does this React TypeScript guide include accessibility and testing conventions?▼

Yes, the guide includes accessibility-conscious patterns and testing conventions. It provides structural guidelines for frontend development ensuring components meet accessibility requirements and test setup standards.

When should I use type versus interface for typing in React TypeScript applications?▼

Use type for component props and interface for contracts in React TypeScript applications. This distinction maintains clear architecture by separating transient component inputs from reusable structural definitions.

Related Skills

Explore More Software Engineering Skills→
corezoidcorezoid
58

simulator-init

Initialize and configure the Simulator.Company environment with OAuth authentication and .env storage.

Official
Intermediate
DYAI2025DYAI2025
3

artifacts-builder

Create React/TypeScript HTML artifacts with Tailwind CSS and shadcn/ui.

Community
Advanced
rsnormanrsnorman

quality-check

Run ESLint, Prettier, and TypeScript type checks on code.

Community
Intermediate
ariesanhthuariesanhthu

vue-expert

Diagnose Vue 3 reactivity issues and optimize Nuxt.js performance.

Community
Advanced