frontend-skills

A Claude Code plugin that makes Claude write and review Next.js frontend code at a senior engineer level.

What it does

When you're working on a Next.js project, Claude often produces code that works but isn't what a senior engineer would have written — wrong Server/Client boundaries, missing Zod validation, inaccessible forms, deprecated patterns. This plugin gives Claude the patterns it needs to get it right the first time.

What's inside

Component	Count	What it does
Skills	19	Topic knowledge loaded on demand — Next.js App Router, Server Actions, data fetching, TypeScript, shadcn/ui, accessibility, i18n, testing
Agent	1	@frontend — a senior frontend engineer for isolated tasks (code review, component builds, a11y audits)
Slash commands	4	/init-frontend, /new-component, /review-frontend, /audit-a11y
Hooks	3 (opt-in)	typecheck after edits, block bare any, auto-format

Stack supported

• Next.js 15 (App Router only) + React 19
• TypeScript 5.x (strict mode)
• Tailwind CSS v4
• shadcn/ui (CLI v4+)
• next-intl for i18n
• Vitest + React Testing Library

Install

Local (development / testing)

claude --plugin-dir /path/to/frontend-skills

From marketplace

claude plugin install ryanparsa/frontend-skills

Quickstart

1. Open Claude Code in your Next.js project.
2. Run /init-frontend — Claude detects your setup and writes a CLAUDE.md.
3. Ask Claude anything frontend-related. The right skills load automatically.

Build me a settings form where users can update their profile and change their password.

Claude will load nextjs-server-actions, shadcn-forms, nextjs-server-vs-client-components, and frontend-accessibility automatically, then write Server Components, a colocated Server Action, and a Zod-validated form.

Slash commands

Command	What it does
/init-frontend	Sets up a CLAUDE.md for this project, offers to enable hooks
/new-component <name> [spec]	Delegates to @frontend agent in build mode
/review-frontend [path]	Delegates to @frontend agent in review mode
/audit-a11y [path]	Delegates to @frontend agent in accessibility audit mode

The @frontend agent

For tasks that produce verbose output or should run in isolated context, invoke @frontend directly:

@frontend review my recent changes to the auth module
@frontend build a UserCard component with avatar, name, role, and an edit button

The agent runs in its own context, returns a structured result, and leaves your main conversation clean.

Opt-in hooks

The plugin ships three hooks that are off by default. Run /init-frontend to see the settings.json snippet to enable them, or add manually:

Hook	What it does
pre-write-block-any	Blocks : any or @ts-ignore without an explanatory comment
post-edit-typecheck	Runs tsc --noEmit after editing a .ts/.tsx file
post-edit-format	Runs prettier --write after edits (if prettier is installed)

Hooks live in hooks/ as shell scripts. They're opt-in because they depend on your project's package manager and tooling.

Skills reference

Next.js (7)

• nextjs-app-router-fundamentals — file conventions, route groups, dynamic segments
• nextjs-server-vs-client-components — decision tree, boundary rules, serialization
• nextjs-server-actions — colocated actions.ts, Zod validation, useActionState
• nextjs-data-fetching — fetch caching, unstable_cache, Suspense, react.cache()
• nextjs-data-access-layer — verifySession pattern, why middleware isn't enough
• nextjs-routing-advanced — parallel routes, intercepting routes, modal-as-route
• nextjs-client-server-state — where state lives: URL / RSC / TanStack Query / Zustand

TypeScript (2)

• typescript-strict-config — tsconfig.json for Next.js 15
• typescript-patterns — discriminated unions, satisfies, generics, no React.FC

shadcn / Tailwind (4)

• shadcn-setup-and-theming — install, OKLCH tokens, dark mode, React 19 changes
• shadcn-forms — Form + react-hook-form + Zod, Field/InputGroup primitives
• shadcn-data-table — TanStack Table, column definitions, server-side pagination
• shadcn-composition — Dialog, Sheet, Command, Combobox, Sidebar

Cross-cutting (2)

• frontend-accessibility — semantic HTML, focus management, ARIA rules, keyboard nav
• frontend-project-structure — colocation, lib/ organization, import boundaries

Testing (1)

• testing-vitest-rtl — Vitest setup, query priority, userEvent, mocking Next.js

Internationalization (3)

• i18n-next-intl-setup-and-routing — locale routing, middleware, [locale] segment
• i18n-messages-and-translation — useTranslations, ICU, type-safe keys
• i18n-rtl-and-formatting — dir="rtl", logical CSS, useFormatter

Contributing

Open an issue or PR on GitHub. To add a skill, create a new directory under skills/ with a SKILL.md file following the frontmatter conventions in existing skills (name, description, when_to_use, user-invocable: false).

License

MIT — see LICENSE.