skills/html-artifacts/html-artifact/SKILL.md
Produce a single self-contained HTML knowledge artifact for one-off deliverables — status reports, incident timelines, slide decks, concept explainers, design comparisons, dashboards, clickable prototypes, weekly digests, post-mortems. Trigger when the user asks for "an HTML for X", "a one-pager", "a status report", "an incident timeline", or describes a spatially-organized document (diff, diagram, side-by-side, time-axis, clickable flow) that would lose its value as flat markdown — even when they don't say "HTML" explicitly.
npx skillsauth add arctuition/skills html-artifactInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Produce one self-contained HTML file using the shared design system.
Read references/design-tokens.md and use its colours, typography, page shell, and component CSS exactly. Don't introduce new colours, fonts, or shadows — the shared design system is what keeps team artifacts feeling like a coherent set, and drift here is the failure mode to avoid. If you genuinely need a component the tokens don't cover, build it inline from the existing colours / typography / borders so it still belongs to the family.
The reference components (TL;DR block, ba-grid, principle list, callout-dark, panel, file index, etc.) are a vocabulary, not a checklist — pull in whatever the content needs and skip the rest.
Content, sections, ordering, length, what goes first, how many screens — that's for the user and the material to decide, not this skill. Don't impose a template or a required shape; build what the content in front of you needs.
Match the user's prose language: Chinese ask → Chinese prose, English ask → English prose. Code, file paths, identifiers, ticket keys, and CSS class names stay English.
<!-- shared:save-conventions-start -->Save in ~/artifacts/, creating the directory if it doesn't exist. If the user specified a directory or filename, honor that instead. Surface a computer:// link so the user can open it themselves — don't auto-open. Don't dump the HTML source into chat — the artifact is the deliverable.
references/design-tokens.md — the colour / typography / page-shell / component CSS to use verbatim. Read this before assembling the HTML.testing
Analyze committed changes on the current local branch, propose a dependency-ordered stacked PR plan, then after explicit approval create multiple upstream stacked PRs. Use when the user asks to "stack this PR", "create a PR stack", "split this branch into PRs", "split PR", "拆 PR", "split into reviewable PRs", or says a branch/PR is too big to review.
testing
Iteratively detect and fix everything outstanding on a GitHub PR — CI failures, bot review findings, and human inline comments — then push, wait for CI, and re-scan until nothing actionable remains. Use when asked to "fix the remaining issues on a PR", "address PR feedback", "loop until CI is green", "auto-fix PR comments", "run a final fix pass before merge", or 检查 PR 状态和 comment 自动修复 / 修到没有新 finding 为止. Author-side by default; runs on any PR branch you have push access to, including PRs that already look ready to merge.
testing
Research what real people have actually been saying about a topic over a recent time window (default last 30 days) across Reddit, Hacker News, X, YouTube, and GitHub — then synthesize an engagement-weighted, cited brief. Use when the user asks: what's new/recent buzz/trending with X, community sentiment on X, what people are saying about X lately, last30days, past week/last N days, 最近大家在聊什么 / 最近 X 有什么新动态 / 时效性调研 / 选型/产品调研. Complements deep-research (fact-checking) by focusing on recency + community signal rather than authoritative sources.
data-ai
Wrap up the work you just did and open a PR for it — branch off main/master if needed, commit only the changes you made, push, open a pull request (following .github/PULL_REQUEST_TEMPLATE.md when present), and open the PR in the browser. Targets the `upstream` remote's default branch as the base when an `upstream` remote exists, otherwise `origin`. Use when the user says "sign off", "signoff", "ship it", "open a PR for this", "commit and PR", or "wrap this up".