菜单
Create a single self-contained HTML file that mocks a feature using inline React and CSS. Use when the user asks to prototype a UI flow, build a mockup, create a shareable demo, or iterate on a feature's look and feel before implementation.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | single-page-mockup |
| kstack | true |
| description | Create a single self-contained HTML file that mocks a feature using inline React and CSS. Use when the user asks to prototype a UI flow, build a mockup, create a shareable demo, or iterate on a feature's look and feel before implementation. |
| disable-model-invocation | true |
Build a single .html file that mocks a feature flow with inline React, CSS, and fixture data. The file is
shareable (email, Slack, repo link) and opens in any browser with no build step.
One file in a scratch/mockups directory (see context.md for project-specific output path). Mockups are ephemeral and should not be committed.
Before writing anything, read the relevant production components to extract:
If a plan or requirements doc exists, use it as the source of truth for scope.
Use this skeleton:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>[Feature] — Mock</title>
<style>
/* :root tokens, layout, component styles — all inline */
</style>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel" data-presets="react">
// All React code here: fixtures, helpers, components, mount
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>
spin, pulse, glow).max-width: 1200px centered, subtle gray page background.<script type="text/babel"> block.const { useState, useCallback, useMemo, useEffect, useRef } = React;const arrays/objects matching the production GraphQL shape.useState for all interactions — no GraphQL, no fetch, no auth.setTimeout to simulate async operations (analysis, saves).window.alert() or a small toast.Every mockup includes:
<h1> with feature name + "Playground", subtitle "Mock flow for product review."Priority order:
Stub anything that would require a backend with window.alert('Would [action]') or an inline toast.
open scratchpad/mockups/<name>.mock.html or double-click).Read context.md and apply it as additional project-specific constraints layered on top of this
workflow. If it does not exist, skip this section.
Validate the branch diff against the task's acceptance criteria before marking it done. Use when implementation looks complete, before a status update to done/awaiting_review, or when the user asks "did we cover everything?"
One-pass AI code review of a PR or branch diff (tech-lead style). Use when the user asks for a code review, PR review, AI review, or wants code quality, architecture, bugs, and patterns reviewed.
Simplify changed code in a PR or branch for readability while preserving behavior. Use when the user asks to simplify code, reduce complexity, clean up a PR, or improve readability of recent changes.
Capture new project-specific learnings into context files. Runs during reviews or after debugging to evolve the project's skill knowledge base. Use when the thread reveals patterns, anti-patterns, conventions, or codebase gotchas that should be remembered.
Debug pipeline: investigate (prod or local) → fix-issues → scoped polish (deslop + code-simplify) → pattern-check → kestral-sync retroactive capture. Only invoked by the kstack subagent.
Capture the decision when a spike, prototype, or investigation concludes. Use when a prototype or spike wraps up, the user makes a go/no-go call after de-risking, or an investigation answers its question — prompts "what did you decide?" and writes the decision + rationale to the task tracker.