skills.rest
joshkellett87
joshkellett87COMMUNITY
Explore all skills by this author →
GitHub

frontend-dev-guidelines

Standardize React and TypeScript frontend development with project conventions.

Updated Jan 14, 2026
Search Tags:#typescript#architecture#frontend#react#routing#styling
One-click install
npx skills add https://github.com/joshkellett87/useful-skills --skill frontend-dev-guidelines-joshkellett87
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
maxenergymaxenergy

setup-pre-commit

Automate Husky pre-commit hook setup with lint-staged and Prettier for JavaScript/TypeScript projects.

Community
Intermediate
raulnqraulnq

add_frontend_feature

Generate React 19 frontend feature files with routing and data fetching.

Community
Intermediate
chef0111chef0111
1

frontend-development

Provide React/TypeScript frontend development guidelines covering components, data fetching, routing, and styling.

Community
Advanced
PatrickjoshanedezPatrickjoshanedez

discover-frontend

Guide frontend development with React, Next.js, and state management best practices.

Official
Intermediate