# Frontend Must Have

> Must-have checklist for a modern React/Next.js frontend project.

- Skill: `paulgrape/frontend-must-have` (Agent Skill)
- Install (CLI): `npx skillmds@latest add paulgrape/frontend-must-have`
- Raw SKILL.md: https://api.skillmd.com/api/skills/paulgrape/frontend-must-have/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: paulgrape (https://skillmd.com/u/paulgrape)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/paulgrape/frontend-must-have

---


# Frontend must-have checklist

Use this skill when bootstrapping or auditing a frontend project. Match the stack the repo actually uses.

## Routing (Next.js App Router)

```tsx
import { useRouter } from 'next/navigation'
import Link from 'next/link'

export function Nav() {
  const router = useRouter()
  return <Link href="/dashboard">Dashboard</Link>
}
```

## State management

```tsx
import { create } from 'zustand'

const useStore = create<{ count: number }>(() => ({ count: 0 }))
```

## Data fetching

```tsx
import { useQuery } from '@tanstack/react-query'

export function UserList() {
  const { data } = useQuery({ queryKey: ['users'], queryFn: fetchUsers })
  return null
}
```

## Validation

```tsx
import { z } from 'zod'

const UserSchema = z.object({ email: z.string().email() })
```

## Styling

Use `tailwindcss` utility classes. Keep component styles colocated.

## Testing

```tsx
import { render, screen } from '@testing-library/react'
import { describe, it, expect } from 'vitest'
```

- Write unit tests with `vitest` and `@testing-library/react`.
- Add E2E with `playwright` for critical user flows.