前端设计操作浏览器github未标认证来源可访问许可证需确认审计通过

nextjs-standards（Next.js standards 前端）

Agent Skill

用于辅助前端页面、组件、样式和交互逻辑的开发与维护。它适合让 Agent 生成或审查 React、Next.js、Vue、Tailwind、CSS 等相关代码，整理组件结构，或定位布局和性能问题。使用时需要结合项目现有设计系统、路由和构建方式，避免只生成孤立片段；涉及页面改动时，应配合本地预览和构建检查确认视觉效果。

总安装

808

周安装

GitHub Stars

下载量

261

CodexClaudeCursorGemini CLI

安装说明

本站只整理中文说明和来源信息，不托管安装包，也不代用户安装。

GitHub

来源数

许可证

unknown

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手，先确认命令和权限，再让它执行。

请帮我安装这个 Agent Skill：nextjs-standards（Next.js standards 前端）
来源仓库：https://github.com/jstarfilms/vibecode-protocol-suite
仓库路径：skills/nextjs-standards
安装命令：
npx skills add https://github.com/jstarfilms/vibecode-protocol-suite --skill nextjs-standards
安装前请先检查当前环境是否支持对应 CLI，并向我确认将要执行的命令、安装目录、联网范围和文件读写权限；确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill；本站只展示命令，不托管安装包，也不自动执行。

skills.shnpx skills

npx skills add https://github.com/jstarfilms/vibecode-protocol-suite --skill nextjs-standards

简介

用于辅助 Next.js 前端开发的标准化实践，提升代码质量和可维护性。

适合在 Codex、Claude、Cursor 等宿主中生成符合规范的组件和页面结构。
使用时需结合项目现有设计系统和路由配置，确保一致性。
安装方式：GitHub 仓库，命令为 npx skills add <repo> --skill nextjs-standards。
注意：需确认权限范围和维护状态，避免触发不必要的文件读写或网络请求。

SKILL.md

Next.js Coding Standards Skill

Auto-Load Trigger: Presence of next.config.* or "next" in package.json

When to Use

Starting a new Next.js project
Before any TypeScript/React file edit
When context seems lost mid-session
After /agent_reset or /vibe-primeAgent

🛑 Verification Protocol (MANDATORY)

After Every TypeScript/TSX File Edit

npx tsc --noEmit

If this fails:

DO NOT proceed to next file
Fix the type error immediately
Re-run until it passes
Only then continue

Before Any Handoff

python scripts/vibe-verify.py

All checks must pass before claiming "done."

The Blueprint & Build Protocol

Phase 1: Blueprint (Before Coding)

Check docs/features/ for existing patterns
Create/update docs/features/FeatureName.md
Wait for approval before coding

Phase 2: Build (Implementation)

Announce which FR-XXX you're implementing
Reference the corresponding issue in docs/issues/
Implement one step at a time
tsc --noEmit after every file
Mark acceptance criteria as complete

Phase 3: Finalization

Run full verification (vibe-verify.py)
Update issue file with completion status
Generate handoff summary

Full-Stack Type Safety

The AI reliability secret: TypeScript tells you when you broke something.

Core Principle

If you change the backend, the frontend MUST type-check. If type-check fails:

The change broke something
Fix it before moving on
Never ignore type errors

Stack Alignment

Server Components fetch data → types flow to client
API routes return typed responses → frontend consumes them
Prisma schema changes → regenerate client → type-check

Next.js App Router Rules

Server Components Default — No 'use client' unless required
Client Components Sparingly — Only for interactivity, hooks, browser APIs
Data Fetching — In async Server Components, not useEffect
Route Handlers — All API in app/api/.../route.ts
Caching — Be explicit: {cache: 'no-store'} or revalidate = N

File Structure (Feature-Sliced)

src/
├── app/                    # Next.js App Router pages
├── features/               # Business domains
│   └── [FeatureName]/
│       ├── components/     # Feature-specific components
│       ├── hooks/          # Feature-specific hooks
│       └── *.service.ts    # Business logic
├── components/
│   ├── ui/                 # Reusable UI (Button, Card)
│   └── layout/             # Layout components
├── lib/                    # Utilities, clients
└── scripts/                # Automation (vibe-verify.py)

Component Rules

200-Line Limit — Refactor if exceeded
Single Responsibility — One thing per component
Props Interface — Always use TypeScript interfaces
Custom Hooks — Extract stateful logic into use* hooks

Styling (Tailwind v4)

Why Tailwind for AI Reliability: Tailwind colocates styles with UI in a single file. Unlike separate .css files, AI agents see the complete context (logic + styles + structure) without jumping between files. This dramatically reduces hallucinations and context fragmentation.

@import "tailwindcss";

@theme {
  --color-background: #ffffff;
  --color-foreground: #0b1221;
  --color-border: #e5e7eb;
}

@theme .dark {
  --color-background: #0b1221;
  --color-foreground: #e5e7eb;
}

Use @theme tokens, not tailwind.config extensions
Utility-first, no custom CSS files
Dark mode via .dark class on <html>

Backend Rules

Service Layer Pattern

Route Handlers = Controllers (parse request, return response)
Services = Business logic (DB queries, calculations)

Validation

import { z } from 'zod';

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
});

All inputs validated with Zod. No exceptions.

Templates Available

This skill provides templates in templates/:

Coding_Guidelines.md — Copy to docs/Coding_Guidelines.md
Issue_Template.md — Format for FR issues

Quick Reference

Command	When
`npx tsc --noEmit`	After every TS/TSX edit
`python scripts/vibe-verify.py`	Before handoff
`npm run lint`	Check code style
`npm run build`	Verify production build

Recovery Protocol

If you break something:

git status                    # See changed files
git diff                      # See what changed
git checkout -- <file>        # Revert specific file
git stash                     # Save and revert all

适合场景

用户想查找某类 Agent Skill 时

需要根据任务场景推荐可安装能力包时

需要对比不同来源的安装命令和来源信息时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明，方便继续核验

能力 4

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用；具体调用方式请以来源页面和 README 为准。

平台分布

Codex

34.92%

按下载量换算91

Claude

31.54%

按下载量换算82

Cursor

19.96%

按下载量换算52

Gemini CLI

10.39%

按下载量换算27

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

操作浏览器

该 Skill 可能涉及浏览器控制能力，使用时可能读取或操作网页内容，需要在受控环境中确认权限边界。

安装前确认

本站仅展示第三方公开信息，不托管安装包，不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。当前只有一个来源，正式发布前建议补源仓库或其他目录站核验。

来源信息

GitHub 仓库

github.com

/jstarfilms/vibecode-protocol-suite

SKILL.md 来源

github.com

/jstarfilms/vibecode-protocol-suite/tree/main/skills/nextjs-standards

skills-sh

skills.sh

/jstarfilms/vibecode-protocol-suite/nextjs-standards

继续浏览同类 Skills

更多前端设计 Skills（10,216）返回 Skills 目录

上一个 Skill

nextjs-saas（Next.js saas 前端）

下一个 Skill

nextjs-typescript-tailwindcss-supabase（Next.js TypeScript Tailwind CSS Supabase 前端）