frontend-dev-guidelines

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

Standardizes React/TypeScript development with component, routing, styling, and error handling guidelines.

Updated Jun 16, 2025

Search Tags:#typescript #suspense #frontend #react #routing #patterns #mui

Ready to run

npx skills add https://github.com/Stonelukas/Mouse-on-Numpad --skill frontend-dev-guidelines-stonelukas

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/Stonelukas/Mouse-on-Numpad/tree/main/.opencode/skill/frontend-development
Command: npx skills add https://github.com/Stonelukas/Mouse-on-Numpad --skill frontend-dev-guidelines-stonelukas

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide consolidates best practices for building modern React/TypeScript frontends, helping teams standardize architecture, pattern usage, and tooling.

Core Features & Use Cases

Pattern Coverage: Suspense-based data fetching, lazy loading, TanStack Router routing, MUI v7 styling, and alias-based imports.
Consistent Architecture: Directory structure, file organization, and component patterns to improve maintainability.
Real-World Scenarios: From new component creation to feature rollout and performance tuning in large apps.

Quick Start

Begin by reviewing the guidelines, adopt the recommended component patterns, and progressively migrate existing components to align with these standards.

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 large React app with TanStack Router and Suspense?▼

Standardize your React app architecture by adopting codified directory structures, TanStack Router conventions, and Suspense-based data fetching patterns to maintain consistency across large-scale projects.

What's the best way to implement lazy loading and type-safe imports in TypeScript?▼

Implement lazy loading by codifying type-safe imports and alias-based path mapping. This approach standardizes module loading and optimizes performance across large React and TypeScript applications.

How do I standardize MUI v7 styling rules for new React components?▼

Standardize MUI v7 styling by applying codified component templates and styling rules. This ensures consistent UI patterns when creating new components or migrating existing ones.

Does this React TypeScript guideline cover error handling and performance tuning?▼

Yes, the React TypeScript guidelines cover error handling strategies and performance tuning. They provide standardized patterns for optimizing large applications using Suspense and lazy loading.

When do I need to migrate existing components to these React and TypeScript standards?▼

Migrate existing components to these React and TypeScript standards when you need to consolidate best practices, standardize architecture, and improve maintainability across your large frontend application.