菜单
Use when writing or refactoring HTML or template markup (including Svelte), choosing between div/section/article/ul/li, cleaning up div soup, fixing heading or landmark structure, labeling forms, deciding between buttons and links, or replacing custom controls with native HTML.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | best-practices-html |
| description | Use when writing or refactoring HTML or template markup (including Svelte), choosing between div/section/article/ul/li, cleaning up div soup, fixing heading or landmark structure, labeling forms, deciding between buttons and links, or replacing custom controls with native HTML. |
Write semantic, accessible, low-noise HTML. Pick the element that matches the content or interaction — not the element a rule prescribes.
Violating the spirit beats violating the letter. "Semantic HTML" does not mean using the most specialized element everywhere. A plain <div> is better than a wrong semantic element.
When the file is a Svelte component or other template (not a standalone document):
{#if}, {#each}, {:else}, {@html}, bind:, class:, style:, event attributes, <svelte:head>.<!doctype html>, <html>, <head>, or <body> inside component files. Document metadata in Svelte goes through <svelte:head>.svelte-ignore casually.Repetition is not list semantics. Wrapping card grids in <ul>/<li> by default is the most common mistake.
| Content | Element |
|---|---|
| Steps, menu items, bullets, grouped items where being a list is the point | <ul> / <ol> / <li> |
| Each repeated item stands on its own (post, card, search result) with its own heading or actions | <article> |
| Block of content unified by a theme that benefits from its own heading | <section> |
| Mostly layout, no stronger semantic available | plain <div> |
<label> (wrap or for/id). Placeholder is not a label.type (email, tel, number, url, password, search, date).<fieldset> with a <legend>.required attribute, not just text.<a> to go somewhere (changes URL/location).<button> to do something (mutates state, submits, opens UI).<div> or <span>.alt="" for decorative images.alt for informative ones — describe meaning, not file content.width and height to reduce layout shift.<figure> + <figcaption> when the caption is part of the content.<h1> per page or main view.h1 → h2 → h3). Do not skip levels for visual reasons.<header>, <nav>, <main>, <aside>, <footer> where they help orientation.<button>, <details>/<summary>, <dialog>, <input>, <select>, <fieldset>, <table> are almost always better than rebuilding them from <div>s and JS.
For standalone documents include: <!doctype html>, lang on <html>, <meta charset="utf-8">, <meta name="viewport" content="width=device-width, initial-scale=1">, a meaningful <title>.
<div> or <span> instead of <button> or <a>.<label>; placeholder used as the label.onclick="..." strings in raw HTML (different from framework event attributes).<html>, <head>, or <body> inside component files.<ul>/<li> around card grids by default.<section> or <article> forced onto layout-only structures.box1, red_text, left_side).When in doubt, ask:
<article>?Read an open GitHub pull request via the `gh` CLI and rewrite its title and description to follow a conventional-commits + JIRA-ticket format with a concise structured body and a smart pre-merge checklist derived from the diff. Use this skill whenever the user wants to clean up, format, normalize, standardize, or apply a template to a pull request — including phrases like "fix my PR description" or "update PR".
Compact the current conversation into a handoff document for another agent to pick up.
Pipe the response's prose to the macOS clipboard via `pbcopy` so the user can paste it directly. Use when the user says "copy to clipboard", "/copy", "pbcopy this", "put it on my clipboard", or otherwise asks for paste-ready output. macOS only.
Best practices for OpenID Connect (OIDC) and OAuth 2.0 — flow selection, token validation, endpoints, discovery, and security hardening. Use when building, integrating, or reviewing authentication code: OIDC/OAuth clients (RP), authorization servers (OP), an OIDC library, ID token / JWT validation, PKCE, refresh tokens, DPoP, or logout. Triggers on OpenID Connect, OAuth, SSO, ID token, access token, auth flow, JWKS, client_secret, PKCE, or "log in with".
Code-review skill with mode routing. Default lens is `standard` (alias `quick`) — correctness, security, quality in one pass with a verdict. Other modes: `security` (OWASP, high-confidence only), `architecture` (module depth, coupling, boundaries), `merge-risk` (shippability + reversibility), `intent` (alias `adversarial`) — does the diff deliver what was promised, `multi` (alias `full`) — six parallel reviewers plus a verifier. Invoke as /review-code [<mode>] [<scope>]. Use for any code-review or PR-audit task.
OAuth2.0