frontend-dev-guidelines

Name: frontend-dev-guidelines
Availability: InStock
Author: 0xKermini

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

Ready to run

npx skills add https://github.com/lukebaze/forex-rebate-bot --skill frontend-dev-guidelines-lukebaze

💬 Prompt for ChatGPT / Claude Chat▼

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.