skills.rest
Yoriichi-Dang
Yoriichi-DangCOMMUNITY
Explore all skills by this author →
GitHub

frontend-dev-guidelines

Consolidate React/TypeScript frontend guidelines for components, styling, and routing.

Updated Dec 26, 2025
Search Tags:#React#frontend#routing#TypeScript#Suspense#lazy-loading
One-click install
npx skills add https://github.com/Yoriichi-Dang/dashboard_web_template --skill frontend-dev-guidelines-yoriichi-dang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/Yoriichi-Dang/dashboard_web_template/tree/main/.cursor/skills/frontend-dev-guidelines
Command: npx skills add https://github.com/Yoriichi-Dang/dashboard_web_template --skill frontend-dev-guidelines-yoriichi-dang

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires [], and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

Frontend teams often struggle with inconsistent patterns, boilerplate, and drift from best practices across React/TypeScript projects. This Skill provides a concise, opinionated framework that standardizes component structure, data fetching, styling, and routing to accelerate onboarding and improve code quality.

Core Features & Use Cases

  • Unified patterns for React.FC components, lazy loading, Suspense, and useSuspenseQuery.
  • Feature-first organization with a clear directory layout (features/ plus shared components).
  • Styling & routing standards leveraging MUI v7 styling conventions and TanStack Router for robust navigation.
  • Use cases include starting new components/pages, refactoring existing code, and enforcing performance-conscious patterns in frontend work.

Quick Start

Start a new React + TypeScript component by applying the frontend-dev-guidelines: define props with React.FC<Type>, wrap heavy components in React.lazy + Suspense, organize files under features/, and adopt the provided import aliases and styling approach.

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 React and TypeScript project for scalability and performance?▼

Structure React and TypeScript projects using a feature-first directory layout, organizing files under a features/ folder alongside shared components to ensure scalable architecture and consistent component patterns.

What is the best way to implement lazy loading and Suspense in modern React?▼

Implement lazy loading in modern React by wrapping heavy components in React.lazy and Suspense, paired with useSuspenseQuery, to standardize data fetching and improve application performance.

How do I set up routing with TanStack Router in a React application?▼

Set up TanStack Router by adopting its specific navigation patterns to establish robust routing standards, ensuring consistent and type-safe navigation across your modern React application.

Can I use MUI v7 styling conventions with a feature-based React architecture?▼

Yes, you can apply MUI v7 styling conventions within a feature-based React architecture to standardize UI component styling while maintaining a clear and organized frontend directory structure.

How do I define React component props using TypeScript?▼

Define React component props using TypeScript by applying the React.FC<Type> pattern, which provides a concise and opinionated framework for standardizing component structure and type safety.

Why standardize frontend development patterns across React and TypeScript projects?▼

Standardize frontend patterns to eliminate boilerplate and inconsistent code drift across React and TypeScript projects, accelerating onboarding and improving overall code quality.

Related Skills

Explore More Software Engineering Skills→
tassosgomestassosgomes

react-architecture

Standardize React project structure with Vite and TypeScript conventions.

Community
Intermediate
devturcodevturco

add-feature

Add fullstack features with Zod 4, Drizzle, tRPC, and TanStack Router.

Community
Advanced
duc01226duc01226

frontend-dev-guidelines

Codify React and TypeScript frontend architecture patterns into consistent standards.

Community
Intermediate
iButtersiButters
3

atomic-design

Organize React UI components into a five-tier Atomic Design folder structure.

Community
Advanced