skills.rest
congthang12312
congthang12312COMMUNITY
Explore all skills by this author →
GitHub

frontend-dev-guidelines

Codify React/TypeScript frontend practices into repeatable guidelines for teams.

Updated Mar 19, 2026
Search Tags:#typescript#suspense#frontend#react#tanstack-router#mui7
One-click install
npx skills add https://github.com/congthang12312/Sentinel-AI-test --skill frontend-dev-guidelines-congthang12312
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/congthang12312/Sentinel-AI-test/tree/main/.agent/skills/frontend-development
Command: npx skills add https://github.com/congthang12312/Sentinel-AI-test --skill frontend-dev-guidelines-congthang12312

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Build teams' consistency by codifying modern React/TypeScript frontend patterns into repeatable guidelines that reduce onboarding time and architectural drift.

Core Features & Use Cases

  • Standard component patterns for React with TypeScript (React.FC, lazy loading, Suspense, and stable exports)
  • Data fetching, routing, and styling guides using useSuspenseQuery, TanStack Router, and MUI v7
  • Performance and organization best practices for scalable frontend codebases
  • Use cases include building new components, feature pages, and routing structures with consistent patterns

Quick Start

Read and apply the guidelines when starting a new React/TypeScript frontend feature to ensure consistency and quality.

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 standardizing React TypeScript component patterns across a team?▼

Standardizing React TypeScript component patterns involves codifying practices like using React.FC, implementing lazy loading with Suspense, and maintaining stable exports to reduce onboarding time and architectural drift.

How do I structure data fetching and routing with TanStack Router and useSuspenseQuery?▼

Structure data fetching and routing by applying guidelines for useSuspenseQuery and TanStack Router to ensure consistent Suspense-based data loading and routing structures in TypeScript React projects.

Can I use MUI v7 for styling when building scalable frontend features?▼

Yes, you can use MUI v7 for styling scalable frontend features by applying codified performance and organization best practices to ensure consistent quality across new components and feature pages.

How do I prevent architectural drift in a scalable React codebase?▼

Prevent architectural drift in a scalable React codebase by applying repeatable guidelines for file organization, Suspense-based data loading, and performance optimization to maintain consistency.

Does this approach require Suspense for data loading in TypeScript React projects?▼

Yes, the approach requires Suspense for data loading, satisfying specific requirements for consistent file organization and Suspense-based data fetching using useSuspenseQuery in TypeScript React projects.

Related Skills

Explore More Software Engineering Skills→
GemachDAOGemachDAO
4

gdex-ui-install-setup

Scaffold a React or Next.js project with a GDEX SDK provider.

Official
Intermediate
georgekhananaevgeorgekhananaev
27

react-best-practices

Identify React/Next.js performance bottlenecks and generate targeted optimizations.

Community
Advanced
locdinh209locdinh209

frontend-dev-guidelines

Guide React/TypeScript frontend development with Suspense, lazy loading, and TanStack Query.

Community
Advanced
Thanh-aperoThanh-apero
1

ck:frontend-development

Guide React/TypeScript frontend development with Suspense, lazy loading, and MUI v7.

Community
Advanced