frontend-dev-guidelines

Name: frontend-dev-guidelines
Availability: InStock
Author: Hieubkav

Standardize React/TypeScript frontend development with feature directories and Suspense data fetching.

Updated Oct 26, 2025

Search Tags:#typescript #architecture #suspense #react #routing #mui #frontend-guidelines

Ready to run

npx skills add https://github.com/Hieubkav/wincellarCloneBackend --skill frontend-dev-guidelines-hieubkav

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/Hieubkav/wincellarCloneBackend/tree/main/.claude/skills/fullstack/frontend-dev-guidelines
Command: npx skills add https://github.com/Hieubkav/wincellarCloneBackend --skill frontend-dev-guidelines-hieubkav

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill consolidates modern React/TypeScript frontend patterns to reduce boilerplate, improve consistency, and speed up development across components, features, and routing.

Core Features & Use Cases

Suspense-based data fetching: Standardize data loading with useSuspenseQuery and Suspense boundaries.
Feature directory architecture: Organize code under a scalable features/ structure.
Styling with MUI v7: Consistent, theme-aware styling with the sx prop.
Type-safe routing: Use TanStack Router for typed, breadcrumb-friendly routes.
Performance best practices: Patterns for lazy loading, memoization, and efficient rendering.
Use Case: A new feature like a product catalog can be scaffolded with features/product/, components/, hooks/, and routes.

Quick Start

Create a new feature under features/ using the guidelines: scaffold api/, components/, hooks/, types/ and routes/, then implement a Suspense-boundary data fetch using useSuspenseQuery.

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/TypeScript project with a scalable features directory?▼

Organize your project under a features/ directory, where each feature contains api/, components/, hooks/, types/, and routes/ subdirectories. This architecture standardizes file organization, improves maintainability, and scales across components, pages, and routing while following React/TypeScript best practices.

What's the best way to handle data fetching with Suspense in React?▼

Use useSuspenseQuery to standardize data loading and wrap components in Suspense boundaries. This approach eliminates boilerplate, provides consistent error handling, and enables automatic loading states without manual useState logic.

How do I apply consistent styling across React components with MUI v7?▼

Use the sx prop for theme-aware, type-safe styling in MUI v7. This pattern ensures consistency across components, integrates with your design system, and reduces CSS file overhead while maintaining performance.

Can I implement type-safe routing in React with TanStack Router?▼

Yes. TanStack Router provides typed, breadcrumb-friendly routes for React/TypeScript projects. It eliminates string-based route definitions, catches routing errors at compile time, and integrates with the feature directory structure.

What performance optimization patterns should I follow for React components?▼

Apply lazy loading, memoization, and efficient rendering patterns as defined in the guidelines. These techniques reduce bundle size, prevent unnecessary re-renders, and maintain scalability as your application grows.

Does this guide work for existing React projects or only new ones?▼

The guidelines apply to planning, coding, reviewing, and maintaining components across both new and existing projects. You can incrementally adopt patterns for new features or refactor existing code to align with the standardized approach.