skills.rest
joshka0
joshka0COMMUNITY
Explore all skills by this author →
GitHub

frontend-dev-guidelines

Guide React and TypeScript component structure, routing, and data fetching.

3|Updated Apr 14, 2026
Search Tags:#typescript#suspense#react#mui-v7#tanstack-query#tanstack-router#frontend-architecture
One-click install
npx skills add https://github.com/joshka0/foxctl --skill frontend-dev-guidelines-joshka0
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/joshka0/foxctl/tree/main/docs/knowledge/frontend-dev-guidelines
Command: npx skills add https://github.com/joshka0/foxctl --skill frontend-dev-guidelines-joshka0

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents inconsistent frontend patterns by giving a clear, reusable set of React/TypeScript + MUI + TanStack Router/Query rules that reduce bugs, performance regressions, and UX issues like layout shift.

Core Features & Use Cases

  • Suspense-first data fetching guidance: Prefer useSuspenseQuery with Suspense boundaries instead of ad-hoc loading states.
  • Performance and UX guardrails: Apply memoization, lazy loading, and the “no early returns for loading” rule to avoid CLS and excessive rerenders.
  • Opinionated architecture: Use the recommended features/ vs components/ split, plus consistent file organization and import aliases.
  • Routing and UI standards: Use TanStack Router folder-based routes with lazy-loaded pages and consistent breadcrumb loader patterns.
  • TypeScript best practices: Enforce strict typing conventions (no any, explicit return types, type-only imports) to keep refactors safe.
  • Notifications and error handling: Use the provided snackbar hook patterns for user feedback, plus query/mutation error callbacks.

Use it when drafting new React components, implementing pages and features, wiring data fetching with TanStack Query, adding routing, styling with MUI v7 sx, or enforcing TypeScript conventions across a codebase.

Quick Start

Ask the Skill for a React/TypeScript component plan for a new feature, including the file structure, routing approach, Suspense + useSuspenseQuery data fetching pattern, and the recommended MUI v7 styling approach for that specific UI.

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 React components and features to avoid inconsistent frontend patterns?▼

Structure React components by splitting them into a features/ directory for domain-specific modules and a components/ directory for shared UI, using import aliases for consistent file organization and reducing bugs.

What's the best way to handle data fetching in React without causing layout shift?▼

Handle data fetching using useSuspenseQuery with Suspense boundaries to prevent layout shift, adhering to a no early returns for loading rule that avoids ad-hoc loading states and performance regressions.

How do I set up routing and lazy loading with TanStack Router in a TypeScript app?▼

Set up TanStack Router using folder-based routes with lazy-loaded pages and consistent breadcrumb loader patterns, applying TypeScript strict typing conventions with explicit return types and type-only imports for safe refactors.

Does this React architecture approach require strict TypeScript typing conventions?▼

Yes, this React architecture requires strict TypeScript typing conventions, enforcing rules like no any types, explicit return types, and type-only imports to keep component refactors safe and prevent type-related bugs.

Why should I use useSuspenseQuery instead of early loading returns in React?▼

You should use useSuspenseQuery instead of early loading returns to avoid cumulative layout shift and excessive rerenders, establishing a Suspense-first data fetching pattern that improves overall user experience.

Can I use MUI v7 for styling components while following these React engineering practices?▼

Yes, you can use MUI v7 for styling components by applying the sx prop approach, which integrates cleanly with the recommended React and TypeScript architecture to deliver consistent UI standards.

Related Skills

Explore More Software Engineering Skills→
hidonguyenhidonguyen

ck:frontend-development

Build React TypeScript frontends with Suspense data fetching, lazy routes, and MUI v7 styling.

Community
Advanced
iAmAdheiliAmAdheil

tanstack-query

Manage React server-state with TanStack Query v5 data fetching and caching.

Community
Advanced
Yoriichi-DangYoriichi-Dang

tanstack-query

Manage React server state with TanStack Query v5 hooks.

Community
Advanced
quanngynxquanngynx

react-2026

Map React project requirements to framework, build tool, routing, and state management choices.

Community
Intermediate