Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Frontend Dev Guidelines (Next.js 15)

A rulebook that makes Claude write Next.js 15 + React 19 + Shadcn/ui code following consistent Server Component and App Router best practices.

Dev & CodingIntermediate★ 419⑂ 44AI score 9/10Last updated: Sep 8, 2026

What it does

Gives Claude a concrete convention set for modern Next.js work:

  • Server vs Client Component decisions: Server Components by default, "use client" only for interactivity, hooks, or browser APIs
  • App Router file layout: app/{route}/page.tsx, loading.tsx, error.tsx, dynamic routes, route groups, features/ folders
  • Data fetching & Server Actions: async/await directly in Server Components; mutations via "use server" actions with zod validation
  • Styling: Tailwind utilities, the cn() helper, and Shadcn/ui components imported from @/components/ui
  • Performance & TypeScript: next/image, next/font, Suspense streaming, strict mode, no any, explicit prop interfaces
  • Ships with new-component / new-page checklists and copy-paste templates

Who it's for

  • Frontend devs starting a Next.js 15 App Router project
  • Tech leads who want AI output to match the team's conventions
  • React developers still fuzzy on the Server/Client Component boundary
  • Teams standardized on Shadcn/ui + Tailwind

Examples

  1. "Build a posts list page" → generates app/posts/page.tsx as an async Server Component with fetch, a PostList card component, plus loading.tsx, error.tsx, and SEO metadata
  2. "Add a create-post form" → a "use client" form paired with a zod-validated Server Action in app/actions/posts.ts
  3. "Refactor this component" → removes an unnecessary "use client", collapses conditional classes into cn(), and replaces any with typed prop interfaces

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/aiskillstore/marketplace/HEAD/skills/0chan-smc/frontend-dev-guidelines/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the skills/0chan-smc/frontend-dev-guidelines folder from the GitHub repo aiskillstore/marketplace into my ~/.claude/skills/frontend-dev-guidelines/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/aiskillstore/marketplace.git /tmp/aiskillstore && mkdir -p ~/.claude/skills && cp -r /tmp/aiskillstore/skills/0chan-smc/frontend-dev-guidelines ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal.
  2. Clone the marketplace repo into a temp folder: git clone https://github.com/aiskillstore/marketplace.git /tmp/aiskillstore
  3. Create the skills folder if needed: mkdir -p ~/.claude/skills
  4. Copy just this skill: cp -r /tmp/aiskillstore/skills/0chan-smc/frontend-dev-guidelines ~/.claude/skills/
  5. Verify with ls ~/.claude/skills/frontend-dev-guidelines — you should see SKILL.md.
  6. Restart Claude Code, then ask something like "create a new page" inside a Next.js project; the skill activates automatically.
  7. For best results, confirm your project actually uses the @/ path alias in tsconfig.json and has Shadcn/ui installed.
View source on GitHub ↗