frontend-dev-guidelines

Standardize React and TypeScript frontend development with modern patterns and libraries.

Updated Feb 11, 2026
One-click install
npx skills add https://github.com/IoT-VN/tuya-energy-dashboard --skill frontend-dev-guidelines-iot-vn
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/IoT-VN/tuya-energy-dashboard/tree/main/.opencode/skills/frontend-development
Command: npx skills add https://github.com/IoT-VN/tuya-energy-dashboard --skill frontend-dev-guidelines-iot-vn

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of guidelines, patterns, and best practices for developing modern React and TypeScript frontends, ensuring consistency, performance, and maintainability.

Core Features & Use Cases

  • Component Development: Standardized patterns for creating new React components.
  • Data Fetching: Guidance on using useSuspenseQuery and TanStack Query.
  • File Organization: Best practices for structuring feature and component directories.
  • Styling: Rules for using MUI v7, sx prop, and theme integration.
  • Routing: Implementation details for TanStack Router.
  • Performance: Techniques for optimization and preventing re-renders.
  • TypeScript: Standards for type safety and explicit typing.
  • Use Case: A new developer joins the team and needs to understand how to build a new feature, fetch data, style components, and organize their code according to established project standards.

Quick Start

Follow the frontend development guidelines to create a new React component.

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 frontend projects?

Standardized guidelines for structuring React and TypeScript frontends dictate organizing feature and component directories logically to ensure maintainability and consistency across the project.

How do I fetch data using TanStack Query in a React application?

Fetch data using TanStack Query in a React application by implementing the `useSuspenseQuery` hook to standardize server state management and data fetching patterns.

Does this framework provide guidelines for styling React components with MUI v7?

Yes, the framework provides explicit guidelines for styling React components with MUI v7, detailing rules for using the `sx` prop and integrating theme configurations into your UI.

How do I implement routing with TanStack Router in a TypeScript frontend?

Implement routing with TanStack Router in a TypeScript frontend by following standardized architectural patterns that ensure type-safe navigation and consistent route management across your application.

What techniques prevent unnecessary re-renders when building React components?

Techniques to prevent unnecessary re-renders when building React components include standardized performance optimization patterns targeting explicit type safety and efficient state management.

Can I use these React and TypeScript guidelines for onboarding new developers?

Yes, you can use these React and TypeScript guidelines for onboarding new developers, as they explain how to build features, fetch data, style components, and organize code according to established project standards.