# Frontend Nextjs

> NextJS frontend development patterns. Use when developing frontend code with NextJS, React, Tailwind, and TypeScript. Use when this capability is needed.

- Skill: `tomevault-io/frontend-nextjs` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/frontend-nextjs`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/frontend-nextjs/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/frontend-nextjs

---


# NextJS Frontend Development

## When to Use This Skill

Use when developing frontend code in a NextJS project with React, Tailwind, and TypeScript.

## Recommended Project Structure

```
src/
├── app/                    # Routes, layouts, server components
├── components/
│   ├── ui/                 # Design system primitives (shadcn/ui)
│   ├── common/             # Reusable generic components
│   ├── layout/             # Header, Footer, Sidebar
│   └── icons/
├── features/
│   └── <domain>/
│       ├── components/
│       ├── hooks/
│       ├── stores/
│       ├── services/
│       ├── constants/
│       └── types/
├── shared/
│   ├── hooks/
│   ├── utils/
│   ├── stores/
│   ├── services/
│   ├── constants/
│   └── types/
└── styles/
```

## Organization Rules

- `components/ui` — Design system primitives only
- `components/common` — Generic components used across features
- `features/<domain>` — Domain-specific UI and logic (isolated)
- `shared/*` — Truly global hooks, utils, services
- `app/*` — Pages, layouts, data fetching; no business logic

## Import Order

1. `@/components/ui`
2. `@/components/common`
3. `@/features/<domain>`
4. `@/shared/...`

Features must NOT import from other features.

## Naming Conventions

- Folders and files: kebab-case
- Hooks: `use-` prefix
- Stores: `-store.ts` suffix
- Types: feature-local; export only when necessary

## State & Data

- Server Components by default; `'use client'` only when necessary
- Data fetching in `app/*` or `features/<domain>/services`
- Global state only when crossing features; otherwise keep local

## Styles (Tailwind)

- Use `cn` helper (clsx + tailwind-merge) for conditional classes
- Mobile first approach
- Class order: layout -> box model -> typography -> visual -> states
- Avoid inline `style={{}}`

## Testing

- Stack: Vitest + Testing Library + MSW
- Test hooks, stores, services, components with real interactions
- Don't test: "renders without crash", CSS, third-party UI
- Naming: "should do X when Y"
- All tests in English

## Pre-commit Checklist

- File in correct directory?
- Imports follow allowed graph?
- `'use client'` only where needed?
- State properly localized?
- Tailwind formatted, no inline styles?
- Minimum accessibility applied?

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/arvoreeducacao) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-13 -->