用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt;运行前请先检查来源。
npx skills add https://github.com/G1Joshi/Agent-Skills --skill clerk命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地?可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
基于 SOC 职业分类
| name | clerk |
| description | Clerk authentication for modern apps. Use for user management. |
Clerk is a comprehensive user management and authentication service built specifically for the modern web (React, Next.js, Remix). It focuses on providing "Drop-in" UI components (<SignIn />, <UserProfile />) rather than just APIs.
// middleware.ts
import { authMiddleware } from "@clerk/nextjs";
export default authMiddleware({});
// layout.tsx
import { ClerkProvider } from '@clerk/nextjs'
export default function RootLayout({ children }) {
return (
<ClerkProvider>
<html><body>{children}</body></html>
</ClerkProvider>
)
}
// page.tsx (Protected)
import { UserButton, currentUser } from "@clerk/nextjs";
export default async function Page() {
const user = await currentUser();
if (!user) return <div>Not signed in</div>;
return <header>Welcome {user.firstName} <UserButton /></header>;
}
Clerk provides the full UI: Login, Register, Forgot Password, Managed MFA, User Profile (Change Password, 2FA, Sessions).
Clerk handles the complexity of short-lived JWTs (__session cookie) and keeps them fresh automatically via frontend SDKs.
Do:
currentUser()) to fetch user data on the backend.Don't:
| Error | Cause | Solution |
|---|---|---|
401 Unauthorized | Middleware not configured. | Ensure middleware.ts matches all routes (/((?!...))). |
Hydration Error | HTML mismatch. | Wrap app in <ClerkProvider>. |