[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6MDDTMEDDA826AMAZJDDCT1":3,"skill-same:01M6MDDTMEDDA826AMAZJDDCT1":123},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":34,"publishedAt":58,"linkOnly":59,"markdownContent":60,"markdownBody":61,"frontMatter":62,"refName":77,"commitSha":78,"skillDirectory":79,"forksCount":80,"repositoryHtmlUrl":81,"repositoryHomepageUrl":82,"ownerHtmlUrl":83,"ownerBlogUrl":82,"ownerDescription":84,"updatedAt":85,"install":86,"resources":98},"01M6MDDTMEDDA826AMAZJDDCT1","web-prototype",null,"General-purpose desktop web prototype. Single self-contained HTML file built\nby copying the seed `assets\u002Ftemplate.html` and pasting section layouts from\n`references\u002Flayouts.md`. Default for any landing \u002F marketing \u002F docs \u002F SaaS\npage when no more specific skill matches.","compozy\u002Fcompozy","compozy","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F205107042?v=4","01M6JWVTXX4DX38AWZ7SPFEKEV","CompozyOS","01M6JWVV2P34GM1PDATVB2EV05",2864,"MIT","https:\u002F\u002Fgithub.com\u002Fcompozy\u002Fcompozy\u002Fblob\u002Fmain\u002Fdocs\u002Fdesign\u002Fopendesign\u002F.od-skills\u002Fweb-prototype-b3342e2645\u002FSKILL.md",[18,23,26,29],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000019","营销推广",{"categoryNo":27,"categoryName":28,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":30,"categoryName":31,"taxonomyType":32,"taxonomyTypeDesc":33},"01JBSEEDCAT000000000000035","市场营销","PROFESSION","适用职业",[35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57],"prototype","web","web prototype","when","design","single","section","for","true","more","color","layout","self","references","default","general","landing","page","template","saas","file","desktop","components","2026-11-10 10:12:30",false,"---\nname: web-prototype\ndescription: |\n  General-purpose desktop web prototype. Single self-contained HTML file built\n  by copying the seed `assets\u002Ftemplate.html` and pasting section layouts from\n  `references\u002Flayouts.md`. Default for any landing \u002F marketing \u002F docs \u002F SaaS\n  page when no more specific skill matches.\ntriggers:\n  - \"prototype\"\n  - \"mockup\"\n  - \"landing\"\n  - \"single page\"\n  - \"marketing page\"\n  - \"homepage\"\nod:\n  mode: prototype\n  platform: desktop\n  scenario: design\n  preview:\n    type: html\n    entry: index.html\n  design_system:\n    requires: true\n    sections: [color, typography, layout, components]\n---\n\n# Web Prototype Skill\n\nProduce a single, self-contained HTML prototype using the bundled seed and layout library — **not** by writing CSS from scratch. The seed already encodes good defaults (typography, spacing, accent budget). Your job is to compose it.\n\n## Resource map\n\n```\nweb-prototype\u002F\n├── SKILL.md                ← you're reading this\n├── assets\u002F\n│   └── template.html       ← seed: tokens + class system + chrome (READ FIRST)\n└── references\u002F\n    ├── layouts.md          ← 8 paste-ready section skeletons\n    └── checklist.md        ← P0\u002FP1\u002FP2 self-review\n```\n\n## Workflow\n\n### Step 0 — Pre-flight (do this once before writing anything)\n\n1. **Read `assets\u002Ftemplate.html` end-to-end** — at minimum through the `\u003Cstyle>` block. The class inventory at the top of `references\u002Flayouts.md` lists every class that must be defined there; if one is missing, add it to `\u003Cstyle>` rather than re-defining it inline on every section.\n2. **Read `references\u002Flayouts.md`** so you know which section skeletons exist. Don't write a section type that isn't covered — pick the closest layout and adapt.\n3. **Read the active DESIGN.md** (already injected into your system prompt). Map its colors to the six `:root` variables in the seed; don't introduce new tokens.\n\n### Step 1 — Prepare the artifact from the seed\n\nChoose one kebab-case artifact slug before composing the page. Use `assets\u002Ftemplate.html` as the seed for the final artifact HTML.\n\nDo not write a project-root HTML draft with file-write before emitting the final `\u003Cartifact>`. The live-artifact output is the canonical HTML file for this generation turn; an extra `index.html`, `cast.html`, or brief-derived draft can be stranded beside it as an orphan.\n\nReplace the six `:root` variables with the active design system's tokens. Replace the page `\u003Ctitle>` and the topnav brand.\n\n### Step 2 — Plan the section list\n\n**Pick layouts before writing copy.** Default rhythms (from `layouts.md`):\n\n| Page kind | Default rhythm |\n|---|---|\n| Landing | 1 hero → 3 features → 4 stats *or* 5 quote → custom split → 6 cta |\n| Marketing \u002F editorial | 1 hero-center → 7 log list → 6 cta |\n| Pricing | 1 hero-center → 8 comparison table → 6 cta |\n| Docs index | 1 hero-center → 7 log list (sections of docs) → 6 cta |\n\nState the chosen list in one sentence to the user *before* writing — they can redirect cheaply now and not after 200 lines of HTML.\n\n### Step 3 — Paste and fill\n\nFor each chosen layout, copy the `\u003Csection>` block from `layouts.md` into `\u003Cmain id=\"content\">` of the artifact HTML. Replace bracketed `[REPLACE]` strings with real, specific copy from the user's brief. **No filler** — if a slot is empty, the section is the wrong choice; pick a different layout.\n\n### Step 4 — Self-check\n\nRun through `references\u002Fchecklist.md` top to bottom. Every P0 item must pass before you move on. P1 items should pass; P2 are bonus.\n\n### Step 5 — Emit the artifact\n\nWrap the completed HTML in `\u003Cartifact>` tags using the artifact slug as the `identifier`. One sentence before describing what's there. Stop after `\u003C\u002Fartifact>`.\n\n## Hard rules (the seed protects most of these — don't fight it)\n\n- **Single accent, used at most twice per screen.** Eyebrow + primary CTA is the default budget.\n- **Display font is serif** (Iowan Old Style \u002F Charter \u002F Georgia in the seed). Sans for body. Mono for numerics, captions, eyebrows.\n- **Image placeholders, not external URLs.** Use the `.ph-img` class — never link to a stock photo CDN.\n- **Mobile reflow already works** via the seed's media query at 920px. Don't break it by adding fixed widths.\n- **`data-od-id` on every `\u003Csection>`** so comment mode can target it.\n\n## Output contract\n\n```\n\u003Cartifact identifier=\"kebab-case-slug\" type=\"text\u002Fhtml\" title=\"Human Title\">\n\u003C!doctype html>\n\u003Chtml>...\u003C\u002Fhtml>\n\u003C\u002Fartifact>\n```\n\nOpen Design derives the canonical HTML artifact from this identifier. Do not also write another root HTML file for the same generation turn.\n\nOne sentence before the artifact. Nothing after.\n","# Web Prototype Skill\n\nProduce a single, self-contained HTML prototype using the bundled seed and layout library — **not** by writing CSS from scratch. The seed already encodes good defaults (typography, spacing, accent budget). Your job is to compose it.\n\n## Resource map\n\n```\nweb-prototype\u002F\n├── SKILL.md                ← you're reading this\n├── assets\u002F\n│   └── template.html       ← seed: tokens + class system + chrome (READ FIRST)\n└── references\u002F\n    ├── layouts.md          ← 8 paste-ready section skeletons\n    └── checklist.md        ← P0\u002FP1\u002FP2 self-review\n```\n\n## Workflow\n\n### Step 0 — Pre-flight (do this once before writing anything)\n\n1. **Read `assets\u002Ftemplate.html` end-to-end** — at minimum through the `\u003Cstyle>` block. The class inventory at the top of `references\u002Flayouts.md` lists every class that must be defined there; if one is missing, add it to `\u003Cstyle>` rather than re-defining it inline on every section.\n2. **Read `references\u002Flayouts.md`** so you know which section skeletons exist. Don't write a section type that isn't covered — pick the closest layout and adapt.\n3. **Read the active DESIGN.md** (already injected into your system prompt). Map its colors to the six `:root` variables in the seed; don't introduce new tokens.\n\n### Step 1 — Prepare the artifact from the seed\n\nChoose one kebab-case artifact slug before composing the page. Use `assets\u002Ftemplate.html` as the seed for the final artifact HTML.\n\nDo not write a project-root HTML draft with file-write before emitting the final `\u003Cartifact>`. The live-artifact output is the canonical HTML file for this generation turn; an extra `index.html`, `cast.html`, or brief-derived draft can be stranded beside it as an orphan.\n\nReplace the six `:root` variables with the active design system's tokens. Replace the page `\u003Ctitle>` and the topnav brand.\n\n### Step 2 — Plan the section list\n\n**Pick layouts before writing copy.** Default rhythms (from `layouts.md`):\n\n| Page kind | Default rhythm |\n|---|---|\n| Landing | 1 hero → 3 features → 4 stats *or* 5 quote → custom split → 6 cta |\n| Marketing \u002F editorial | 1 hero-center → 7 log list → 6 cta |\n| Pricing | 1 hero-center → 8 comparison table → 6 cta |\n| Docs index | 1 hero-center → 7 log list (sections of docs) → 6 cta |\n\nState the chosen list in one sentence to the user *before* writing — they can redirect cheaply now and not after 200 lines of HTML.\n\n### Step 3 — Paste and fill\n\nFor each chosen layout, copy the `\u003Csection>` block from `layouts.md` into `\u003Cmain id=\"content\">` of the artifact HTML. Replace bracketed `[REPLACE]` strings with real, specific copy from the user's brief. **No filler** — if a slot is empty, the section is the wrong choice; pick a different layout.\n\n### Step 4 — Self-check\n\nRun through `references\u002Fchecklist.md` top to bottom. Every P0 item must pass before you move on. P1 items should pass; P2 are bonus.\n\n### Step 5 — Emit the artifact\n\nWrap the completed HTML in `\u003Cartifact>` tags using the artifact slug as the `identifier`. One sentence before describing what's there. Stop after `\u003C\u002Fartifact>`.\n\n## Hard rules (the seed protects most of these — don't fight it)\n\n- **Single accent, used at most twice per screen.** Eyebrow + primary CTA is the default budget.\n- **Display font is serif** (Iowan Old Style \u002F Charter \u002F Georgia in the seed). Sans for body. Mono for numerics, captions, eyebrows.\n- **Image placeholders, not external URLs.** Use the `.ph-img` class — never link to a stock photo CDN.\n- **Mobile reflow already works** via the seed's media query at 920px. Don't break it by adding fixed widths.\n- **`data-od-id` on every `\u003Csection>`** so comment mode can target it.\n\n## Output contract\n\n```\n\u003Cartifact identifier=\"kebab-case-slug\" type=\"text\u002Fhtml\" title=\"Human Title\">\n\u003C!doctype html>\n\u003Chtml>...\u003C\u002Fhtml>\n\u003C\u002Fartifact>\n```\n\nOpen Design derives the canonical HTML artifact from this identifier. Do not also write another root HTML file for the same generation turn.\n\nOne sentence before the artifact. Nothing after.\n",{"od":63,"name":5,"triggers":71,"description":76},{"mode":35,"preview":64,"platform":56,"scenario":39,"design_system":67},{"type":65,"entry":66},"html","index.html",{"requires":68,"sections":69},true,[45,70,46,57],"typography",[35,72,51,73,74,75],"mockup","single page","marketing page","homepage","General-purpose desktop web prototype. Single self-contained HTML file built\nby copying the seed `assets\u002Ftemplate.html` and pasting section layouts from\n`references\u002Flayouts.md`. Default for any landing \u002F marketing \u002F docs \u002F SaaS\npage when no more specific skill matches.\n","main","65613632bb94072e27fc5015d17387e28a870111","docs\u002Fdesign\u002Fopendesign\u002F.od-skills\u002Fweb-prototype-b3342e2645",188,"https:\u002F\u002Fgithub.com\u002Fcompozy\u002Fcompozy","https:\u002F\u002Fcompozy.com","https:\u002F\u002Fgithub.com\u002Fcompozy","An OS for AI agents","2026-11-13 03:54:53",{"source":8,"skillName":5,"commands":87,"prompt":97,"zipAvailable":68},[88,91,94],{"tool":89,"command":90},"npx","npx skills add compozy\u002Fcompozy --skill web-prototype",{"tool":92,"command":93},"bunx","bunx skills add compozy\u002Fcompozy --skill web-prototype",{"tool":95,"command":96},"pnpm","pnpm dlx skills add compozy\u002Fcompozy --skill web-prototype","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fcompozy\u002Fcompozy\u002Fblob\u002Fmain\u002Fdocs\u002Fdesign\u002Fopendesign\u002F.od-skills\u002Fweb-prototype-b3342e2645\u002FSKILL.md",[99,105,111,115,119],{"path":100,"resourceType":101,"resourceTypeDesc":102,"sizeBytes":103,"sourceHtmlUrl":104},"assets\u002Ftemplate.html","ASSET","资产文件",16364,"https:\u002F\u002Fgithub.com\u002Fcompozy\u002Fcompozy\u002Fblob\u002Fmain\u002Fdocs\u002Fdesign\u002Fopendesign\u002F.od-skills\u002Fweb-prototype-b3342e2645\u002Fassets\u002Ftemplate.html",{"path":106,"resourceType":107,"resourceTypeDesc":108,"sizeBytes":109,"sourceHtmlUrl":110},"example.html","REFERENCE","参考文档",4217,"https:\u002F\u002Fgithub.com\u002Fcompozy\u002Fcompozy\u002Fblob\u002Fmain\u002Fdocs\u002Fdesign\u002Fopendesign\u002F.od-skills\u002Fweb-prototype-b3342e2645\u002Fexample.html",{"path":112,"resourceType":107,"resourceTypeDesc":108,"sizeBytes":113,"sourceHtmlUrl":114},"open-design.json",9638,"https:\u002F\u002Fgithub.com\u002Fcompozy\u002Fcompozy\u002Fblob\u002Fmain\u002Fdocs\u002Fdesign\u002Fopendesign\u002F.od-skills\u002Fweb-prototype-b3342e2645\u002Fopen-design.json",{"path":116,"resourceType":107,"resourceTypeDesc":108,"sizeBytes":117,"sourceHtmlUrl":118},"references\u002Fchecklist.md",3756,"https:\u002F\u002Fgithub.com\u002Fcompozy\u002Fcompozy\u002Fblob\u002Fmain\u002Fdocs\u002Fdesign\u002Fopendesign\u002F.od-skills\u002Fweb-prototype-b3342e2645\u002Freferences\u002Fchecklist.md",{"path":120,"resourceType":107,"resourceTypeDesc":108,"sizeBytes":121,"sourceHtmlUrl":122},"references\u002Flayouts.md",10653,"https:\u002F\u002Fgithub.com\u002Fcompozy\u002Fcompozy\u002Fblob\u002Fmain\u002Fdocs\u002Fdesign\u002Fopendesign\u002F.od-skills\u002Fweb-prototype-b3342e2645\u002Freferences\u002Flayouts.md",[124,156,179,201,212,224],{"skillNo":125,"name":126,"nameZh":6,"description":127,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":128,"licenseFileUrl":129,"sourceHtmlUrl":130,"categories":131,"keywords":135,"publishedAt":58},"01M6MD7W312X49RNEJRKKVKTTD","security-review","Security code review for vulnerabilities. Use when asked to \"security review\", \"find vulnerabilities\", \"check for security issues\", \"audit security\", \"OWASP review\", or review code for injection, XSS, authentication, authorization, cryptography issues. Provides systematic review with confidence-based reporting.","CC-BY-SA-4.0","https:\u002F\u002Fgithub.com\u002Fcompozy\u002Fcompozy\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fsecurity-review\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fcompozy\u002Fcompozy\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fsecurity-review\u002FSKILL.md",[132],{"categoryNo":133,"categoryName":134,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000007","代码审查",[136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,42,153,154,38,155],"security","security review","review","injection","authentication","code review","issues","Bash","code","xss","audit","systematic","read","reporting","cryptography","owasp","systematic review","use","task","audit security",{"skillNo":157,"name":158,"nameZh":6,"description":159,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":160,"categories":161,"keywords":165,"publishedAt":58},"01M6MD5K93G1GP8VA56V2FEPZV","lesson-learned","Extract evidence-backed engineering lessons from recent changes or incidents. Use for requested reflection, lesson updates, or retiring an obsolete workflow rule.","https:\u002F\u002Fgithub.com\u002Fcompozy\u002Fcompozy\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Flesson-learned\u002FSKILL.md",[162],{"categoryNo":163,"categoryName":164,"taxonomyType":32,"taxonomyTypeDesc":33},"01JBSEEDCAT000000000000039","教师与教育",[166,167,168,42,169,170,171,172,173,174,175,176,153,177,178],"learned","lesson learned","lesson","changes","evidence","incidents","workflow","engineering","updates","extract","rule","lessons","reflection",{"skillNo":180,"name":9,"nameZh":6,"description":181,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":182,"categories":183,"keywords":184,"publishedAt":58},"01M6MDPNH3J60VRCGTPHVTHZR8","Operate CompozyOS. Use when working with CompozyOS sessions, agents, native tools, skills, tasks, Loops, Goals, Terminal, desktops and windows, automation, extensions, or configuration. Don't use for unrelated projects.","https:\u002F\u002Fgithub.com\u002Fcompozy\u002Fcompozy\u002Fblob\u002Fmain\u002Fskills\u002Fcompozy\u002FSKILL.md",[],[9,185,186,187,188,42,189,43,153,190,191,192,193,194,195,196,197,198,199,200,38],"sessions","windows","projects","operate","runtime","automation","tasks","extensions","with","loops","unrelated","goals","native","terminal","configuration","Tools",{"skillNo":202,"name":203,"nameZh":6,"description":204,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":205,"categories":206,"keywords":207,"publishedAt":58},"01M6MDPHKNPQHJ1TF21E1HSFNF","remotion-upgrade","Upgrade Remotion, and related packages","https:\u002F\u002Fgithub.com\u002Fcompozy\u002Fcompozy\u002Fblob\u002Fmain\u002Fpackages\u002Flaunch-video\u002F.agents\u002Fskills\u002Fremotion-upgrade\u002FSKILL.md",[],[208,209,210,211],"remotion upgrade","upgrade","Remotion","packages",{"skillNo":213,"name":214,"nameZh":6,"description":215,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":216,"categories":217,"keywords":218,"publishedAt":58},"01M6MDPFT91ZWC7Z09MRNZPAJG","remotion-studio","Preview a Remotion video","https:\u002F\u002Fgithub.com\u002Fcompozy\u002Fcompozy\u002Fblob\u002Fmain\u002Fpackages\u002Flaunch-video\u002F.agents\u002Fskills\u002Fremotion-studio\u002FSKILL.md",[],[219,220,210,221,222,223],"studio","remotion studio","Video","preview","remotion video",{"skillNo":225,"name":226,"nameZh":6,"description":227,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":228,"categories":229,"keywords":230,"publishedAt":58},"01M6MDPD5XDZPYB5NAZGKMPXWC","remotion-saas","Build an app with Remotion","https:\u002F\u002Fgithub.com\u002Fcompozy\u002Fcompozy\u002Fblob\u002Fmain\u002Fpackages\u002Flaunch-video\u002F.agents\u002Fskills\u002Fremotion-saas\u002FSKILL.md",[],[54,231,210,193,232,233],"remotion saas","app","build"]