跪拜 Guibai
← All articles
Cursor · Frontend · AI Programming

Stop Pasting Review Prompts: Put a 'frontend-review' Skill in Your Repo

By 尘世中一位迷途小书童 ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Team rule changes now go through the same PR flow as code, so frontend review standards stop drifting across chat histories. The open standard is cross-product, so a skill written once works in Cursor, VS Code, and any AAIF-compliant agent.

Summary

The problem: teams using AI for code review end up with each person's chat history holding a slightly different version of the frontend review checklist. The fix proposed here is Agent Skills, an open standard Anthropic donated to the Linux Foundation's Agentic AI Foundation in October 2026. A skill is a folder with a mandatory SKILL.md that carries YAML frontmatter (name and description) and markdown instructions, loaded on demand via progressive disclosure. This article provides a copy-ready 'frontend-review' skill that runs a four-step procedure: scope check → typecheck → lint → deny-list scan for risky patterns like exposed secrets, unvalidated postMessage origins, and dangerouslySetInnerHTML. It outputs a structured report with pass/conditional-pass/fail, executed checks, and must/should/later buckets. Deployment is straightforward: copy the folder to .agents/skills, run a zero-dependency bash script to validate, and trigger it with natural language. The piece also covers writing an effective description (include what it does and trigger phrases), common pitfalls (name mismatches, bloated SKILL.md, security overreach), and a rollout order: start with review, then new page/component, then narrow domain skills. The core shift is moving review rules from prose in chat to versioned files in the repo, so they can be PR'd, diffed, and shared.

Takeaways
— Agent Skills is an open standard donated to the Linux Foundation's Agentic AI Foundation on 2026-10-22, with the spec, name, logo, GitHub org, and agentskills.io shared for cross-product reuse.
— A skill is a folder with a mandatory SKILL.md; YAML frontmatter must include name (matching directory name, lowercase letters/digits/hyphens, no leading/trailing hyphen) and description (what it does and when to use).
— Progressive disclosure loads only a skill's name and description initially; the full SKILL.md and references are read only when a task matches, keeping context usage low.
— The template's review procedure is: scope check, typecheck (e.g., pnpm typecheck, npx tsc --noEmit), lint (ESLint/Biome/Oxlint), and a deny-list scan for risky patterns like .env or auth files, dangerouslySetInnerHTML, and postMessage without origin validation.
— The skill outputs a structured report: conclusion (pass/conditional pass/fail), executed checks, and three buckets for must-change, should-change, and later.
— Deploy by copying the skill folder to .agents/skills/ (or a product-specific path), running the supplied bash script demo/frontend-review/scripts/check-skill.sh to validate, and triggering it with natural language requests.
— Descriptions should state both what the skill does and the user phrases that should invoke it; test with real phrases after editing.
— Avoid pitfalls: name/directory mismatch, overloading SKILL.md with full docs, including PoCs or payloads, expecting the skill to replace human review, and keeping unsynced local copies instead of versioning in Git.
Conclusions

Moving review rules from chat to a SKILL.md changes their lifecycle: they become diffable and reviewable, which is a meaningful step toward standardizing AI behavior across a team.

The deny-list approach that only reports defensive findings without PoCs is a responsible balance, though it leaves the actual fix to a human.

Progressive disclosure solves the context-bloat problem, but it relies on a well-crafted description; the emphasis on testing triggers with real phrases shows that discoverability is the hard part.

The distinction between skill (session procedure) and CI (merge gate) is a useful boundary; it keeps AI review as an assistance layer rather than a replacement for automated checks.

Starting with a stable, command-driven process like review before introducing narrow skills suggests that process stability is a prerequisite for effective skill-building.

Concepts & terms
Agent Skills
An open standard for packaging reusable task workflows as a folder with a SKILL.md, so AI assistants can load them on demand.
Progressive disclosure
A design pattern where only a skill's metadata (name, description) is loaded initially, and full instructions are read only when a task matches, keeping context usage low.
SKILL.md
The core file of an Agent Skill, starting with YAML frontmatter (name, description) and containing markdown instructions for the agent.
Deny-list
In code review, a list of risky patterns, files, or operations that must be explicitly flagged for human confirmation, with no attack steps or payloads provided.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗