skills.rest
lukebaze
lukebazeCOMMUNITY
Explore all skills by this author →
𝕏@0xkerminiGitHub

frontend-dev-guidelines

Standardize React/TypeScript frontend architecture with routing and data fetching patterns.

Updated Jan 20, 2026
Search Tags:#typescript#suspense#frontend#react#routing#lazy-loading#mui7
One-click install
npx skills add https://github.com/lukebaze/forex-rebate-bot --skill frontend-dev-guidelines-lukebaze
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/lukebaze/forex-rebate-bot/tree/main/.opencode/skill/frontend-development
Command: npx skills add https://github.com/lukebaze/forex-rebate-bot --skill frontend-dev-guidelines-lukebaze

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent frontend approaches across teams slow down delivery and increase bugs; this Skill provides a centralized, opinionated set of modern React and TypeScript patterns to standardize architecture, components, data access, and performance practices.

Core Features & Use Cases

  • Patterns for React components with TypeScript, including lazy loading, Suspense boundaries, and useSuspenseQuery.
  • Routing and navigation guidance with TanStack Router and folder-based structure.
  • Styling and UI consistency using MUI v7 and a cohesive import-alias strategy.
  • Real-world guidance for organizing features, API surfaces, and reusable patterns across large apps.

Quick Start

Create a new React + TypeScript project and apply these guidelines to scaffold a component-first frontend.

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 organizing React components and routes in scalable apps?▼

Organizing React components and routes in scalable apps requires a modular feature structure with folder-based routing. This approach standardizes architecture by providing cohesive patterns for component creation, data access, and import-alias strategy.

How do I implement lazy loading and Suspense boundaries for React data fetching?▼

Implement lazy loading and Suspense boundaries using useSuspenseQuery to standardize data fetching in React. This pattern wraps asynchronous components to optimize performance and ensure consistent rendering across your application's features.

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

Yes, these frontend patterns work with TanStack Router and MUI v7. The guidelines specifically cover routing navigation with TanStack Router and ensure UI styling consistency using MUI v7 components.

How do I standardize TypeScript patterns for building new React features?▼

Standardize TypeScript patterns for new React features by applying an opinionated set of modular component guidelines. This satisfies requirements for type-safe data fetching, Suspense boundaries, and cohesive import aliases across large applications.

Related Skills

Explore More Software Engineering Skills→
mchien15mchien15

frontend-development

Guide React/TypeScript frontend development with Suspense, TanStack Query, and MUI styling.

Community
Advanced
samChang72samChang72
1

frontend-dev-guidelines

Provide React/TypeScript frontend development guidelines for performance and maintainability.

Community
Intermediate
vobbilisvobbilis
1

frontend-dev-guidelines

Standardize React/TypeScript components with sx styling, SuspenseLoader, and useSuspenseQuery.

Community
Intermediate
Yoriichi-DangYoriichi-Dang

frontend-dev-guidelines

Consolidate React/TypeScript frontend guidelines for components, styling, and routing.

Community
Advanced