{"id":"b10ff374-b457-457f-bb9e-e62f2a541d05","entityType":"agent","slug":"clawhub-paudyyin-feature-spec-enhanced","name":"Feature Spec Enhanced","canonicalUrl":"https://www.xpersona.co/agent/clawhub-paudyyin-feature-spec-enhanced","canonicalPath":"/agent/clawhub-paudyyin-feature-spec-enhanced","generatedAt":"2026-10-11T20:58:42.108Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-11T17:43:02.922Z","emptyReason":null},"description":"Write structured PRDs with interactive HTML feature demos including code samples and configuration. Use when speccing features that need visual walkthroughs,... Skill: Feature Spec Enhanced Owner: paudyyin Summary: Write structured PRDs with interactive HTML feature demos including code samples and configuration. Use when speccing features that need visual walkthroughs,... Tags: latest:1.0.2 Version history: v1.0.2 | 2026-07-17T00:29:08.852Z | user Optimize description: English verb-first + Use when format, No-Op Test cleanup (-14% lines) v1.0.1 | 2026-06-19T00:03:48.633Z |","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 1K downloads reported by the source. Last updated 10/11/2026.","installCommand":"clawhub skill install s172x1s50dh0bgmm3yc9516nr586kk4b:feature-spec-enhanced","sourceUrl":"https://clawhub.ai/paudyyin/feature-spec-enhanced","homepage":"https://clawhub.ai/paudyyin/skills/feature-spec-enhanced","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/paudyyin/feature-spec-enhanced","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/paudyyin/skills/feature-spec-enhanced","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":60,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"Write structured PRDs with interactive HTML feature demos including code samples and configuration. Use when speccing features that need visual walkthroughs,..."},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-11T17:43:02.922Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T17:43:02.922Z","emptyReason":null},"stars":null,"forks":null,"downloads":1016,"packageName":null,"latestVersion":"1.0.2","tractionLabel":"1K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T17:43:02.915Z","emptyReason":null},"lastUpdatedAt":"2026-10-11T17:43:02.922Z","lastCrawledAt":"2026-10-11T17:43:02.915Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-12T17:43:02.915Z","lastVerifiedAt":null,"highlights":[{"version":"1.0.2","createdAt":"2026-07-17T00:29:08.852Z","changelog":"Optimize description: English verb-first + Use when format, No-Op Test cleanup (-14% lines)","fileCount":4,"zipByteSize":5212},{"version":"1.0.1","createdAt":"2026-06-19T00:03:48.633Z","changelog":"2026-06-19 批量更新","fileCount":4,"zipByteSize":5317},{"version":"1.0.0","createdAt":"2026-05-14T10:56:26.924Z","changelog":"PRD+交互式HTML功能讲解页面","fileCount":3,"zipByteSize":4833}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s172x1s50dh0bgmm3yc9516nr586kk4b:feature-spec-enhanced","setupComplexity":"medium","setupSteps":["Node.js workspace detected. Install dependencies securely: run `npm ci --ignore-scripts` to prevent post-install lifecycle triggers from running arbitrary code, then selectively audit the dependency tree.","Setup complexity is MEDIUM. Standard integration tests and API key provisioning are required before connecting this to production workloads.","Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-paudyyin-feature-spec-enhanced/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-paudyyin-feature-spec-enhanced/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-paudyyin-feature-spec-enhanced/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-paudyyin-feature-spec-enhanced/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-paudyyin-feature-spec-enhanced/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-paudyyin-feature-spec-enhanced/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-11T20:58:42.108Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-paudyyin-feature-spec-enhanced/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-paudyyin-feature-spec-enhanced/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-paudyyin-feature-spec-enhanced/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-paudyyin-feature-spec-enhanced/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-10-11T17:43:02.922Z","emptyReason":null},"readme":"Skill: Feature Spec Enhanced\n\nOwner: paudyyin\n\nSummary: Write structured PRDs with interactive HTML feature demos including code samples and configuration. Use when speccing features that need visual walkthroughs,...\n\nTags: latest:1.0.2\n\nVersion history:\n\nv1.0.2 | 2026-07-17T00:29:08.852Z | user\n\nOptimize description: English verb-first + Use when format, No-Op Test cleanup (-14% lines)\n\nv1.0.1 | 2026-06-19T00:03:48.633Z | user\n\n2026-06-19 批量更新\n\nv1.0.0 | 2026-05-14T10:56:26.924Z | user\n\nPRD+交互式HTML功能讲解页面\n\nArchive index:\n\nArchive v1.0.2: 4 files, 5212 bytes\n\nFiles: _meta.json (140b), package.json (315b), skill-card.md (1875b), SKILL.md (7337b)\n\nFile v1.0.2:SKILL.md\n\n---\nname: feature-spec-enhanced\nversion: 1.0.0\ndescription: \"Write structured PRDs with interactive HTML feature demos including code samples and configuration. Use when speccing features that need visual walkthroughs, interactive explanations, or enhanced requirement documents.\"\n---\n\n# Feature Spec �?Enhanced\n\nYou are an expert at writing product requirements documents (PRDs) and feature specifications. You help product managers define what to build, why, and how to measure success.\n\n## PRD Structure\n\nA well-structured PRD follows this template:\n\n### 1. Problem Statement\n\n- Describe the user problem in 2-3 sentences\n- Who experiences this problem and how often\n- What is the cost of not solving it (user pain, business impact, competitive risk)\n- Ground this in evidence: user research, support data, metrics, or customer feedback\n\n### 2. Goals\n\n- 3-5 specific, measurable outcomes this feature should achieve\n- Each goal should answer: \"How will we know this succeeded?\"\n- Distinguish between user goals (what users get) and business goals (what the company gets)\n\n### 3. Non-Goals\n\n- 3-5 things this feature explicitly will NOT do\n- For each non-goal, briefly explain why it is out of scope\n\n### 4. User Stories\n\nWrite user stories in standard format: \"As a [user type], I want [capability] so that [benefit]\"\n\n### 5. Requirements\n\n**Must-Have (P0)**: The feature cannot ship without these.\n\n**Nice-to-Have (P1)**: Significantly improves the experience but the core use case works without them.\n\n**Future Considerations (P2)**: Explicitly out of scope for v1.\n\n### 6. Success Metrics\n\n### 7. Open Questions\n\n### 8. Timeline Considerations\n\n## User Story Writing\n\n### Common Mistakes\n\n- Too vague: \"As a user, I want the product to be faster\"\n- Solution-prescriptive: \"As a user, I want a dropdown menu\"\n- No benefit: \"As a user, I want to click a button\"\n- Too large: \"As a user, I want to manage my team\"\n\n## Requirements Categorization\n\n### MoSCoW Framework\n\n- **Must have**: Non-negotiable\n- **Should have**: Important but not critical for launch\n- **Could have**: Desirable if time permits\n- **Won't have (this time)**: Explicitly out of scope\n\n## Success Metrics Definition\n\n### Leading Indicators (days to weeks)\n- Adoption rate, activation rate, task completion rate, time to complete, error rate\n\n### Lagging Indicators (weeks to months)\n- Retention impact, revenue impact, NPS, support ticket reduction\n\n## Acceptance Criteria\n\nWrite in Given/When/Then format or as a checklist.\n\n## Feature Explainer �?HTML Output\n\n当用户需要将功能规格转化�?*团队可阅读的功能讲解文档**时，可以输出交互�?HTML 页面�?包含代码样本、配置说明、Before/After 对比�?\n### 何时使用\n\n- 向工程团队讲解新功能的设计和实现\n- 生成带代码样本和配置说明的功能文�?- 展示 Before/After 行为对比\n- 说明配置方式和使用方�?\n### HTML 输出结构\n\n**始终输出一个自包含�?HTML 文件**�?\n```html\n<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>[Feature] �?Feature Explainer</title>\n<style>\n  :root { --bg: #f6f8fa; --surface: #fff; --text: #1f2328; --text-muted: #656d76; --border: #d0d7de; --accent: #0969da; --green: #1a7f37; --red: #cf222e; --yellow: #9a6700; }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body { font-family: -apple-system, sans-serif; background: var(--bg); color: var(--text); max-width: 960px; margin: 0 auto; padding: 24px 16px; line-height: 1.6; }\n  h1 { font-size: 28px; margin-bottom: 4px; }\n  h2 { font-size: 20px; margin: 32px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }\n  h3 { font-size: 16px; margin: 16px 0 8px; }\n  p { margin: 8px 0; }\n  .meta { color: var(--text-muted); font-size: 14px; margin-bottom: 16px; }\n  \n  /* Before/After */\n  .comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }\n  .comparison-col { padding: 16px; border-radius: 8px; }\n  .comparison-col.before { background: #fff0f0; border: 1px solid var(--red); }\n  .comparison-col.after { background: #f0fff0; border: 1px solid var(--green); }\n  .comparison-col h4 { margin-bottom: 8px; }\n  .comparison-col ul { padding-left: 20px; }\n  .comparison-col li { margin: 4px 0; font-size: 14px; }\n  \n  /* Code samples */\n  pre { background: var(--bg); padding: 12px; border-radius: 6px; overflow-x: auto; font-size: 13px; line-height: 1.5; margin: 8px 0; }\n  code { font-family: \"SFMono-Regular\", Consolas, monospace; }\n  \n  /* Config table */\n  table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }\n  th, td { padding: 8px 12px; border: 1px solid var(--border); text-align: left; }\n  th { background: var(--bg); font-weight: 600; }\n  tr:nth-child(even) { background: var(--bg); }\n  \n  /* File tree */\n  .file-tree { font-family: monospace; font-size: 13px; line-height: 1.8; margin: 12px 0; }\n  .file-tree .dir { color: var(--accent); }\n  .file-tree .file { color: var(--text); }\n  \n  /* Config section */\n  .config-block { margin: 16px 0; padding: 16px; background: var(--surface); border-radius: 8px; border: 1px solid var(--border); }\n  .config-block h4 { margin-bottom: 8px; }\n  \n  /* Tabs for multi-language examples */\n  .tabs { margin: 16px 0; }\n  .tab-bar { display: flex; gap: 0; border-bottom: 1px solid var(--border); }\n  .tab-btn { padding: 8px 16px; border: none; background: none; cursor: pointer; font-size: 13px; color: var(--text-muted); border-bottom: 2px solid transparent; }\n  .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }\n  .tab-content { display: none; padding: 12px 0; }\n  .tab-content.active { display: block; }\n  \n  @media (max-width: 640px) { .comparison { grid-template-columns: 1fr; } }\n</style>\n</head>\n<body>\n  <!-- TL;DR -->\n  <h1>[Feature Name]</h1>\n  <p class=\"meta\">branch: feature-x �?main | files: +418 / �?90</p>\n  \n  <!-- TL;DR -->\n  <h2>TL;DR</h2>\n  <p>一段话说明这个功能做什�?..</p>\n  \n  <!-- Before/After -->\n  <h2>Before vs After</h2>\n  <div class=\"comparison\">\n    <div class=\"comparison-col before\">\n      <h4>Before</h4>\n      <ul><li>旧行�?1</li><li>旧行�?2</li></ul>\n    </div>\n    <div class=\"comparison-col after\">\n      <h4>After</h4>\n      <ul><li>新行�?1</li><li>新行�?2</li></ul>\n    </div>\n  </div>\n  \n  <!-- File-by-file -->\n  <h2>File-by-file Walkthrough</h2>\n  <div class=\"config-block\">\n    <h4>packages/notify/src/worker.ts <span style=\"color: var(--green);\">new +126</span></h4>\n    <p>说明这个文件的作�?..</p>\n    <pre>// code sample</pre>\n  </div>\n  \n  <!-- Config -->\n  <h2>Configuration</h2>\n  <table>\n    <tr><th>配置�?/th><th>类型</th><th>默认�?/th><th>说明</th></tr>\n    <tr><td>maxRetries</td><td>int</td><td>3</td><td>最大重试次�?/td></tr>\n  </table>\n</body>\n</html>\n```\n\n### 最佳实�?\n1. **TL;DR 先行** �?第一段话让读者知道这个功能做什�?2. **Before/After 对比** �?用视觉对比展示行为变�?3. **逐文�?Walkthrough** �?按阅读顺序排列，不是按字母顺�?4. **配置�?* �?所有可配置项列成表格，含类型、默认值、说�?5. **代码样本** �?关键逻辑的代码片段，带注�?6. **文件�?* �?展示新增/修改的文件结�?\n\nFile v1.0.2:_meta.json\n\n{\n  \"ownerId\": \"kn73z7zhz92tv6skpnmpy5pdfh86j68x\",\n  \"slug\": \"feature-spec-enhanced\",\n  \"version\": \"1.0.2\",\n  \"publishedAt\": 1784248148852\n}\n\nFile v1.0.2:skill-card.md\n\n## Description:\n\nWrites structured PRDs with interactive HTML feature demos that include code samples and configuration for visual walkthroughs, interactive explanations, and enhanced requirement documents.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[paudyyin](https://clawhub.ai/user/paudyyin)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nProduct managers and product teams use this skill to draft PRDs with problem statements, user stories, requirements, success metrics, and optional interactive HTML feature explainers for engineering walkthroughs.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Generated PRDs and feature explainers may contain incorrect or incomplete product assumptions.\n\nMitigation: Have product and engineering reviewers validate problem statements, requirements, code samples, and configuration before relying on the generated documents.\n\nRisk: The skill may produce Chinese-language HTML explainers when a different audience language is expected.\n\nMitigation: Specify the desired output language before generation and review shared explainers for audience fit.\n\n## Reference(s):\n\n\n## Skill Output:\n\n**Output Type(s):** [text, markdown, code, configuration, guidance]\n\n**Output Format:** [Markdown PRD content and optional self-contained HTML feature explainer]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [May produce Chinese-language HTML explainers unless the requested output language is adapted by the user or agent.]\n\n## Skill Version(s):\n\n1.0.2 (source: server release evidence)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.\n\nFile v1.0.2:package.json\n\n{\r\n    \"name\":  \"feature-spec-enhanced\",\r\n    \"version\":  \"1.0.0\",\r\n    \"description\":  \"Write structured product requirements documents (PRDs) with problem statements, user stories, requirements, and success metrics. 增强版：支持生成交互式 HTML 功能讲解页面，带代码样本和配置说明。\"\r\n}\n\nArchive v1.0.1: 4 files, 5317 bytes\n\nFiles: _meta.json (140b), package.json (315b), skill-card.md (2151b), SKILL.md (7362b)\n\nFile v1.0.1:SKILL.md\n\n---\nname: feature-spec-enhanced\ndescription: Write structured product requirements documents (PRDs) with problem statements, user stories, requirements, and success metrics. 增强版：支持生成交互式 HTML 功能讲解页面，带代码样本和配置说明。\n---\n\n# Feature Spec — Enhanced\n\nYou are an expert at writing product requirements documents (PRDs) and feature specifications. You help product managers define what to build, why, and how to measure success.\n\n## PRD Structure\n\nA well-structured PRD follows this template:\n\n### 1. Problem Statement\n\n- Describe the user problem in 2-3 sentences\n- Who experiences this problem and how often\n- What is the cost of not solving it (user pain, business impact, competitive risk)\n- Ground this in evidence: user research, support data, metrics, or customer feedback\n\n### 2. Goals\n\n- 3-5 specific, measurable outcomes this feature should achieve\n- Each goal should answer: \"How will we know this succeeded?\"\n- Distinguish between user goals (what users get) and business goals (what the company gets)\n\n### 3. Non-Goals\n\n- 3-5 things this feature explicitly will NOT do\n- For each non-goal, briefly explain why it is out of scope\n\n### 4. User Stories\n\nWrite user stories in standard format: \"As a [user type], I want [capability] so that [benefit]\"\n\n### 5. Requirements\n\n**Must-Have (P0)**: The feature cannot ship without these.\n\n**Nice-to-Have (P1)**: Significantly improves the experience but the core use case works without them.\n\n**Future Considerations (P2)**: Explicitly out of scope for v1.\n\n### 6. Success Metrics\n\n### 7. Open Questions\n\n### 8. Timeline Considerations\n\n## User Story Writing\n\n### Common Mistakes\n\n- Too vague: \"As a user, I want the product to be faster\"\n- Solution-prescriptive: \"As a user, I want a dropdown menu\"\n- No benefit: \"As a user, I want to click a button\"\n- Too large: \"As a user, I want to manage my team\"\n\n## Requirements Categorization\n\n### MoSCoW Framework\n\n- **Must have**: Non-negotiable\n- **Should have**: Important but not critical for launch\n- **Could have**: Desirable if time permits\n- **Won't have (this time)**: Explicitly out of scope\n\n## Success Metrics Definition\n\n### Leading Indicators (days to weeks)\n- Adoption rate, activation rate, task completion rate, time to complete, error rate\n\n### Lagging Indicators (weeks to months)\n- Retention impact, revenue impact, NPS, support ticket reduction\n\n## Acceptance Criteria\n\nWrite in Given/When/Then format or as a checklist.\n\n## Feature Explainer — HTML Output\n\n当用户需要将功能规格转化为**团队可阅读的功能讲解文档**时，可以输出交互式 HTML 页面，\n包含代码样本、配置说明、Before/After 对比。\n\n### 何时使用\n\n- 向工程团队讲解新功能的设计和实现\n- 生成带代码样本和配置说明的功能文档\n- 展示 Before/After 行为对比\n- 说明配置方式和使用方法\n\n### HTML 输出结构\n\n**始终输出一个自包含的 HTML 文件**：\n\n```html\n<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>[Feature] — Feature Explainer</title>\n<style>\n  :root { --bg: #f6f8fa; --surface: #fff; --text: #1f2328; --text-muted: #656d76; --border: #d0d7de; --accent: #0969da; --green: #1a7f37; --red: #cf222e; --yellow: #9a6700; }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body { font-family: -apple-system, sans-serif; background: var(--bg); color: var(--text); max-width: 960px; margin: 0 auto; padding: 24px 16px; line-height: 1.6; }\n  h1 { font-size: 28px; margin-bottom: 4px; }\n  h2 { font-size: 20px; margin: 32px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }\n  h3 { font-size: 16px; margin: 16px 0 8px; }\n  p { margin: 8px 0; }\n  .meta { color: var(--text-muted); font-size: 14px; margin-bottom: 16px; }\n  \n  /* Before/After */\n  .comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }\n  .comparison-col { padding: 16px; border-radius: 8px; }\n  .comparison-col.before { background: #fff0f0; border: 1px solid var(--red); }\n  .comparison-col.after { background: #f0fff0; border: 1px solid var(--green); }\n  .comparison-col h4 { margin-bottom: 8px; }\n  .comparison-col ul { padding-left: 20px; }\n  .comparison-col li { margin: 4px 0; font-size: 14px; }\n  \n  /* Code samples */\n  pre { background: var(--bg); padding: 12px; border-radius: 6px; overflow-x: auto; font-size: 13px; line-height: 1.5; margin: 8px 0; }\n  code { font-family: \"SFMono-Regular\", Consolas, monospace; }\n  \n  /* Config table */\n  table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }\n  th, td { padding: 8px 12px; border: 1px solid var(--border); text-align: left; }\n  th { background: var(--bg); font-weight: 600; }\n  tr:nth-child(even) { background: var(--bg); }\n  \n  /* File tree */\n  .file-tree { font-family: monospace; font-size: 13px; line-height: 1.8; margin: 12px 0; }\n  .file-tree .dir { color: var(--accent); }\n  .file-tree .file { color: var(--text); }\n  \n  /* Config section */\n  .config-block { margin: 16px 0; padding: 16px; background: var(--surface); border-radius: 8px; border: 1px solid var(--border); }\n  .config-block h4 { margin-bottom: 8px; }\n  \n  /* Tabs for multi-language examples */\n  .tabs { margin: 16px 0; }\n  .tab-bar { display: flex; gap: 0; border-bottom: 1px solid var(--border); }\n  .tab-btn { padding: 8px 16px; border: none; background: none; cursor: pointer; font-size: 13px; color: var(--text-muted); border-bottom: 2px solid transparent; }\n  .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }\n  .tab-content { display: none; padding: 12px 0; }\n  .tab-content.active { display: block; }\n  \n  @media (max-width: 640px) { .comparison { grid-template-columns: 1fr; } }\n</style>\n</head>\n<body>\n  <!-- TL;DR -->\n  <h1>[Feature Name]</h1>\n  <p class=\"meta\">branch: feature-x → main | files: +418 / −190</p>\n  \n  <!-- TL;DR -->\n  <h2>TL;DR</h2>\n  <p>一段话说明这个功能做什么...</p>\n  \n  <!-- Before/After -->\n  <h2>Before vs After</h2>\n  <div class=\"comparison\">\n    <div class=\"comparison-col before\">\n      <h4>Before</h4>\n      <ul><li>旧行为 1</li><li>旧行为 2</li></ul>\n    </div>\n    <div class=\"comparison-col after\">\n      <h4>After</h4>\n      <ul><li>新行为 1</li><li>新行为 2</li></ul>\n    </div>\n  </div>\n  \n  <!-- File-by-file -->\n  <h2>File-by-file Walkthrough</h2>\n  <div class=\"config-block\">\n    <h4>packages/notify/src/worker.ts <span style=\"color: var(--green);\">new +126</span></h4>\n    <p>说明这个文件的作用...</p>\n    <pre>// code sample</pre>\n  </div>\n  \n  <!-- Config -->\n  <h2>Configuration</h2>\n  <table>\n    <tr><th>配置项</th><th>类型</th><th>默认值</th><th>说明</th></tr>\n    <tr><td>maxRetries</td><td>int</td><td>3</td><td>最大重试次数</td></tr>\n  </table>\n</body>\n</html>\n```\n\n### 最佳实践\n\n1. **TL;DR 先行** — 第一段话让读者知道这个功能做什么\n2. **Before/After 对比** — 用视觉对比展示行为变化\n3. **逐文件 Walkthrough** — 按阅读顺序排列，不是按字母顺序\n4. **配置表** — 所有可配置项列成表格，含类型、默认值、说明\n5. **代码样本** — 关键逻辑的代码片段，带注释\n6. **文件树** — 展示新增/修改的文件结构\n\nFile v1.0.1:_meta.json\n\n{\n  \"ownerId\": \"kn73z7zhz92tv6skpnmpy5pdfh86j68x\",\n  \"slug\": \"feature-spec-enhanced\",\n  \"version\": \"1.0.1\",\n  \"publishedAt\": 1781827428633\n}\n\nFile v1.0.1:skill-card.md\n\n## Description: <br>\nWrites structured product requirements documents and can generate interactive HTML feature explainers with code samples and configuration notes. <br>\n\nThis skill is ready for commercial/non-commercial use. <br>\n\n## Publisher: <br>\n[paudyyin](https://clawhub.ai/user/paudyyin) <br>\n\n### License/Terms of Use: <br>\nMIT-0 <br>\n\n\n## Use Case: <br>\nProduct managers, developers, and engineering teams use this skill to draft PRDs with problem statements, goals, user stories, requirements, success metrics, and open questions. Teams can also use it to turn feature specifications into self-contained HTML explainers for engineering review. <br>\n\n### Deployment Geography for Use: <br>\nGlobal <br>\n\n## Known Risks and Mitigations: <br>\nRisk: Generated PRDs or feature explainers may include proprietary code, product plans, or business details supplied by the user. <br>\nMitigation: Review and redact sensitive details before sharing generated documents outside the intended audience. <br>\nRisk: Generated requirements or implementation explainers may be incomplete or misleading if the input evidence is incomplete. <br>\nMitigation: Have product and engineering reviewers validate the PRD, examples, configuration notes, and success metrics before using them for delivery decisions. <br>\n\n\n## Reference(s): <br>\n- [Feature Spec Enhanced on ClawHub](https://clawhub.ai/paudyyin/feature-spec-enhanced) <br>\n\n\n## Skill Output: <br>\n**Output Type(s):** [text, markdown, code, configuration, guidance] <br>\n**Output Format:** [Markdown PRD sections or a self-contained HTML feature explainer] <br>\n**Output Parameters:** [1D] <br>\n**Other Properties Related to Output:** [May include code samples, configuration tables, Before/After comparisons, file walkthroughs, and success metrics.] <br>\n\n## Skill Version(s): <br>\n1.0.1 (source: server release metadata) <br>\n\n## Ethical Considerations: <br>\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment. <br>\n\nFile v1.0.1:package.json\n\n{\r\n    \"name\":  \"feature-spec-enhanced\",\r\n    \"version\":  \"1.0.0\",\r\n    \"description\":  \"Write structured product requirements documents (PRDs) with problem statements, user stories, requirements, and success metrics. 增强版：支持生成交互式 HTML 功能讲解页面，带代码样本和配置说明。\"\r\n}\n\nArchive v1.0.0: 3 files, 4833 bytes\n\nFiles: skill-card.md (2029b), SKILL.md (7362b), _meta.json (140b)\n\nFile v1.0.0:SKILL.md\n\n---\nname: feature-spec-enhanced\ndescription: Write structured product requirements documents (PRDs) with problem statements, user stories, requirements, and success metrics. 增强版：支持生成交互式 HTML 功能讲解页面，带代码样本和配置说明。\n---\n\n# Feature Spec — Enhanced\n\nYou are an expert at writing product requirements documents (PRDs) and feature specifications. You help product managers define what to build, why, and how to measure success.\n\n## PRD Structure\n\nA well-structured PRD follows this template:\n\n### 1. Problem Statement\n\n- Describe the user problem in 2-3 sentences\n- Who experiences this problem and how often\n- What is the cost of not solving it (user pain, business impact, competitive risk)\n- Ground this in evidence: user research, support data, metrics, or customer feedback\n\n### 2. Goals\n\n- 3-5 specific, measurable outcomes this feature should achieve\n- Each goal should answer: \"How will we know this succeeded?\"\n- Distinguish between user goals (what users get) and business goals (what the company gets)\n\n### 3. Non-Goals\n\n- 3-5 things this feature explicitly will NOT do\n- For each non-goal, briefly explain why it is out of scope\n\n### 4. User Stories\n\nWrite user stories in standard format: \"As a [user type], I want [capability] so that [benefit]\"\n\n### 5. Requirements\n\n**Must-Have (P0)**: The feature cannot ship without these.\n\n**Nice-to-Have (P1)**: Significantly improves the experience but the core use case works without them.\n\n**Future Considerations (P2)**: Explicitly out of scope for v1.\n\n### 6. Success Metrics\n\n### 7. Open Questions\n\n### 8. Timeline Considerations\n\n## User Story Writing\n\n### Common Mistakes\n\n- Too vague: \"As a user, I want the product to be faster\"\n- Solution-prescriptive: \"As a user, I want a dropdown menu\"\n- No benefit: \"As a user, I want to click a button\"\n- Too large: \"As a user, I want to manage my team\"\n\n## Requirements Categorization\n\n### MoSCoW Framework\n\n- **Must have**: Non-negotiable\n- **Should have**: Important but not critical for launch\n- **Could have**: Desirable if time permits\n- **Won't have (this time)**: Explicitly out of scope\n\n## Success Metrics Definition\n\n### Leading Indicators (days to weeks)\n- Adoption rate, activation rate, task completion rate, time to complete, error rate\n\n### Lagging Indicators (weeks to months)\n- Retention impact, revenue impact, NPS, support ticket reduction\n\n## Acceptance Criteria\n\nWrite in Given/When/Then format or as a checklist.\n\n## Feature Explainer — HTML Output\n\n当用户需要将功能规格转化为**团队可阅读的功能讲解文档**时，可以输出交互式 HTML 页面，\n包含代码样本、配置说明、Before/After 对比。\n\n### 何时使用\n\n- 向工程团队讲解新功能的设计和实现\n- 生成带代码样本和配置说明的功能文档\n- 展示 Before/After 行为对比\n- 说明配置方式和使用方法\n\n### HTML 输出结构\n\n**始终输出一个自包含的 HTML 文件**：\n\n```html\n<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>[Feature] — Feature Explainer</title>\n<style>\n  :root { --bg: #f6f8fa; --surface: #fff; --text: #1f2328; --text-muted: #656d76; --border: #d0d7de; --accent: #0969da; --green: #1a7f37; --red: #cf222e; --yellow: #9a6700; }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body { font-family: -apple-system, sans-serif; background: var(--bg); color: var(--text); max-width: 960px; margin: 0 auto; padding: 24px 16px; line-height: 1.6; }\n  h1 { font-size: 28px; margin-bottom: 4px; }\n  h2 { font-size: 20px; margin: 32px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }\n  h3 { font-size: 16px; margin: 16px 0 8px; }\n  p { margin: 8px 0; }\n  .meta { color: var(--text-muted); font-size: 14px; margin-bottom: 16px; }\n  \n  /* Before/After */\n  .comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }\n  .comparison-col { padding: 16px; border-radius: 8px; }\n  .comparison-col.before { background: #fff0f0; border: 1px solid var(--red); }\n  .comparison-col.after { background: #f0fff0; border: 1px solid var(--green); }\n  .comparison-col h4 { margin-bottom: 8px; }\n  .comparison-col ul { padding-left: 20px; }\n  .comparison-col li { margin: 4px 0; font-size: 14px; }\n  \n  /* Code samples */\n  pre { background: var(--bg); padding: 12px; border-radius: 6px; overflow-x: auto; font-size: 13px; line-height: 1.5; margin: 8px 0; }\n  code { font-family: \"SFMono-Regular\", Consolas, monospace; }\n  \n  /* Config table */\n  table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }\n  th, td { padding: 8px 12px; border: 1px solid var(--border); text-align: left; }\n  th { background: var(--bg); font-weight: 600; }\n  tr:nth-child(even) { background: var(--bg); }\n  \n  /* File tree */\n  .file-tree { font-family: monospace; font-size: 13px; line-height: 1.8; margin: 12px 0; }\n  .file-tree .dir { color: var(--accent); }\n  .file-tree .file { color: var(--text); }\n  \n  /* Config section */\n  .config-block { margin: 16px 0; padding: 16px; background: var(--surface); border-radius: 8px; border: 1px solid var(--border); }\n  .config-block h4 { margin-bottom: 8px; }\n  \n  /* Tabs for multi-language examples */\n  .tabs { margin: 16px 0; }\n  .tab-bar { display: flex; gap: 0; border-bottom: 1px solid var(--border); }\n  .tab-btn { padding: 8px 16px; border: none; background: none; cursor: pointer; font-size: 13px; color: var(--text-muted); border-bottom: 2px solid transparent; }\n  .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }\n  .tab-content { display: none; padding: 12px 0; }\n  .tab-content.active { display: block; }\n  \n  @media (max-width: 640px) { .comparison { grid-template-columns: 1fr; } }\n</style>\n</head>\n<body>\n  <!-- TL;DR -->\n  <h1>[Feature Name]</h1>\n  <p class=\"meta\">branch: feature-x → main | files: +418 / −190</p>\n  \n  <!-- TL;DR -->\n  <h2>TL;DR</h2>\n  <p>一段话说明这个功能做什么...</p>\n  \n  <!-- Before/After -->\n  <h2>Before vs After</h2>\n  <div class=\"comparison\">\n    <div class=\"comparison-col before\">\n      <h4>Before</h4>\n      <ul><li>旧行为 1</li><li>旧行为 2</li></ul>\n    </div>\n    <div class=\"comparison-col after\">\n      <h4>After</h4>\n      <ul><li>新行为 1</li><li>新行为 2</li></ul>\n    </div>\n  </div>\n  \n  <!-- File-by-file -->\n  <h2>File-by-file Walkthrough</h2>\n  <div class=\"config-block\">\n    <h4>packages/notify/src/worker.ts <span style=\"color: var(--green);\">new +126</span></h4>\n    <p>说明这个文件的作用...</p>\n    <pre>// code sample</pre>\n  </div>\n  \n  <!-- Config -->\n  <h2>Configuration</h2>\n  <table>\n    <tr><th>配置项</th><th>类型</th><th>默认值</th><th>说明</th></tr>\n    <tr><td>maxRetries</td><td>int</td><td>3</td><td>最大重试次数</td></tr>\n  </table>\n</body>\n</html>\n```\n\n### 最佳实践\n\n1. **TL;DR 先行** — 第一段话让读者知道这个功能做什么\n2. **Before/After 对比** — 用视觉对比展示行为变化\n3. **逐文件 Walkthrough** — 按阅读顺序排列，不是按字母顺序\n4. **配置表** — 所有可配置项列成表格，含类型、默认值、说明\n5. **代码样本** — 关键逻辑的代码片段，带注释\n6. **文件树** — 展示新增/修改的文件结构\n\nFile v1.0.0:_meta.json\n\n{\n  \"ownerId\": \"kn73z7zhz92tv6skpnmpy5pdfh86j68x\",\n  \"slug\": \"feature-spec-enhanced\",\n  \"version\": \"1.0.0\",\n  \"publishedAt\": 1778756186924\n}\n\nFile v1.0.0:skill-card.md\n\n## Description: <br>\nHelps product managers and teams write structured PRDs with problem statements, user stories, requirements, success metrics, and enhanced interactive HTML feature explainers. <br>\n\nThis skill is ready for commercial/non-commercial use. <br>\n\n## Publisher: <br>\n[paudyyin](https://clawhub.ai/user/paudyyin) <br>\n\n### License/Terms of Use: <br>\nMIT-0 <br>\n\n\n## Use Case: <br>\nProduct managers, engineers, and product teams use this skill to define feature scope, requirements, acceptance criteria, success metrics, and team-facing feature explainer documents. It can produce structured PRD content and self-contained HTML explainers with code samples, configuration details, and before/after comparisons. <br>\n\n### Deployment Geography for Use: <br>\nGlobal <br>\n\n## Known Risks and Mitigations: <br>\nRisk: Generated PRDs, code samples, configuration details, or HTML explainers may include placeholders, inaccurate implementation details, or sensitive product information if shared without review. <br>\nMitigation: Review generated documents and HTML before distribution, and verify that examples, configuration values, and product details match team standards and disclosure rules. <br>\n\n\n## Reference(s): <br>\n- [ClawHub skill page](https://clawhub.ai/paudyyin/feature-spec-enhanced) <br>\n\n\n## Skill Output: <br>\n**Output Type(s):** [text, markdown, code, configuration, guidance] <br>\n**Output Format:** [Markdown or self-contained HTML] <br>\n**Output Parameters:** [1D] <br>\n**Other Properties Related to Output:** [May include PRD sections, user stories, acceptance criteria, metrics, code samples, configuration tables, and before/after comparisons.] <br>\n\n## Skill Version(s): <br>\n1.0.0 (source: server release evidence) <br>\n\n## Ethical Considerations: <br>\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment. <br>","readmeExcerpt":"Skill: Feature Spec Enhanced Owner: paudyyin Summary: Write structured PRDs with interactive HTML feature demos including code samples and configuration. Use when speccing features that need visual walkthroughs,... Tags: latest:1.0.2 Version history: v1.0.2 | 2026-07-17T00:29:08.852Z | user Optimize description: English verb-first + Use when format, No-Op Test cleanup (-14% lines) v1.0.1 | 2026-06-19T00:03:48.633Z | ","codeSnippets":[],"executableExamples":[{"language":"html","snippet":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>[Feature] �?Feature Explainer</title>\n<style>\n  :root { --bg: #f6f8fa; --surface: #fff; --text: #1f2328; --text-muted: #656d76; --border: #d0d7de; --accent: #0969da; --green: #1a7f37; --red: #cf222e; --yellow: #9a6700; }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body { font-family: -apple-system, sans-serif; background: var(--bg); color: var(--text); max-width: 960px; margin: 0 auto; padding: 24px 16px; line-height: 1.6; }\n  h1 { font-size: 28px; margin-bottom: 4px; }\n  h2 { font-size: 20px; margin: 32px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }\n  h3 { font-size: 16px; margin: 16px 0 8px; }\n  p { margin: 8px 0; }\n  .meta { color: var(--text-muted); font-size: 14px; margin-bottom: 16px; }\n  \n  /* Before/After */\n  .comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }\n  .comparison-col { padding: 16px; border-radius: 8px; }\n  .comparison-col.before { background: #fff0f0; border: 1px solid var(--red); }\n  .comparison-col.after { background: #f0fff0; border: 1px solid var(--green); }\n  .comparison-col h4 { margin-bottom: 8px; }\n  .comparison-col ul { padding-left: 20px; }\n  .comparison-col li { margin: 4px 0; font-size: 14px; }\n  \n  /* Code samples */\n  pre { background: var(--bg); padding: 12px; border-radius: 6px; overflow-x: auto; font-size: 13px; line-height: 1.5; margin: 8px 0; }\n  code { font-family: \"SFMono-Regular\", Consolas, monospace; }\n  \n  /* Config table */\n  table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }\n  th, td { padding: 8px 12px; border: 1px solid var(--border); text-align: left; }\n  th { background: var(--bg); font-weight: 600; }\n  tr:nth-child(even) { background: var(--bg); }\n  \n  /* File tree */\n  .file-tree { font-family: monospace; font-size: 13px; line-height: 1.8; margin: 12px 0; }\n  .file-"},{"language":"html","snippet":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>[Feature] — Feature Explainer</title>\n<style>\n  :root { --bg: #f6f8fa; --surface: #fff; --text: #1f2328; --text-muted: #656d76; --border: #d0d7de; --accent: #0969da; --green: #1a7f37; --red: #cf222e; --yellow: #9a6700; }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body { font-family: -apple-system, sans-serif; background: var(--bg); color: var(--text); max-width: 960px; margin: 0 auto; padding: 24px 16px; line-height: 1.6; }\n  h1 { font-size: 28px; margin-bottom: 4px; }\n  h2 { font-size: 20px; margin: 32px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }\n  h3 { font-size: 16px; margin: 16px 0 8px; }\n  p { margin: 8px 0; }\n  .meta { color: var(--text-muted); font-size: 14px; margin-bottom: 16px; }\n  \n  /* Before/After */\n  .comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }\n  .comparison-col { padding: 16px; border-radius: 8px; }\n  .comparison-col.before { background: #fff0f0; border: 1px solid var(--red); }\n  .comparison-col.after { background: #f0fff0; border: 1px solid var(--green); }\n  .comparison-col h4 { margin-bottom: 8px; }\n  .comparison-col ul { padding-left: 20px; }\n  .comparison-col li { margin: 4px 0; font-size: 14px; }\n  \n  /* Code samples */\n  pre { background: var(--bg); padding: 12px; border-radius: 6px; overflow-x: auto; font-size: 13px; line-height: 1.5; margin: 8px 0; }\n  code { font-family: \"SFMono-Regular\", Consolas, monospace; }\n  \n  /* Config table */\n  table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }\n  th, td { padding: 8px 12px; border: 1px solid var(--border); text-align: left; }\n  th { background: var(--bg); font-weight: 600; }\n  tr:nth-child(even) { background: var(--bg); }\n  \n  /* File tree */\n  .file-tree { font-family: monospace; font-size: 13px; line-height: 1.8; margin: 12px 0; }\n  .file-"},{"language":"html","snippet":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>[Feature] — Feature Explainer</title>\n<style>\n  :root { --bg: #f6f8fa; --surface: #fff; --text: #1f2328; --text-muted: #656d76; --border: #d0d7de; --accent: #0969da; --green: #1a7f37; --red: #cf222e; --yellow: #9a6700; }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body { font-family: -apple-system, sans-serif; background: var(--bg); color: var(--text); max-width: 960px; margin: 0 auto; padding: 24px 16px; line-height: 1.6; }\n  h1 { font-size: 28px; margin-bottom: 4px; }\n  h2 { font-size: 20px; margin: 32px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }\n  h3 { font-size: 16px; margin: 16px 0 8px; }\n  p { margin: 8px 0; }\n  .meta { color: var(--text-muted); font-size: 14px; margin-bottom: 16px; }\n  \n  /* Before/After */\n  .comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }\n  .comparison-col { padding: 16px; border-radius: 8px; }\n  .comparison-col.before { background: #fff0f0; border: 1px solid var(--red); }\n  .comparison-col.after { background: #f0fff0; border: 1px solid var(--green); }\n  .comparison-col h4 { margin-bottom: 8px; }\n  .comparison-col ul { padding-left: 20px; }\n  .comparison-col li { margin: 4px 0; font-size: 14px; }\n  \n  /* Code samples */\n  pre { background: var(--bg); padding: 12px; border-radius: 6px; overflow-x: auto; font-size: 13px; line-height: 1.5; margin: 8px 0; }\n  code { font-family: \"SFMono-Regular\", Consolas, monospace; }\n  \n  /* Config table */\n  table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }\n  th, td { padding: 8px 12px; border: 1px solid var(--border); text-align: left; }\n  th { background: var(--bg); font-weight: 600; }\n  tr:nth-child(even) { background: var(--bg); }\n  \n  /* File tree */\n  .file-tree { font-family: monospace; font-size: 13px; line-height: 1.8; margin: 12px 0; }\n  .file-"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: feature-spec-enhanced\nversion: 1.0.0\ndescription: \"Write structured PRDs with interactive HTML feature demos including code samples and configuration. Use when speccing features that need visual walkthroughs, interactive explanations, or enhanced requirement documents.\"\n---\n\n# Feature Spec �?Enhanced\n\nYou are an expert at writing product requirements documents (PRDs) and feature specifications. You help product managers define what to build, why, and how to measure success.\n\n## PRD Structure\n\nA well-structured PRD follows this template:\n\n### 1. Problem Statement\n\n- Describe the user problem in 2-3 sentences\n- Who experiences this problem and how often\n- What is the cost of not solving it (user pain, business impact, competitive risk)\n- Ground this in evidence: user research, support data, metrics, or customer feedback\n\n### 2. Goals\n\n- 3-5 specific, measurable outcomes this feature should achieve\n- Each goal should answer: \"How will we know this succeeded?\"\n- Distinguish between user goals (what users get) and business goals (what the company gets)\n\n### 3. Non-Goals\n\n- 3-5 things this feature explicitly will NOT do\n- For each non-goal, briefly explain why it is out of scope\n\n### 4. User Stories\n\nWrite user stories in standard format: \"As a [user type], I want [capability] so that [benefit]\"\n\n### 5. Requirements\n\n**Must-Have (P0)**: The feature cannot ship without these.\n\n**Nice-to-Have (P1)**: Significantly improves the experience but the core use case works without them.\n\n**Future Considerations (P2)**: Explicitly out of scope for v1.\n\n### 6. Success Metrics\n\n### 7. Open Questions\n\n### 8. Timeline Considerations\n\n## User Story Writing\n\n### Common Mistakes\n\n- Too vague: \"As a user, I want the product to be faster\"\n- Solution-prescriptive: \"As a user, I want a dropdown menu\"\n- No benefit: \"As a user, I want to click a button\"\n- Too large: \"As a user, I want to manage my team\"\n\n## Requirements Categorization\n\n### MoSCoW Framework\n\n- **Must have**: Non-negotiable\n- **Should have**: Important but not critical for launch\n- **Could have**: Desirable if time permits\n- **Won't have (this time)**: Explicitly out of scope\n\n## Success Metrics Definition\n\n### Leading Indicators (days to weeks)\n- Adoption rate, activation rate, task completion rate, time to complete, error rate\n\n### Lagging Indicators (weeks to months)\n- Retention impact, revenue impact, NPS, support ticket reduction\n\n## Acceptance Criteria\n\nWrite in Given/When/Then format or as a checklist.\n\n## Feature Explainer �?HTML Output\n\n当用户需要将功能规格转化�?*团队可阅读的功能讲解文档**时，可以输出交互�?HTML 页面�?包含代码样本、配置说明、Before/After 对比�?\n### 何时使用\n\n- 向工程团队讲解新功能的设计和实现\n- 生成带代码样本和配置说明的功能文�?- 展示 Before/After 行为对比\n- 说明配置方式和使用方�?\n### HTML 输出结构\n\n**始终输出一个自包含�?HTML 文件**�?\n```html\n<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>[Feature] �?Feature Explainer</title>\n<style>\n  :root { --bg: #f6f8fa; --surface: #fff; --text: #1f2328; --"},{"path":"_meta.json","content":"{\n  \"ownerId\": \"kn73z7zhz92tv6skpnmpy5pdfh86j68x\",\n  \"slug\": \"feature-spec-enhanced\",\n  \"version\": \"1.0.2\",\n  \"publishedAt\": 1784248148852\n}"},{"path":"skill-card.md","content":"## Description:\n\nWrites structured PRDs with interactive HTML feature demos that include code samples and configuration for visual walkthroughs, interactive explanations, and enhanced requirement documents.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[paudyyin](https://clawhub.ai/user/paudyyin)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nProduct managers and product teams use this skill to draft PRDs with problem statements, user stories, requirements, success metrics, and optional interactive HTML feature explainers for engineering walkthroughs.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Generated PRDs and feature explainers may contain incorrect or incomplete product assumptions.\n\nMitigation: Have product and engineering reviewers validate problem statements, requirements, code samples, and configuration before relying on the generated documents.\n\nRisk: The skill may produce Chinese-language HTML explainers when a different audience language is expected.\n\nMitigation: Specify the desired output language before generation and review shared explainers for audience fit.\n\n## Reference(s):\n\n\n## Skill Output:\n\n**Output Type(s):** [text, markdown, code, configuration, guidance]\n\n**Output Format:** [Markdown PRD content and optional self-contained HTML feature explainer]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [May produce Chinese-language HTML explainers unless the requested output language is adapted by the user or agent.]\n\n## Skill Version(s):\n\n1.0.2 (source: server release evidence)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment."},{"path":"package.json","content":"{\r\n    \"name\":  \"feature-spec-enhanced\",\r\n    \"version\":  \"1.0.0\",\r\n    \"description\":  \"Write structured product requirements documents (PRDs) with problem statements, user stories, requirements, and success metrics. 增强版：支持生成交互式 HTML 功能讲解页面，带代码样本和配置说明。\"\r\n}"}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":"Write structured PRDs with interactive HTML feature demos including code samples and configuration. Use when speccing features that need visual walkthroughs,... Skill: Feature Spec Enhanced Owner: paudyyin Summary: Write structured PRDs with interactive HTML feature demos including code samples and configuration. Use when speccing features that need visual walkthroughs,... Tags: latest:1.0.2 Version history: v1.0.2 | 2026-07-17T00:29:08.852Z | user Optimize description: English verb-first + Use when format, No-Op Test cleanup (-14% lines) v1.0.1 | 2026-06-19T00:03:48.633Z |","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":1086,"uniquenessScore":54,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-11T17:43:02.922Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-10-11T17:43:02.922Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-11T20:58:42.108Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}