skills.rest
BoneTheDeveloper
BoneTheDeveloperCOMMUNITY
Explore all skills by this author →
GitHub

frontend-dev-guidelines

Apply modern React/TypeScript patterns with React.FC, Suspense, MUI v7, and TanStack Router.

Updated Aug 27, 2026
Search Tags:#typescript#suspense#frontend#react#routing#styling#patterns
One-click install
npx skills add https://github.com/BoneTheDeveloper/Electronic-Contact-Contact-Book --skill frontend-dev-guidelines-bonethedeveloper
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/BoneTheDeveloper/Electronic-Contact-Contact-Book/tree/main/.claude/skills/frontend-development
Command: npx skills add https://github.com/BoneTheDeveloper/Electronic-Contact-Contact-Book --skill frontend-dev-guidelines-bonethedeveloper

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Build consistent and scalable React/TypeScript frontends by standardizing patterns, structure, and conventions to speed up onboarding and collaboration.

Core Features & Use Cases

  • React.FC with TypeScript pattern for strong type safety and clarity.
  • Suspense, lazy loading, and useSuspenseQuery for smooth data loading and code-splitting.
  • Styling with MUI v7 sx and theme-aware styling for consistent visuals.
  • TanStack Router routing with folder-based structure to simplify navigation and routing.
  • Organized file structure separating features, components, hooks, and utilities for maintainability.
  • Performance best practices including memoization, debouncing, and stable imports.

Quick Start

Start building a new frontend feature by applying the standardized patterns and folder structure described above to achieve rapid, reliable delivery.

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 scalable React and TypeScript frontend application?▼

Structure a scalable React and TypeScript frontend by separating features, components, hooks, and utilities into a modular file organization to speed up onboarding and ensure maintainability.

What is the best way to use Suspense and useSuspenseQuery for data fetching in React?▼

Use Suspense and useSuspenseQuery for data fetching in React to enable smooth data loading and code-splitting, applying lazy loading to suspend component rendering until data resolves.

How do I set up TanStack Router with a folder-based structure in a React app?▼

Set up TanStack Router using a folder-based structure to simplify navigation and routing across your React app, organizing routes hierarchically to match your feature directory layout.

Does this React frontend guideline require using React.FC with TypeScript?▼

Yes, these React frontend guidelines enforce using the React.FC pattern with TypeScript to provide strong type safety and clarity across all component designs.

How do I apply theme-aware styling with MUI v7 in React components?▼

Apply theme-aware styling in React components using MUI v7 and the sx prop to ensure consistent visuals and standardized pattern usage across the entire frontend application.

Related Skills

Explore More Software Engineering Skills→
Fr-e-dFr-e-d
157

architecture-extract

Analyze project directory structures to generate architectural summaries.

Community
Basic
Colten-CovingtonColten-Covington

performance-optimization

Optimize React 19 and Next.js applications with caching, memoization, and dynamic imports.

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
blencorpblencorp
101

mui

Provides MUI v7 styling and theming patterns via sx and components.

Official
Intermediate