frontend-dev-guidelines

Standardize React/TypeScript frontend development with Suspense-based data fetching and feature-based structure.

3|Updated Jan 17, 2026

Search Tags:#typescript #suspense #frontend #react #routing #styling #lazy-loading

Ready to run

npx skills add https://github.com/zircote/agents --skill frontend-dev-guidelines-zircote

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/zircote/agents/tree/main/skills/frontend-development
Command: npx skills add https://github.com/zircote/agents --skill frontend-dev-guidelines-zircote

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend development guidelines for React/TypeScript projects, establishing a cohesive set of best practices to improve velocity, quality, and maintainability across teams.

Core Features & Use Cases

Patterns for Suspense-based data fetching, lazy loading, and code-splitting with React components and TanStack Router.
File organization around a features directory and reusable components to enable scalable growth.
Styling with MUI v7 sx-based approach and TypeScript-first practices for reliable typings.

Quick Start

Start every new React/TypeScript feature by applying the frontend guidelines to ensure consistency and quality.

Frequently Asked Questions about frontend-dev-guidelines

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

FAQPage Schema

What are the best practices for structuring a React and TypeScript project?▼

React and TypeScript projects should use a feature-based directory structure with reusable components. This organization separates features and shared UI elements to enable scalable growth and maintain consistent architecture across teams.

How do I implement Suspense-based data fetching with React?▼

Suspense-based data fetching in React is implemented by applying standardized patterns for lazy loading and code-splitting. Combined with TanStack Router, this approach ensures consistent component lifecycles and reliable data handling across new features.

Does this frontend development approach work with TanStack Router and MUI v7?▼

Yes, this frontend development approach supports TanStack Router for routing and MUI v7 for styling. It enforces an sx-based styling approach alongside TypeScript-first practices to ensure reliable typings and cohesive UI architecture.

How do I standardize frontend coding patterns across multiple React projects?▼

Standardize frontend coding patterns across React projects by enforcing requirements for Suspense data fetching, feature-based directory structures, MUI v7 styling, and TypeScript best practices. This unifies modern patterns for faster, maintainable development.

When do I need to use lazy loading and code-splitting in React applications?▼

Lazy loading and code-splitting in React applications are needed when implementing Suspense-based data fetching patterns and routing with TanStack Router. These techniques optimize performance during the component lifecycle and ongoing frontend code maintenance.