skills.rest
duc01226
duc01226COMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-dev-guidelines

Codify React and TypeScript frontend architecture patterns into consistent standards.

Updated Feb 12, 2026
Search Tags:#typescript#suspense#frontend#react#routing#patterns#mui
One-click install
npx skills add https://github.com/duc01226/SoftwareDevCareers --skill frontend-dev-guidelines-duc01226
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/duc01226/SoftwareDevCareers/tree/main/.claude/skills/frontend-development
Command: npx skills add https://github.com/duc01226/SoftwareDevCareers --skill frontend-dev-guidelines-duc01226

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Establishes a centralized set of frontend development guidelines to ensure consistent React/TypeScript projects with modern patterns such as Suspense, lazy loading, and TanStack Router.

Core Features & Use Cases

  • Frontend guidelines covering React/TypeScript apps with patterns like Suspense-based data fetching, lazy loading, file organization with features directory, MUI v7 styling, TanStack Router, and performance optimizations.
  • Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.
  • Real-world example: standardize component structure and data-fetching approach across teams to reduce cognitive load.

Quick Start

Start by applying these guidelines when initializing a React/TypeScript frontend project to ensure consistent, scalable code.

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 frontend project?▼

Structure React and TypeScript projects using a feature-oriented directory organization with modular folders for features, API calls, components, and hooks to ensure scalable code and reduce cognitive load across teams.

How do I implement data fetching with Suspense and TanStack Query in React?▼

Implement Suspense-based data fetching by combining TanStack Query with React Suspense boundaries and lazy loading. This pattern standardizes component creation and optimizes performance for modern React applications.

Does this frontend guideline support routing with TanStack Router and MUI v7 styling?▼

Yes, the guidelines support routing with TanStack Router and styling with MUI v7. They enforce consistent standards across component creation, routing, and styling while maintaining strict TypeScript typing.

How do I enforce strict TypeScript typing and best-practice imports in a React project?▼

Enforce strict TypeScript typing by applying best-practice imports and alias usage across component creation and data fetching. This maintains consistent standards and modular organization within React projects.

When should I use lazy loading and Suspense boundaries in React frontend architecture?▼

Use lazy loading and Suspense boundaries when fetching data or loading components to optimize performance. These modern patterns are codified into consistent standards to reduce cognitive load during frontend development.

Can these React and TypeScript guidelines be applied to existing frontend codebases?▼

Yes, apply these guidelines when creating components, pages, features, or routing to standardize structure. They can be integrated into existing React and TypeScript projects to enforce modular organization and strict typing.

Related Skills

Explore More Software Engineering Skills→
NammDevNammDev
2

frontend-dev-guidelines

Automate React/TypeScript frontend architecture guidance with MUI v7 and TanStack Router.

Community
Advanced
Dimon94Dimon94
111

frontend-dev-guidelines

Provide React/TypeScript frontend guidelines covering Suspense data fetching, lazy loading, MUI v7, and TanStack Router.

Community
Intermediate
IoT-VNIoT-VN

frontend-dev-guidelines

Standardize React and TypeScript frontend development with modern patterns and libraries.

Community
Advanced
Rok2025Rok2025

frontend-dev-guidelines

Enforces React and TypeScript frontend development standards including Suspense-first data fetching and TanStack Router routing.

Community
Advanced