frontend-dev-guidelines

Guide React/TypeScript development with best practices for components, data fetching, and routing.

24|3|Updated Jan 30, 2026

Search Tags:#typescript #best practices #react #frontend development #coding guidelines

Ready to run

npx skills add https://github.com/VoDaiLocz/kilo-kit-mcp --skill frontend-dev-guidelines-vodailocz

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/VoDaiLocz/kilo-kit-mcp/tree/main/skills/engineering/frontend-development
Command: npx skills add https://github.com/VoDaiLocz/kilo-kit-mcp --skill frontend-dev-guidelines-vodailocz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide to modern frontend development practices, solving the problem of inconsistent development workflows and lack of best practices across a team.

Core Features & Use Cases

React/TypeScript Best Practices: Emphasizes modern patterns like Suspense, lazy loading, useSuspenseQuery, file organization, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices.
Feature-Based Development: Offers checklists and guidelines for creating components, pages, features, fetching data, styling, routing, and working with frontend code.
Use Case: A developer starting a new project can use this Skill to ensure they are following the latest best practices and maintainability standards.

Quick Start

Use the frontend-dev-guidelines skill to set up a new React/TypeScript application and follow the provided guidelines for component development.

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 a React and TypeScript application?▼

React and TypeScript application structuring best practices involve adopting a feature-based development approach. This method provides specific guidelines for file organization, component architecture, and routing to ensure a consistent and maintainable codebase.

How do I implement modern data fetching patterns in React?▼

Modern data fetching in React is implemented using patterns like Suspense and useSuspenseQuery. These approaches optimize performance by managing asynchronous data loading effectively within your component architecture.

What is the best way to set up routing in a TypeScript frontend project?▼

The best way to set up routing in a TypeScript frontend project involves using TanStack Router. This tool provides modern, type-safe routing capabilities that integrate seamlessly with React component architecture and feature-based structures.

Can I use MUI v7 for styling in a feature-based React architecture?▼

Yes, you can use MUI v7 for styling in a feature-based React architecture. The guidelines specifically include MUI v7 styling practices to help developers maintain visual consistency and component reusability across application features.

How do I optimize performance when building React applications?▼

Optimizing performance in React applications is achieved through techniques like lazy loading and Suspense. These practices reduce initial bundle sizes and defer rendering of non-critical components, significantly improving application load times.

When should I adopt these frontend development guidelines?▼

You should adopt these frontend development guidelines when starting a new React/TypeScript project or refactoring an existing codebase. They are designed to solve problems of inconsistent workflows and lack of best practices across a development team.