frontend-dev-guidelines

Provides React and TypeScript frontend development guidelines and best practices.

Updated Feb 1, 2026

Search Tags:#typescript #best practices #performance #frontend #react #styling #guidelines

Ready to run

npx skills add https://github.com/2good4me/JobNow --skill frontend-dev-guidelines-2good4me

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/2good4me/JobNow/tree/main/.agents/skills/frontend-dev-guidelines
Command: npx skills add https://github.com/2good4me/JobNow --skill frontend-dev-guidelines-2good4me

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of modern frontend development guidelines and patterns to ensure consistency, maintainability, and performance in React/TypeScript applications.

Core Features & Use Cases

Modern Patterns: Implements best practices like Suspense, lazy loading, and optimized data fetching.
Code Organization: Enforces feature-based directory structures and clear import aliases.
Use Case: When starting a new React component, page, or feature, consult this Skill for guidance on structure, data fetching, styling, and routing to ensure adherence to project standards.

Quick Start

Use the frontend-dev-guidelines skill to create a new React component following the recommended structure and patterns.

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 React and TypeScript frontend development?▼

Modern React performance optimization uses Suspense, lazy loading, and useSuspenseQuery for data fetching to ensure consistent, maintainable, and high-performance application rendering.

How do I organize a React project using features directories?▼

Organizing React projects with features directories involves grouping components, pages, and data fetching logic by feature, utilizing clear import aliases to maintain a consistent and maintainable project structure.

How do I implement data fetching with useSuspenseQuery in React?▼

Implementing data fetching with useSuspenseQuery in React utilizes Suspense boundaries to handle asynchronous loading states, providing a modern pattern for fetching data while maintaining performance and consistency.

Can I use MUI v7 and TanStack Router together in a TypeScript app?▼

Yes, you can use MUI v7 for styling and TanStack Router for routing within a TypeScript application, following established frontend guidelines to ensure consistent development across components and pages.

When should I use lazy loading and Suspense in React applications?▼

Lazy loading and Suspense should be used in React applications to optimize performance by deferring component rendering and data fetching until necessary, preventing blocking the main application bundle.