frontend-dev-guidelines

Standardize React and TypeScript frontend development with project conventions.

Updated Jan 14, 2026

Search Tags:#typescript #architecture #frontend #react #routing #styling

Ready to run

npx skills add https://github.com/joshkellett87/useful-skills --skill frontend-dev-guidelines-joshkellett87

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a centralized, scalable set of frontend development practices for React and TypeScript projects to improve consistency, performance, and maintainability across teams.

Core Features & Use Cases

Patterns for Suspense-based data fetching, lazy loading, and useSuspenseQuery to simplify data loading in components.
File organization guidance with a features directory, routes, and modular styling conventions.
Styling and UI guidelines for MUI v7, TypeScript best practices, and efficient component design.
When to apply these guidelines for creating components, pages, features, or routing in frontend work.

Quick Start

Follow this guide when creating new components, pages, or features to align with the team’s frontend standards.

Frequently Asked Questions about frontend-dev-guidelines

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

FAQPage Schema

How do I structure a React and TypeScript project for scalability?▼

Structure React and TypeScript projects using a feature-based directory organization. This approach separates routes, components, and modular styling conventions into dedicated feature folders to improve maintainability across teams.

What is the best way to handle data fetching in modern React applications?▼

Handle data fetching in modern React by using Suspense-based data loading with the useSuspenseQuery hook. This pattern simplifies data loading management directly within components and enforces asynchronous rendering.

Does this frontend architecture guideline require a specific routing library?▼

Yes, this frontend architecture standardizes routing using TanStack Router. It enforces TanStack Router usage alongside MUI v7 styling and TypeScript best practices for modern React application development.

Can I use these React and TypeScript conventions with other styling libraries?▼

These React and TypeScript conventions specifically enforce MUI v7 styling guidelines. Using other styling libraries is not covered by this standard, which focuses on MUI v7 for efficient component design.

When should I apply Suspense-based data loading in React components?▼

Apply Suspense-based data loading when creating new components, pages, or features in React. This standardizes data fetching patterns to align with team frontend standards and simplify component logic.