skills.rest
tmarsbr
tmarsbrCOMMUNITY
Explore all skills by this author →
GitHub

frontend-dev-guidelines

Define React and TypeScript frontend standards with Suspense-first data fetching.

Updated Jul 30, 2025
Search Tags:#typescript#architecture#suspense#frontend#react#routing#patterns
One-click install
npx skills add https://github.com/tmarsbr/portifolio --skill frontend-dev-guidelines-tmarsbr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/tmarsbr/portifolio/tree/main/skill-ux/skills/frontend-dev-guidelines
Command: npx skills add https://github.com/tmarsbr/portifolio --skill frontend-dev-guidelines-tmarsbr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Defines a unified, scalable frontend development standard for React + TypeScript projects to ensure maintainability, performance, and consistent DX.

Core Features & Use Cases

  • Suspense-first data fetching and lazy loading to improve user experience.
  • Feature-based code organization with clear boundaries and minimal cross-feature coupling.
  • Strict TypeScript discipline, with type-first design and safe imports.
  • MUI v7 styling conventions and type-safe theming for a cohesive UI.
  • TanStack Router routing patterns and code-splitting for scalable navigation.

Quick Start

Start by creating React components with explicit Props interfaces, lazy-load heavy routes, wrap them in SuspenseLoader, and fetch data with useSuspenseQuery.

Frequently Asked Questions about frontend-dev-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What is the best way to structure a large-scale React and TypeScript project?▼

The best way to structure large-scale React and TypeScript projects is using a feature-based architecture with clear boundaries, enforcing minimal cross-feature coupling alongside canonical file structures and consistent alias imports.

How do I implement Suspense-first data fetching in a React application?▼

Implement Suspense-first data fetching by using the useSuspenseQuery hook to retrieve data and wrapping lazy-loaded heavy routes in a SuspenseLoader component to improve user experience.

Can I use MUI v7 with strict TypeScript discipline in frontend development?▼

Yes, you can use MUI v7 with strict TypeScript discipline by applying type-safe theming conventions and type-first design to ensure a cohesive, maintainable UI.

Do I need explicit Props interfaces for React components in production frontend standards?▼

Yes, production frontend standards require creating React components with explicit Props interfaces to maintain strict TypeScript discipline and ensure type safety across the application.

Related Skills

Explore More Software Engineering Skills→
MadAppGangMadAppGang
278

tanstack-router

Configure type-safe file-based routes for React with TanStack Router.

Official
Intermediate
ruan-catruan-cat
2

type-project-organization

Enforce unified export syntax and centralized index.ts entry points in TypeScript projects.

Community
Advanced
chef0111chef0111
1

frontend-development

Provide React/TypeScript frontend development guidelines covering components, data fetching, routing, and styling.

Community
Advanced
djankiesdjankies

code-splitting

Implement React 19 code splitting with lazy() and Suspense.

Community
Intermediate