# Frontend Dev Guidelines

Frontend development guidelines for React/TypeScript applications.

- Repository: https://github.com/diet103/claude-code-infrastructure-showcase (10043 stars)
- Category: Design
- License: MIT
- Last updated: 2026-07-13
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add diet103/claude-code-infrastructure-showcase --skill frontend-dev-guidelines -g -a claude-code -y`
Codex: `npx skills add diet103/claude-code-infrastructure-showcase --skill frontend-dev-guidelines -g -a codex -y`
Cursor: `npx skills add diet103/claude-code-infrastructure-showcase --skill frontend-dev-guidelines -g -a cursor -y`
Gemini CLI: `npx skills add diet103/claude-code-infrastructure-showcase --skill frontend-dev-guidelines -g -a gemini-cli -y`

## Description

Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Frontend Development Guidelines

## Purpose

Comprehensive guide for modern React development, emphasizing Suspense-based data fetching, lazy loading, proper file organization, and performance optimization.

Written for React 18 + TypeScript + MUI v7 + TanStack Router/Query. Different stack? Adapt the principles - see CLAUDE_INTEGRATION_GUIDE.md in the repo root.

## When to Use This Skill

- Creating new components or pages
- Building new features
- Fetching data with TanStack Query
- Setting up routing with TanStack Router
- Styling components with MUI v7
- Performance optimization
- Organizing frontend code
- TypeScript best practices

---

## Quick Start

### New Component Checklist

Creating a component? Follow this checklist:

- [ ] Use `React.FC<Props>` pattern with TypeScript
- [ ] Lazy load if heavy component: `React.lazy(() => import())`
- [ ] Wrap in `<SuspenseLoader>` for loading states
- [ ] Use `useSuspenseQuery` for data fetching
- [ ] Import aliases: `@/`, `~types`, `~components`, `~features`
- [ ] Styles: Inline if <100 lines, separate file if >100 lines
- [ ] Use `useCallback` for event handlers passed to children
- [ ] Default export at bottom
- [ ] No early returns with loading spinners
- [ ] Use `useMuiSnackbar` for user notifications

### New Feature Checklist

Creating a feature? Set up this structure:

- [ ] Create `features/{feature-name}/` directory
- [ ] Create subdirectories: `api/`, `components/`, `hooks/`, `helpers/`, `types/`
- [ ] Create API service file: `api/{feature}Api.ts`
- [ ] Set up TypeScript types in `types/`
- [ ] Create route in `routes/{feature-name}/index.tsx`
- [ ] Lazy load feature components
- [ ] Use Suspense boundaries
- [ ] Export public API from feature `index.ts`

---

## Import Aliases Quick Reference

The rest: https://github.com/diet103/claude-code-infrastructure-showcase/blob/HEAD/.agents/skills/frontend-dev-guidelines/SKILL.md