Adoption

Agent Skills are supported by leading AI development tools.

VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory

binhtranquoc/frontend-nextjs

Name: frontend-nextjs
Author: binhtranquoc

cli/templates/skills/frontend-nextjs/SKILL.md

npx skillsauth add binhtranquoc/agent-kit-skill frontend-nextjs

Clean

TrivyContainer and dependency vulnerability scanner

Clean

SemgrepStatic code analysis for vulnerabilities

Clean

mcp-scan (Snyk)Model Context Protocol security validation

Skipped

Snyk (dep)Open source security scanning

Skipped

Socket.devSupply chain security analysis

Skipped

VirusTotalMulti-engine malware detection

Skipped

CrowdStrikeAdvanced threat intelligence

Skipped

OSV-ScannerOpen Source Vulnerability database check

Skipped

OWASP Dep-Check

Frontend Next.js Conventions

This skill provides specific conventions for Next.js frontend development.

When to Use

Use this skill when working on Next.js projects
Use this skill when creating new pages, components, or API routes
This skill builds upon project-standards skill

Instructions

1. App Router Strategy

Default to Server Components

All components in app/ are Server Components by default. Only add "use client" when interactivity is strictly needed.

// Server Component (default) - No directive needed
async function UserProfile({ userId }: { userId: string }) {
  const user = await getUser(userId); // Direct data fetching
  return <div>{user.name}</div>;
}

// Client Component - Only when needed
"use client";

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

Data Fetching

Fetch data directly in Server Components using async/await. Avoid useEffect for data fetching.

2. File Structure & Naming

app/
├── (auth)/                    # Route group (no URL impact)
│   ├── login/
│   │   └── page.tsx
│   └── register/
│       └── page.tsx
├── (dashboard)/
│   ├── layout.tsx             # Shared layout
│   ├── page.tsx               # /dashboard
│   └── settings/
│       └── page.tsx           # /dashboard/settings
├── api/
│   └── users/
│       └── route.ts           # API route
├── _components/               # Private folder (excluded from routing)
│   ├── Header.tsx
│   └── Footer.tsx
└── globals.css

Filenames

page.tsx: Route UI
layout.tsx: Shared UI (wrappers)
loading.tsx: Loading states (Suspense)
error.tsx: Error boundary
not-found.tsx: 404 page

3. Performance & Optimization

Images

STRICTLY use next/image with defined dimensions.

import Image from 'next/image';

// Good
<Image
  src="/hero.jpg"
  alt="Hero image"
  width={1200}
  height={600}
  priority // For above-the-fold images
/>

// With fill
<div className="relative h-64 w-full">
  <Image src="/bg.jpg" alt="Background" fill className="object-cover" />
</div>

Fonts

Use next/font to optimize loading.

import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

4. Server Actions

Use Server Actions for form submissions instead of API routes.

// app/actions.ts
"use server";

export async function createUser(formData: FormData) {
  const email = formData.get('email');
  // Server-side logic
  await db.user.create({ data: { email } });
  revalidatePath('/users');
}

// app/users/new/page.tsx
import { createUser } from '../actions';

export default function NewUserPage() {
  return (
    <form action={createUser}>
      <input name="email" type="email" required />
      <button type="submit">Create</button>
    </form>
  );
}

5. State Management

URL as State

Prioritize storing search parameters in the URL.

"use client";

import { useSearchParams, useRouter } from 'next/navigation';

function ProductFilters() {
  const searchParams = useSearchParams();
  const router = useRouter();
  
  const setFilter = (key: string, value: string) => {
    const params = new URLSearchParams(searchParams);
    params.set(key, value);
    router.push(`?${params.toString()}`);
  };

  return (
    <select onChange={(e) => setFilter('category', e.target.value)}>
      {/* options */}
    </select>
  );
}

6. Component Patterns

// Component with Props interface
interface CardProps {
  title: string;
  children: React.ReactNode;
  variant?: 'default' | 'outlined';
}

export function Card({ title, children, variant = 'default' }: CardProps) {
  return (
    <div className={cn('rounded-lg p-4', variants[variant])}>
      <h3 className="font-bold">{title}</h3>
      {children}
    </div>
  );
}

7. Dependencies

Styling: Tailwind CSS
State: TanStack Query + Zustand
Forms: React Hook Form + Zod
UI: shadcn/ui (recommended)

binhtranquoc/frontend-nextjs

cli/templates/skills/frontend-nextjs/SKILL.md

Next.js frontend development conventions. Use when working on Next.js/React projects with App Router.

development

Updated Apr 21, 2026

$ install --global

skillsauth

npx skillsauth add binhtranquoc/agent-kit-skill frontend-nextjs

Install this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.

Security Scan Results

3 of 9 scanners reported clean

Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.

Scanners Passed

Scanners in report

Clean

TrivyContainer and dependency vulnerability scanner

95%

Clean

SemgrepStatic code analysis for vulnerabilities

95%

Clean

mcp-scan (Snyk)Model Context Protocol security validation

95%

Skipped

Snyk (dep)Open source security scanning

50%

Skipped

Socket.devSupply chain security analysis

50%

Skipped

VirusTotalMulti-engine malware detection

50%

Skipped

CrowdStrikeAdvanced threat intelligence

50%

Skipped

OSV-ScannerOpen Source Vulnerability database check

50%

Skipped

OWASP Dep-Check

50%

Last scanned: Apr 22, 2026, 3:30 AM52.1s1 file scanned

SKILL.md

name:: frontend-nextjs
description:: Next.js frontend development conventions. Use when working on Next.js/React projects with App Router.

Frontend Next.js Conventions

This skill provides specific conventions for Next.js frontend development.

When to Use

Use this skill when working on Next.js projects
Use this skill when creating new pages, components, or API routes
This skill builds upon project-standards skill

Instructions

1. App Router Strategy

Default to Server Components

All components in app/ are Server Components by default. Only add "use client" when interactivity is strictly needed.

// Server Component (default) - No directive needed
async function UserProfile({ userId }: { userId: string }) {
  const user = await getUser(userId); // Direct data fetching
  return <div>{user.name}</div>;
}

// Client Component - Only when needed
"use client";

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

Data Fetching

Fetch data directly in Server Components using async/await. Avoid useEffect for data fetching.

2. File Structure & Naming

app/
├── (auth)/                    # Route group (no URL impact)
│   ├── login/
│   │   └── page.tsx
│   └── register/
│       └── page.tsx
├── (dashboard)/
│   ├── layout.tsx             # Shared layout
│   ├── page.tsx               # /dashboard
│   └── settings/
│       └── page.tsx           # /dashboard/settings
├── api/
│   └── users/
│       └── route.ts           # API route
├── _components/               # Private folder (excluded from routing)
│   ├── Header.tsx
│   └── Footer.tsx
└── globals.css

Filenames

page.tsx: Route UI
layout.tsx: Shared UI (wrappers)
loading.tsx: Loading states (Suspense)
error.tsx: Error boundary
not-found.tsx: 404 page

3. Performance & Optimization

Images

STRICTLY use next/image with defined dimensions.

import Image from 'next/image';

// Good
<Image
  src="/hero.jpg"
  alt="Hero image"
  width={1200}
  height={600}
  priority // For above-the-fold images
/>

// With fill
<div className="relative h-64 w-full">
  <Image src="/bg.jpg" alt="Background" fill className="object-cover" />
</div>

Fonts

Use next/font to optimize loading.

import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

4. Server Actions

Use Server Actions for form submissions instead of API routes.

// app/actions.ts
"use server";

export async function createUser(formData: FormData) {
  const email = formData.get('email');
  // Server-side logic
  await db.user.create({ data: { email } });
  revalidatePath('/users');
}

// app/users/new/page.tsx
import { createUser } from '../actions';

export default function NewUserPage() {
  return (
    <form action={createUser}>
      <input name="email" type="email" required />
      <button type="submit">Create</button>
    </form>
  );
}

5. State Management

URL as State

Prioritize storing search parameters in the URL.

"use client";

import { useSearchParams, useRouter } from 'next/navigation';

function ProductFilters() {
  const searchParams = useSearchParams();
  const router = useRouter();
  
  const setFilter = (key: string, value: string) => {
    const params = new URLSearchParams(searchParams);
    params.set(key, value);
    router.push(`?${params.toString()}`);
  };

  return (
    <select onChange={(e) => setFilter('category', e.target.value)}>
      {/* options */}
    </select>
  );
}

6. Component Patterns

// Component with Props interface
interface CardProps {
  title: string;
  children: React.ReactNode;
  variant?: 'default' | 'outlined';
}

export function Card({ title, children, variant = 'default' }: CardProps) {
  return (
    <div className={cn('rounded-lg p-4', variants[variant])}>
      <h3 className="font-bold">{title}</h3>
      {children}
    </div>
  );
}

7. Dependencies

Styling: Tailwind CSS
State: TanStack Query + Zustand
Forms: React Hook Form + Zod
UI: shadcn/ui (recommended)

Related Skills

binhtranquoc/role-reviewer

development

VerifiedTrustedCommunity

Activate Code Reviewer mode for code review and quality assurance. Use when reviewing code for bugs, security issues, or optimization opportunities.

SKILL.mdUpdated Apr 21, 2026

binhtranquoc/role-reviewer

binhtranquoc/role-implementer

development

VerifiedTrustedCommunity

Default Implementer mode for writing production code. Use for general coding tasks following project conventions.

SKILL.mdUpdated Apr 21, 2026

binhtranquoc/role-implementer

binhtranquoc/role-debugger

development

VerifiedTrustedCommunity

Activate Debugger mode for systematic bug fixing. Use when debugging errors, investigating issues, or fixing bugs.

SKILL.mdUpdated Apr 21, 2026

binhtranquoc/role-debugger

binhtranquoc/role-architect

testing

VerifiedTrustedCommunity

Activate Architect mode for system design and architecture decisions. Use when planning features, designing systems, or making architectural choices.

SKILL.mdUpdated Apr 21, 2026

binhtranquoc/role-architect

Download

For Claude Desktop. Download once, then upload the file in the app — no terminal needed.

Need help? View full Cowork setup guide →

Install manually

Choose your platform

# Clone the repo
git clone https://github.com/binhtranquoc/agent-kit-skill.git

# Copy into Claude Code skills folder (global)
cp -r agent-kit-skill/cli/templates/skills/frontend-nextjs ~/.claude/skills/

Claude Code Skills — official skills path docs.

Repository

binhtranquoc/agent-kit-skill

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT