# frontend-dev-guidelines

A skill that gives the agent one set of rules for React and TypeScript work: Suspense, lazy loading, features layout, MUI v7 and TanStack.

- skill · `type=skill` · Claude Code · 556 installs
- Author: davila7
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/development/frontend-dev-guidelines
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/frontend-dev-guidelines

## What it does

The skill kicks in when the agent writes components, pages or hooks, sets up routing, or fetches data. Inside are checklists for a new component and a new feature, an import cheatsheet, and topic guides: component patterns, data fetching, file organization, styling, routing, loading and error states, performance, TypeScript. Each topic points to its own file under `resources/`.

Data fetching follows `useSuspenseQuery` with Suspense boundaries instead of `isLoading` checks. Early returns with a spinner are ruled out because they shift the layout. User notifications go through `useMuiSnackbar`; `react-toastify` is out. Styling uses the `sx` prop typed as `SxProps<Theme>`, and in MUI v7 the grid is written as `<Grid size={{ xs: 12, md: 6 }}>` — the older syntax with `xs` and `md` directly will not do.

Features live in `features/{feature-name}/` with `api/`, `components/`, `hooks/`, `helpers/` and `types/` subfolders, while shared pieces belong in `components/`. The aliases `@/`, `~types`, `~components` and `~features` are declared in `vite.config.ts`, so a project without them will need the examples adjusted. Heavy components such as tables and charts load through `React.lazy` and get wrapped in `SuspenseLoader`.

## Install

### Claude Code (native platform)

1. **claude-code-templates**
```bash
npx claude-code-templates@latest --skill development/frontend-dev-guidelines
```

2. **Skills CLI (Vercel)**
```bash
npx skills add davila7/claude-code-templates --skill frontend-dev-guidelines -a claude-code
```

3. **Manually: put the files in place**
- File: `~/.claude/skills/frontend-dev-guidelines/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/frontend-dev-guidelines/

### Codex

**Manually: put the files in place**
- File: `.agents/skills/frontend-dev-guidelines/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

**Manually: put the files in place**
- File: `.cursor/skills/frontend-dev-guidelines/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install davila7/claude-code-templates frontend-dev-guidelines
```

2. **Manually: put the files in place**
- File: `.github/skills/frontend-dev-guidelines/SKILL.md`

### Gemini CLI

**Platform CLI**
```bash
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/development/frontend-dev-guidelines
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/frontend-dev-guidelines/SKILL.md` — The legacy .windsurf/skills/ path still works

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/development/frontend-dev-guidelines

## When to use it
- lay out the folder structure for a new feature
- move data requests to `useSuspenseQuery`
- drop early spinner returns that shift the layout
- split styles onto `sx` and pull them into a separate file
- set up lazy loading for heavy components

## Example prompts
- Create the `billing` feature using the skill's layout: `api/`, `components/`, `hooks/`, `types/`
- Rewrite this component with `useSuspenseQuery` and remove the `isLoading` check
- Set up the `/billing/` route with `createFileRoute` and lazy-load the page

## Similar
- [tanstack-store](https://affpapa.org/en/nevibecode/skills/tanstack-store.md) — skill · 1800 installs
- [frontend-developer](https://affpapa.org/en/nevibecode/skills/frontend-developer.md) — skill · 1300 installs
- [router-core](https://affpapa.org/en/nevibecode/skills/router-core.md) — skill · 589 installs
- [dynamic-import](https://affpapa.org/en/nevibecode/skills/dynamic-import.md) — skill · 1500 installs
- [nextjs-use-search-params-suspense](https://affpapa.org/en/nevibecode/skills/nextjs-use-search-params-suspense.md) — skill · 311 installs
- [clerk-tanstack-patterns](https://affpapa.org/en/nevibecode/skills/clerk-tanstack-patterns.md) — skill · 15500 installs

## Other versions with the same name
- [frontend-dev-guidelines · sickn33](https://affpapa.org/en/nevibecode/skills/sickn33-frontend-dev-guidelines.md) — 1500 installs

From the same set: [davila7/claude-code-templates](https://affpapa.org/en/nevibecode/by/davila7/claude-code-templates.md) — 205 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md