tl-react-style-guide

Enforce React component style rules for TypeScript, Tailwind CSS, and Next.js App Router.

Updated Feb 21, 2026

Search Tags:#typescript #react #style guide #next.js #tailwind css #component development

Ready to run

npx skills add https://github.com/hilaryosborne/skills --skill tl-react-style-guide

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tl-react-style-guide
Source: https://github.com/hilaryosborne/skills/tree/main/tech-lead/tl-react-style-guide
Command: npx skills add https://github.com/hilaryosborne/skills --skill tl-react-style-guide

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Ensures all React code within a project adheres to a consistent set of conventions, improving readability, maintainability, and developer collaboration.

Core Features & Use Cases

Component Definition: Standardizes arrow function components, prop typing, and destructuring.
File Naming & Structure: Enforces dot-notation for file names and single default exports per file.
Component Architecture: Promotes compound component patterns and context-based data fetching.
Use Case: When a new developer joins a React project, this skill can be used to guide them in writing new components that perfectly match the existing codebase's style, preventing style drift.

Quick Start

Apply the React component style guide to the provided code snippet.

Frequently Asked Questions about tl-react-style-guide

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

FAQPage Schema

How do I standardize React component code for consistency across a team?▼

To standardize React component code, enforce conventions for arrow function components, prop typing, and file naming using a style guide. This ensures consistent component definition, file structure, and export rules across the project.

What is the best way to structure Next.js App Router components with TypeScript?▼

The best way to structure Next.js App Router components is to use dot-notation for file names, maintain single default exports, and order internal files logically. This architecture improves readability and maintainability.

How do I enforce a React style guide for TypeScript and Tailwind CSS?▼

You can enforce a React style guide by applying rules for TypeScript typing, Tailwind CSS styling, and component architecture. This standardizes code style preferences and prevents style drift among developers.

How does the compound component pattern work for React data fetching?▼

The compound component pattern uses context-based data fetching to structure React components. By combining context providers with TanStack Query, data fetching and state management are centralized within the component architecture.

Can I use Zod validation and custom hooks in a React style guide?▼

Yes, a React style guide can include Zod validation and custom hook extraction. Integrating these standardizes data modeling and logic separation, ensuring consistent validation and state management patterns.

When do I need a React style guide for my codebase?▼

You need a React style guide when multiple developers contribute to a project and code consistency is required. It prevents style drift and helps new team members write code that matches existing conventions immediately.