skills.rest
lv7dev
lv7devCOMMUNITY
Explore all skills by this author →
GitHub

frontend-dev-guidelines

Standardize React/TypeScript frontend development with Suspense-based data fetching and MUI v7 styling.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Frontend Development Guidelines solve the lack of consistency and onboarding friction in React/TypeScript projects by providing a standardized approach to component patterns, data fetching, styling, and routing.

Core Features & Use Cases

  • Suspense-based data fetching: Encourage use of Suspense boundaries and useSuspenseQuery for clean, code-friendly loading states.
  • Code organization: Promote a features directory structure and clear separation of concerns across api, components, hooks, and types.
  • Styling and routing conventions: Standardize MUI v7 styling and TanStack Router usage for predictable UI and navigation.
  • Use Case: When starting a new frontend project or onboarding a new engineer, follow these guidelines to ensure consistent architecture and faster delivery.

Quick Start

Read this guideline, apply the recommended patterns to a new or existing frontend feature, and ensure components, pages, and routes adhere to the standard structure.

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 modern React and TypeScript project for scalability?▼

Structure your React and TypeScript project using a features directory to separate api, components, hooks, and types. This standardized project organization ensures consistent architecture and reduces onboarding friction.

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

Handle data fetching in React by implementing Suspense boundaries with useSuspenseQuery. This pattern provides clean, code-friendly loading states and standardizes data fetching across your application components.

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

Yes, these frontend guidelines standardize TanStack Router usage for navigation and MUI v7 for styling. Applying these routing and styling conventions ensures predictable UI and consistent component patterns across modern React stacks.

How do I apply TypeScript best practices to React component creation?▼

Apply TypeScript best practices to React component creation by following standardized patterns for routing and data fetching. These guidelines enforce strict typing and clear separation of concerns across your features directory.

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

Use lazy loading and Suspense boundaries in React when fetching data with useSuspenseQuery to manage loading states. This approach is part of standardizing frontend development practices to ensure clean, code-friendly component rendering.

Related Skills

Explore More Software Engineering Skills→
mdjubaerhossensabbirmdjubaerhossensabbir

project-setup-info-context7

Generate project directory structures and configuration files for TypeScript, React, and MCP servers.

Community
Intermediate
caseymanoscaseymanos

git-hooks

Configure Husky Git hooks for pre-commit linting, pre-push testing, and commit message validation.

Community
Advanced
lips85lips85

frontend-dev-guidelines

Guide React frontend development with Suspense, lazy loading, and TypeScript best practices.

Community
Advanced
shafibabarshafibabar
1

react-project-structure

Standardize React and TypeScript project layouts for microfrontend architectures with Vite and Module Federation.

Community
Advanced