frontend-dev-guidelines

Guide React and TypeScript frontend development with modern architectural patterns.

Updated Jan 27, 2026
One-click install
npx skills add https://github.com/Hoang130203/Emgu_CV_automation --skill frontend-dev-guidelines-hoang130203
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/Hoang130203/Emgu_CV_automation/tree/main/.opencode/skills/frontend-development
Command: npx skills add https://github.com/Hoang130203/Emgu_CV_automation --skill frontend-dev-guidelines-hoang130203

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of best practices and patterns for building robust, performant, and maintainable React and TypeScript frontends, ensuring consistency and quality across the development team.

Core Features & Use Cases

  • Modern React Patterns: Enforces Suspense-based data fetching, lazy loading, and component best practices.
  • TanStack Ecosystem: Integrates TanStack Router for navigation and TanStack Query for data fetching.
  • Styling & UI: Guides on using MUI v7 for styling and component implementation.
  • Use Case: When starting a new feature, follow the guidelines for file organization, component structure, and data fetching to ensure it aligns with the project's standards.

Quick Start

Create a new React component following the modern component template provided in the documentation.

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 structuring React and TypeScript components for maintainability?

React and TypeScript component best practices involve enforcing standardized file organization, component design patterns, and lazy loading to ensure project maintainability and scalability across the development team.

How do I implement data fetching with React Suspense and TanStack Query?

Implement data fetching with TanStack Query by adopting modern React patterns that enforce Suspense-based data fetching, standardizing how asynchronous states are loaded and managed within your frontend application.

Does this frontend guideline approach work with MUI v7 and TanStack Router?

Yes, the frontend guidelines specifically support integrating TanStack Router for navigation and MUI v7 for styling, providing architectural patterns that fit this modern technology stack.

What is the best way to optimize React performance using modern architectural patterns?

The best way to optimize React performance involves applying architectural patterns like lazy loading components and Suspense-based data fetching to reduce initial load times and improve rendering efficiency.

How do I set up a new React feature following modern TypeScript guidelines?

Set up a new React feature by following provided documentation templates for file organization and component structure, ensuring the implementation aligns with standardized data fetching and routing practices.