Menu
Use when the task involves UI components, HTML, CSS, styling, React, Vue, Svelte, client-side state, accessibility, or browser APIs.
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.
Based on SOC occupation classification
Use when updating documentation, README sections, CHANGELOG entries, docstrings, or CLAUDE.md conventions after a feature is complete.
Use when the task involves server-side API routes, middleware, business logic, authentication, database queries, or infrastructure configuration.
Task and document management with Backlog.md. Use this skill whenever working with tasks, tracking work, creating subtasks, searching or viewing existing tasks, or any time work should be preserved across sessions or handed off. Triggers include: "create a task", "track this", "add to backlog", "what tasks do I have", "mark as done", "continue on task", "break this into tasks", or any request where the outcome has a concrete deliverable worth tracking. Always use this skill when a project includes a Backlog.md setup and work needs to be logged. Prefer CLI commands unless MCP tools are confirmed working in the current environment.
Use when adversarial code review is needed — actively constructing failure scenarios, edge cases, and security violations to break the implementation.
Run code review via an external LLM API using external-review.sh. Outputs structured JSON with verdict, summary, and per-file concerns.
Use when reviewing code for correctness, security, performance, or style — including /review tasks, PR reviews, and post-build quality passes.
| name | frontend-rules |
| description | Use when the task involves UI components, HTML, CSS, styling, React, Vue, Svelte, client-side state, accessibility, or browser APIs. |
Before writing a single line of code, commit to a clear aesthetic direction:
<script> block — if one CDN fails, unrelated features must still workintegrity attributes if you can verify the hash against the real CDN response; unverified SRI silently breaks scriptstypeof guards (e.g. if (typeof Chart !== 'undefined')) so the page degrades gracefullyAfter any HTML/CSS change, run visual-check.sh at both mobile (375px) and desktop viewports. Do not mark done if layout is broken at either viewport:
.claude/skills/playwright-cli-helpers/scripts/visual-check.sh path/to/file.html --evidence <task-slug>
See playwright-cli-helpers skill for full usage.
These rules are additive. frontend-rules is more specific than cross-cutting skills — frontend domain constraints take precedence on UI matters.