Menu
Next.js 15 App Router patterns and best practices.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Codex adaptation of the OpenClaw Medical Skills library. Use for biomedical, clinical, healthcare AI, genomics, bioinformatics, drug discovery, pharmacovigilance, clinical trials, medical imaging, public health, medical device, regulatory, scientific data analysis, lab automation, and medical research workflows; also use when the user mentions OpenClaw Medical Skills, medical skill library, or any named capability preserved in the OpenClaw capability index.
Use this skill when the user wants to find customer leads from short-video comments, generate customer-discovery keywords, review lead intent, query a customer pool, or prepare outreach scripts with PPXC.
READ this skill when implementing or configuring animation-style shaders (Toon/Cel Shaders) — including outlines, rim lighting, toon shading, MatCap, emission, dissolve, hatching, or any stylized rendering effect. Contains preset styles and feature-to-reference mappings for lilToon, Poiyomi, UTS2, RToon, SToon, and ToonShadingCollection. Works as a domain knowledge plugin alongside workflow skills (OpenSpec, SpecKit) or plan mode of an agent.
行业客户名单爬取 — 地区+行业→企业名称/联系人/电话/地址CSV
会议纪要自动整理 — 录音/文字记录→结构化纪要+待办事项+责任人追踪
简历优化专家 — 输入简历→JD匹配分析+优化建议+面试问题预测
Based on SOC occupation classification
| name | nextjs-15-patterns |
| description | Next.js 15 App Router patterns and best practices. |
// app/users/page.tsx - Server Component (default)
export default async function UsersPage() {
const users = await getUsers(); // Direct DB access
return <UserList users={users} />;
}
// components/counter.tsx
'use client';
import { useState } from 'react';
export function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}
// actions/user-actions.ts
'use server';
import { revalidatePath } from 'next/cache';
import { z } from 'zod';
const CreateUserSchema = z.object({
name: z.string().min(1),
email: z.string().email(),
});
export async function createUser(formData: FormData) {
const validated = CreateUserSchema.safeParse({
name: formData.get('name'),
email: formData.get('email'),
});
if (!validated.success) {
return { error: validated.error.flatten() };
}
const user = await db.insert(users).values(validated.data).returning();
revalidatePath('/users');
return { data: user };
}
// Direct async/await - no useEffect needed
async function UserProfile({ id }: { id: string }) {
const user = await getUser(id);
if (!user) notFound();
return <Profile user={user} />;
}
// app/users/loading.tsx
export default function Loading() {
return <UserListSkeleton />;
}
// app/users/error.tsx
'use client';
export default function Error({
error,
reset,
}: {
error: Error;
reset: () => void;
}) {
return (
<div>
<h2>Something went wrong</h2>
<button onClick={reset}>Try again</button>
</div>
);
}
// app/api/users/route.ts
import { NextResponse } from 'next/server';
export async function GET() {
const users = await getUsers();
return NextResponse.json(users);
}
export async function POST(request: Request) {
const body = await request.json();
const user = await createUser(body);
return NextResponse.json(user, { status: 201 });
}
// app/users/[id]/page.tsx
import { Metadata } from 'next';
export async function generateMetadata({
params,
}: {
params: { id: string };
}): Promise<Metadata> {
const user = await getUser(params.id);
return {
title: user?.name ?? 'User',
description: `Profile for ${user?.name}`,
};
}
app/
├── @modal/
│ └── (.)photo/[id]/page.tsx # Intercepted modal
├── layout.tsx
└── page.tsx