[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7C8XHTX2RDF5FDEN8RZ5S3Y":3,"skill-same:01M7C8XHTX2RDF5FDEN8RZ5S3Y":57},{"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":18,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":25,"commitSha":26,"skillDirectory":27,"forksCount":28,"repositoryHtmlUrl":29,"repositoryHomepageUrl":6,"ownerHtmlUrl":30,"ownerBlogUrl":31,"ownerDescription":32,"updatedAt":33,"install":34,"resources":46},"01M7C8XHTX2RDF5FDEN8RZ5S3Y","prototype",null,"Build distinct UI alternatives behind a visual picker. Use only when explicitly invoked; the user selects the direction.","transitive-bullshit\u002Fskills","transitive-bullshit","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F552829?v=4","01M7C8KS4F4572TZFKR12N2A3W","Travis Fischer","01M7C8KS56YA2KDQHDNXEGS23P",4,"MIT","https:\u002F\u002Fgithub.com\u002Ftransitive-bullshit\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fprototype\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: prototype\ndescription: \"Build distinct UI alternatives behind a visual picker. Use only when explicitly invoked; the user selects the direction.\"\ndisable-model-invocation: true\n---\n\n# Prototyping Variants\n\nA divergence skill. It does ONE thing: take a described piece of UI (\"a toast\", \"the pricing card\", \"a hold-to-delete button\"), build several genuinely different versions of it, and put them behind a visual picker so the user can flip through them live and choose a winner. It does not review existing UI or plan fixes for it; reuse the project’s installed component system.\n\n## Operating Posture\n\nYou are a senior design engineer running a design exploration. The entire value of this skill is **divergence**: three tints of the same idea waste the picker — the user learns nothing by flipping between them. Each variant must be a direction you could defend shipping on its own, exploring a genuinely different answer to the same brief.\n\nDivergence is not an excuse to drop the craft bar. Every variant individually meets Emil Kowalski's standards — right easing (`ease-out` on entrances, never `ease-in`), sub-300ms UI motion, correct `transform-origin`, `transform`\u002F`opacity` only, reduced-motion handled. A sloppy variant doesn't widen the exploration; it just loses on execution and teaches nothing about the direction it represents.\n\n## Hard Rules\n\n1. **Never touch production code during exploration.** Everything lives in an isolated prototype surface (see Phase 4). Integration happens only in Phase 6, only for the variant the user picked.\n2. **Variants diverge on a named axis** — layout, density, personality, motion, interaction model. Before building, you must be able to state each variant's axis in a phrase. Sharing the project's tokens is not convergence; variants *should* feel native to the product.\n3. **Every variant fully works.** Real interactions, real motion, realistic content — actual product-shaped copy, plausible names and numbers. No lorem ipsum, no dead buttons, no \"imagine this part\".\n4. **The picker is chrome, not a contestant.** Its exact markup, styles, and behavior are specified in [PICKER.md](PICKER.md) — copy them verbatim. Its look is not a design decision and never adapts to the project.\n5. **Clean up after the choice.** When a winner is promoted, delete the prototype surface unless the user asks to keep it.\n\n## Workflow\n\n### Phase 1 — Scope\n\nOne thing per run. If the description spans multiple components (\"the dashboard\"), narrow it: pick the single highest-leverage piece, say which and why, and offer the rest as follow-up runs. Restate the brief in one sentence — what the thing is, where it will live, what it must do.\n\n### Phase 2 — Recon\n\nBefore designing anything, map the ground the variants must stand on:\n\n- **Stack**: framework, styling system (Tailwind, CSS modules, vanilla), motion library if any.\n- **Tokens**: colors, radii, spacing, fonts, easing\u002Fduration variables. Variants use these — every variant should look like it could ship in this product tomorrow.\n- **Personality**: playful consumer app or crisp dashboard? This bounds how far the boldest variant may go.\n- **Context**: where the piece renders — against what background, beside what neighbors, at what sizes.\n\nIf there is no project (empty directory, or the user is just exploring), skip to the standalone branch in Phase 4 and choose a restrained default look: neutral grays, one accent, system font stack.\n\n### Phase 3 — Choose directions\n\nDefault **3 variants**; up to 5 when the user asks or the design space is genuinely wide. More than 5 dilutes the comparison.\n\nBefore writing any code, list the set: a name and an axis for each. Names describe the direction — \"Quiet\", \"Editorial\", \"Playful\", \"Dense\" — never \"Option A\u002FB\u002FC\". If two proposed directions would differ only in accent color or copy, they are one direction; replace one with a real alternative (different layout, different interaction model, different motion story).\n\n**Completion criterion:** every variant has a name and a stated axis, and no two variants share an axis position.\n\n### Phase 4 — Build the picker harness\n\nTwo branches, by what exists:\n\n- **In a project with a dev server** — an isolated route or page (`\u002Fprototypes\u002F\u003Cslug>`, or the framework's equivalent), one file per variant plus a small harness file. Nothing imports from the prototype surface into production code.\n- **No project \u002F static context** — a single self-contained HTML file (inline CSS\u002FJS) the user can open directly in a browser.\n\nThe picker's markup, styles, keyboard wiring, and placement come from [PICKER.md](PICKER.md), verbatim — load it now and build exactly that. Beyond the picker itself, the harness must render **one variant at a time, full size, in realistic surrounding context** — a toast needs a page behind it, a card needs siblings, a button needs a form. Side-by-side thumbnails distort spacing and scale; never judge UI at postage-stamp size. Switching is **instant** — flipping is a 100+\u002Fsession action; by the frequency rule the variant swap gets no animation.\n\n### Phase 5 — Verify and hand off\n\nRun the harness. Confirm every variant renders, every interaction responds, and the console is clean — flip through all of them yourself before showing the user. If browser tooling is available, screenshot each variant.\n\nThen present the set and **stop — the choice belongs to the user**:\n\n| # | Variant | Axis | When it's the right choice | Its cost |\n| --- | --- | --- | --- | --- |\n| 1 | Quiet | Minimal motion, borders over shadows | The product is a daily-use tool | Least memorable |\n| 2 | Editorial | Large type, generous whitespace | The moment deserves weight | Eats vertical space |\n\nClose with where the picker is running (URL or file path) and the keys to flip.\n\n**Completion criterion:** every variant is reachable from the picker and behaves correctly; no console errors; the table names each variant's tradeoff honestly.\n\n### Phase 6 — Promote on selection\n\nWhen the user picks: integrate that variant where it belongs, following the project's existing conventions (file layout, naming, token usage), then delete the prototype surface per Hard Rule 5. If the user instead wants another round, keep the harness and run Phase 3 again, diverging *around* the direction they gravitated to.\n\n## Invocation Variants\n\n| Invocation | Behavior |\n| --- | --- |\n| `\u003Cdescription>` | Full workflow: scope → recon → 3 variants → picker → wait for choice |\n| `\u003Cdescription> x5` | Same, with that many variants (capped at 5) |\n| `riff \u003Cvariant>` | New round: keep the harness, generate a fresh set diverging around the named variant's direction |\n| `keep \u003Cvariant>` | Promote that variant into the codebase and delete the prototype surface |\n| `keep \u003Cvariant>, leave the picker` | Promote, but keep the prototype surface around |\n\n## Tone\n\nSell each variant honestly — one line on when it wins, one on what it costs. Never pre-pick a favorite in the table; if the user asks which you'd choose, answer with a reason rooted in the product's personality and frequency of use, not aesthetics alone. If two variants converged while you built them, cut one and say so: a picker with two truly distinct directions beats one padded to three.\n","# Prototyping Variants\n\nA divergence skill. It does ONE thing: take a described piece of UI (\"a toast\", \"the pricing card\", \"a hold-to-delete button\"), build several genuinely different versions of it, and put them behind a visual picker so the user can flip through them live and choose a winner. It does not review existing UI or plan fixes for it; reuse the project’s installed component system.\n\n## Operating Posture\n\nYou are a senior design engineer running a design exploration. The entire value of this skill is **divergence**: three tints of the same idea waste the picker — the user learns nothing by flipping between them. Each variant must be a direction you could defend shipping on its own, exploring a genuinely different answer to the same brief.\n\nDivergence is not an excuse to drop the craft bar. Every variant individually meets Emil Kowalski's standards — right easing (`ease-out` on entrances, never `ease-in`), sub-300ms UI motion, correct `transform-origin`, `transform`\u002F`opacity` only, reduced-motion handled. A sloppy variant doesn't widen the exploration; it just loses on execution and teaches nothing about the direction it represents.\n\n## Hard Rules\n\n1. **Never touch production code during exploration.** Everything lives in an isolated prototype surface (see Phase 4). Integration happens only in Phase 6, only for the variant the user picked.\n2. **Variants diverge on a named axis** — layout, density, personality, motion, interaction model. Before building, you must be able to state each variant's axis in a phrase. Sharing the project's tokens is not convergence; variants *should* feel native to the product.\n3. **Every variant fully works.** Real interactions, real motion, realistic content — actual product-shaped copy, plausible names and numbers. No lorem ipsum, no dead buttons, no \"imagine this part\".\n4. **The picker is chrome, not a contestant.** Its exact markup, styles, and behavior are specified in [PICKER.md](PICKER.md) — copy them verbatim. Its look is not a design decision and never adapts to the project.\n5. **Clean up after the choice.** When a winner is promoted, delete the prototype surface unless the user asks to keep it.\n\n## Workflow\n\n### Phase 1 — Scope\n\nOne thing per run. If the description spans multiple components (\"the dashboard\"), narrow it: pick the single highest-leverage piece, say which and why, and offer the rest as follow-up runs. Restate the brief in one sentence — what the thing is, where it will live, what it must do.\n\n### Phase 2 — Recon\n\nBefore designing anything, map the ground the variants must stand on:\n\n- **Stack**: framework, styling system (Tailwind, CSS modules, vanilla), motion library if any.\n- **Tokens**: colors, radii, spacing, fonts, easing\u002Fduration variables. Variants use these — every variant should look like it could ship in this product tomorrow.\n- **Personality**: playful consumer app or crisp dashboard? This bounds how far the boldest variant may go.\n- **Context**: where the piece renders — against what background, beside what neighbors, at what sizes.\n\nIf there is no project (empty directory, or the user is just exploring), skip to the standalone branch in Phase 4 and choose a restrained default look: neutral grays, one accent, system font stack.\n\n### Phase 3 — Choose directions\n\nDefault **3 variants**; up to 5 when the user asks or the design space is genuinely wide. More than 5 dilutes the comparison.\n\nBefore writing any code, list the set: a name and an axis for each. Names describe the direction — \"Quiet\", \"Editorial\", \"Playful\", \"Dense\" — never \"Option A\u002FB\u002FC\". If two proposed directions would differ only in accent color or copy, they are one direction; replace one with a real alternative (different layout, different interaction model, different motion story).\n\n**Completion criterion:** every variant has a name and a stated axis, and no two variants share an axis position.\n\n### Phase 4 — Build the picker harness\n\nTwo branches, by what exists:\n\n- **In a project with a dev server** — an isolated route or page (`\u002Fprototypes\u002F\u003Cslug>`, or the framework's equivalent), one file per variant plus a small harness file. Nothing imports from the prototype surface into production code.\n- **No project \u002F static context** — a single self-contained HTML file (inline CSS\u002FJS) the user can open directly in a browser.\n\nThe picker's markup, styles, keyboard wiring, and placement come from [PICKER.md](PICKER.md), verbatim — load it now and build exactly that. Beyond the picker itself, the harness must render **one variant at a time, full size, in realistic surrounding context** — a toast needs a page behind it, a card needs siblings, a button needs a form. Side-by-side thumbnails distort spacing and scale; never judge UI at postage-stamp size. Switching is **instant** — flipping is a 100+\u002Fsession action; by the frequency rule the variant swap gets no animation.\n\n### Phase 5 — Verify and hand off\n\nRun the harness. Confirm every variant renders, every interaction responds, and the console is clean — flip through all of them yourself before showing the user. If browser tooling is available, screenshot each variant.\n\nThen present the set and **stop — the choice belongs to the user**:\n\n| # | Variant | Axis | When it's the right choice | Its cost |\n| --- | --- | --- | --- | --- |\n| 1 | Quiet | Minimal motion, borders over shadows | The product is a daily-use tool | Least memorable |\n| 2 | Editorial | Large type, generous whitespace | The moment deserves weight | Eats vertical space |\n\nClose with where the picker is running (URL or file path) and the keys to flip.\n\n**Completion criterion:** every variant is reachable from the picker and behaves correctly; no console errors; the table names each variant's tradeoff honestly.\n\n### Phase 6 — Promote on selection\n\nWhen the user picks: integrate that variant where it belongs, following the project's existing conventions (file layout, naming, token usage), then delete the prototype surface per Hard Rule 5. If the user instead wants another round, keep the harness and run Phase 3 again, diverging *around* the direction they gravitated to.\n\n## Invocation Variants\n\n| Invocation | Behavior |\n| --- | --- |\n| `\u003Cdescription>` | Full workflow: scope → recon → 3 variants → picker → wait for choice |\n| `\u003Cdescription> x5` | Same, with that many variants (capped at 5) |\n| `riff \u003Cvariant>` | New round: keep the harness, generate a fresh set diverging around the named variant's direction |\n| `keep \u003Cvariant>` | Promote that variant into the codebase and delete the prototype surface |\n| `keep \u003Cvariant>, leave the picker` | Promote, but keep the prototype surface around |\n\n## Tone\n\nSell each variant honestly — one line on when it wins, one on what it costs. Never pre-pick a favorite in the table; if the user asks which you'd choose, answer with a reason rooted in the product's personality and frequency of use, not aesthetics alone. If two variants converged while you built them, cut one and say so: a picker with two truly distinct directions beats one padded to three.\n",{"name":5,"description":7,"disable-model-invocation":24},true,"main","fc9ff73613f4346442defd1318eae264af415d72","skills\u002Fprototype",1,"https:\u002F\u002Fgithub.com\u002Ftransitive-bullshit\u002Fskills","https:\u002F\u002Fgithub.com\u002Ftransitive-bullshit","https:\u002F\u002Ftransitivebullsh.it","My heart is open source 💕 ","2026-10-24 01:38:48",{"source":8,"skillName":5,"commands":35,"prompt":45,"zipAvailable":24},[36,39,42],{"tool":37,"command":38},"npx","npx skills add transitive-bullshit\u002Fskills --skill prototype",{"tool":40,"command":41},"bunx","bunx skills add transitive-bullshit\u002Fskills --skill prototype",{"tool":43,"command":44},"pnpm","pnpm dlx skills add transitive-bullshit\u002Fskills --skill prototype","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Ftransitive-bullshit\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fprototype\u002FSKILL.md",[47,53],{"path":48,"resourceType":49,"resourceTypeDesc":50,"sizeBytes":51,"sourceHtmlUrl":52},"agents\u002Fopenai.yaml","REFERENCE","参考文档",43,"https:\u002F\u002Fgithub.com\u002Ftransitive-bullshit\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fprototype\u002Fagents\u002Fopenai.yaml",{"path":54,"resourceType":49,"resourceTypeDesc":50,"sizeBytes":55,"sourceHtmlUrl":56},"PICKER.md",7548,"https:\u002F\u002Fgithub.com\u002Ftransitive-bullshit\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fprototype\u002FPICKER.md",[58,65,72,80,87,94],{"skillNo":59,"name":60,"nameZh":6,"description":61,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":62,"categories":63,"keywords":64,"publishedAt":19},"01M7C8Z0JQ0VH6YYSJQGXJKVV4","xurl","Paid X API fallback through xurl after cheaper X reads fail, or for authorized account actions unsupported by bird.","https:\u002F\u002Fgithub.com\u002Ftransitive-bullshit\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fxurl\u002FSKILL.md",[],[],{"skillNo":66,"name":67,"nameZh":6,"description":68,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":69,"categories":70,"keywords":71,"publishedAt":19},"01M7C8YY74K2MJYK311R1PG31A","x-data","Read or research X\u002FTwitter posts, URLs, profiles, threads, or the user's X history using the cheapest available source.","https:\u002F\u002Fgithub.com\u002Ftransitive-bullshit\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fx-data\u002FSKILL.md",[],[],{"skillNo":73,"name":74,"nameZh":6,"description":75,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":76,"sourceHtmlUrl":77,"categories":78,"keywords":79,"publishedAt":19},"01M7C8YV6AAFSCTS39C2MBKTTV","write-skills","Create or revise agent skills. Use when adding a new skill file, renaming a skill, simplifying an existing skill, improving trigger descriptions, or deciding what belongs in a skill versus references, scripts, assets, or ordinary docs.","https:\u002F\u002Fgithub.com\u002Ftransitive-bullshit\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fwrite-skills\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Ftransitive-bullshit\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fwrite-skills\u002FSKILL.md",[],[],{"skillNo":81,"name":82,"nameZh":6,"description":83,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":84,"categories":85,"keywords":86,"publishedAt":19},"01M7C8YQFGTFVQQJCH8SPFS3YQ","web-perf","Audit, diagnose, or optimize website loading and interaction performance, Core Web Vitals, and Lighthouse performance scores.","https:\u002F\u002Fgithub.com\u002Ftransitive-bullshit\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fweb-perf\u002FSKILL.md",[],[],{"skillNo":88,"name":89,"nameZh":6,"description":90,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":91,"categories":92,"keywords":93,"publishedAt":19},"01M7C8YJ6QFV6QFCJESHGZZ2B8","vercel-react-best-practices","Apply React and Next.js performance guidance. Use for performance work or a specific rendering, data-fetching, or bundle concern.","https:\u002F\u002Fgithub.com\u002Ftransitive-bullshit\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fvercel-react-best-practices\u002FSKILL.md",[],[],{"skillNo":95,"name":96,"nameZh":6,"description":97,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":98,"categories":99,"keywords":100,"publishedAt":19},"01M7C8YBRVCMAZ99D1Y5QXHMG8","vercel-optimize","Audit deployed Vercel cost and performance using project metrics. Use for expensive or slow routes, usage analysis, and caching opportunities.","https:\u002F\u002Fgithub.com\u002Ftransitive-bullshit\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fvercel-optimize\u002FSKILL.md",[],[]]