메뉴
Generate a single-file HTML artifact (status report, slide deck, prototype, throwaway editor, flowchart, etc.) and open it in the browser. Use when the user wants a one-off visual artifact instead of markdown — for sharing, reference, or interactive exploration.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Gather context from the codebase and (optionally) the web, then propose multiple ways to move forward with tradeoffs, relative impact, and effort. Use when user wants to explore options, weigh approaches, or asks "what are my options" / "how should I tackle this" before committing to a plan.
Propose a concrete plan to cut a branch and implement a change as one or more atomic commits, grounded in the current codebase and (optionally) outside research. Use when user wants a step-by-step implementation plan, asks "propose a plan" / "how would you implement this", or is ready to move from discussion to execution.
Summarize what shipped over a date range, commit range, or release tag — synthesizes git log, GitHub PRs, and Linear issues into a single markdown brief.
View a Sentry issue by short ID (e.g. PROJECT-123) or URL. Shows details, status, latest event, and tag distribution. Use when user wants to view, check, or look up a Sentry issue, error, or event.
Break a PRD into independently-grabbable GitHub issues using tracer-bullet vertical slices. Use when user wants to convert a PRD to issues, create implementation tickets, or break down a PRD into work items.
Create a PRD through user interview, codebase exploration, and module design, then submit as a GitHub issue. Use when user wants to write a PRD, create a product requirements document, or plan a new feature.
| name | html-artifact |
| description | Generate a single-file HTML artifact (status report, slide deck, prototype, throwaway editor, flowchart, etc.) and open it in the browser. Use when the user wants a one-off visual artifact instead of markdown — for sharing, reference, or interactive exploration. |
| when_to_use | Trigger phrases include "make a status report", "draft a slide deck", "build a throwaway editor for X", "visualize Y as HTML", "design system snapshot", "PR writeup". Anything one-off that benefits from layout, color, or interaction beyond what markdown provides. |
| argument-hint | <what the artifact should show> |
| allowed-tools | Bash(open *) Bash(mkdir -p *) |
Generate a single self-contained HTML file for the user's stated purpose, save it to ~/claude-html/, and open it in the default browser.
~/claude-html/$(date +%F)-<slug>.html where <slug> is a short kebab-case summary (e.g. q1-status-report, auth-flow-flowchart).mkdir -p ~/claude-html before writing.open <path> and print the absolute path so the user can scp / share it later.<style> block.style-guide.md).viewport meta + responsive layout.Match the user's request to a pattern in examples.md. If nothing fits, compose from the primitives there. Always prefer an existing pattern over improvising — they are battle-tested and produce coherent results across a folder of artifacts.
If the artifact is interactive (the user is going to edit/configure something), include a "Copy as markdown / Copy as JSON / Copy diff" button that serializes the result to the clipboard. This is the highest-leverage form of an artifact: it does work the chat can't, then exports back to chat.