frontend-dev-guidelines

Generate React/TypeScript component checklists with lazy loading and Suspense.

1|Updated Nov 14, 2025

Search Tags:#typescript #development #architecture #performance #frontend #react #guidelines

One-click install

npx skills add https://github.com/inchan/cc-skills --skill frontend-dev-guidelines-inchan

Or copy as Structured Prompt for Agent▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, typescript, @mui/material, @tanstack/react-query, @tanstack/react-router, zod, react-hook-form, use-debounce, and includes references (resource) components.

What problem does it solve?

Frontend development can be complex, inconsistent, and prone to performance issues. This Skill provides a comprehensive guide to modern React/TypeScript patterns, ensuring consistency, optimizing performance, and reducing development time by standardizing best practices. It helps developers avoid common pitfalls like layout shifts and unoptimized data fetching.

Core Features & Use Cases

Modern React Patterns: Guides on Suspense-based data fetching (useSuspenseQuery), lazy loading, and component organization.
Performance Optimization: Best practices for useMemo, useCallback, React.memo, and debouncing to ensure fast, responsive UIs.
Structured Development: Defines clear guidelines for file organization (features/ vs components/), MUI v7 styling, TanStack Router, and TypeScript standards.
Use Case: When starting a new React/TypeScript feature, use this Skill to quickly set up the correct file structure, implement Suspense-based data fetching, and ensure all components follow performance and styling best practices, saving hours of architectural decision-making and refactoring.

Quick Start

To create a new React component following all guidelines, ask: "Generate a checklist for creating a new React component, including lazy loading, Suspense, useSuspenseQuery, and import aliases."