{"id":"1d2b83b1-f797-48ee-ae59-3ade95b6acb6","shortId":"kPDqYj","kind":"skill","title":"vibe-coding","tagline":"Turn an idea into a demo-ready prototype using AI-assisted vibe coding.","description":"# Vibe Coding\n\n## Scope\n\n**Covers**\n- Timeboxed, AI-assisted rapid prototyping (\"vibe coding\") to produce a functional demo (not slides)\n- Turning a rough idea into a buildable prototype spec + task board + prompt pack\n- A tight iteration loop: generate → run → verify → adjust → log decisions\n- \"Build tools to build the thing\" when it meaningfully speeds up the demo (timeboxed)\n- Safe use of coding agents: least privilege, no secrets, small diffs, validation, rollback\n\n**When to use**\n- \"Vibe code a working prototype we can demo in 30–90 minutes.\"\n- \"Replace this Figma concept with a clickable prototype.\"\n- \"I’m not an engineer—help me build a small app/tool with AI and ship a demo.\"\n- \"Turn this AI feature idea into a proof-of-concept with a clear build loop and demo script.\"\n\n**When NOT to use**\n- You need a production-grade system, hardening, scaling, or security review (use `building-with-llms` + engineering process).\n- You need upstream problem framing, strategy, or PRD-level alignment (use `problem-definition`, `writing-prds`).\n- The work is high-stakes/irreversible (payments, auth, medical, legal, safety-critical) without human owners and reviews.\n- The request is \"build anything\" with no demo target; do intake first and narrow to one scenario.\n- You want to evaluate whether to adopt a new AI tool or framework (use `evaluating-new-technology`).\n- You need an AI/LLM product strategy, not a prototype (use `ai-product-strategy`).\n- You're validating a startup idea at the business-model level, not building a demo (use `startup-ideation`).\n\n## Inputs\n\n**Minimum required**\n- Prototype goal: what should a user be able to do in the demo (1–3 \"happy path\" tasks)\n- Target user + context (who uses it, where it fits)\n- Timebox (e.g., 30/60/90 minutes) + demo audience (internal, customer, exec)\n- Platform preference (web app, mobile, CLI, spreadsheet, etc.) and constraints (privacy, data sensitivity)\n- Data/integrations: mock data ok? any APIs needed? (default to mock)\n\n**Missing-info strategy**\n- Ask up to 5 questions from [references/INTAKE.md](references/INTAKE.md) (3–5 at a time).\n- If details remain missing, proceed with explicit assumptions and offer 2–3 options (e.g., mock vs real data; simple UI vs polished).\n- If asked to run commands or write/modify files, request confirmation, keep changes in a dedicated folder, and include rollback guidance.\n\n## Outputs (deliverables)\n\nProduce a **Vibe Coding Prototype Pack** (in chat; or as files if requested), in this order:\n\n1) **Vibe Coding Brief** (goal, demo scenario, non-goals, constraints, timebox)\n2) **Prototype Spec** (user flow, screens/components, data model, acceptance criteria, \"fake vs real\" decisions)\n3) **Prompt Pack** (copy/paste prompts to drive the coding agent safely and efficiently)\n4) **Build Plan + Task Board** (vertical slices with checks/tests per slice)\n5) **Demo Script + Runbook** (how to run, how to demo, what to say, what to avoid)\n6) **Risks / Open questions / Next steps** (always included)\n\nTemplates: [references/TEMPLATES.md](references/TEMPLATES.md)\n\n## Workflow (7 steps)\n\n### 1) Pick a single demo outcome (kill ambiguity fast)\n- **Inputs:** Initial idea, timebox, target audience.\n- **Actions:** Write a one-sentence demo promise (\"In 60 minutes we will demo…\") + 3–5 non-goals. Choose one \"hero\" scenario and what can be faked.\n- **Outputs:** Draft **Vibe Coding Brief**.\n- **Checks:** The demo promise is specific, observable, and fits the timebox.\n\n### 2) Define the prototype’s contract (what exists, what’s mocked)\n- **Inputs:** Demo scenario, platform preference, constraints.\n- **Actions:** Specify the minimum user flow, screens/components, and data shape. Decide: mock data vs real data; stub integrations vs live.\n- **Outputs:** Draft **Prototype Spec**.\n- **Checks:** Acceptance criteria exist for each user-visible step; \"fake vs real\" is explicit.\n\n### 3) Set the build loop + guardrails (how we’ll vibe code safely)\n- **Inputs:** Repo/app context (if any), constraints, desired stack.\n- **Actions:** Create a **Prompt Pack** that forces: small diffs, clear file list, run instructions, and \"ask before risky actions.\" Create a task board of 3–8 vertical slices.\n- **Outputs:** **Prompt Pack** + **Build Plan + Task Board**.\n- **Checks:** Every slice has a Definition of Done and a quick validation method (manual steps or tests).\n\n### 4) Scaffold the thinnest runnable slice (end-to-end)\n- **Inputs:** Prompt pack, chosen platform/stack, prototype spec.\n- **Actions:** Generate a minimal skeleton that runs. Implement the hero path with mock data. Capture run commands and known limitations.\n- **Outputs:** Runnable prototype + run notes (for the runbook).\n- **Checks:** A fresh user can run it in ≤ 5 minutes; the hero path is demonstrable.\n\n### 5) Iterate in vertical slices (generate → run → verify → log)\n- **Inputs:** Task board, working prototype.\n- **Actions:** For each slice: request a plan + diff, apply changes, run, verify against acceptance criteria, and record decisions/bugs. Avoid broad refactors; prefer incremental improvements.\n- **Outputs:** Updated prototype + iteration notes.\n- **Checks:** Each slice ends with a user-visible improvement and a validated run.\n\n### 6) Optional: build a tool to build the thing (timeboxed)\n- **Inputs:** Repeated friction (editing, generating, transforming content).\n- **Actions:** If it reduces time-to-demo, vibe code a tiny helper tool (editor, generator, script) and immediately use it to advance the prototype.\n- **Outputs:** Helper tool + note on how it accelerates the workflow.\n- **Checks:** The helper tool saves time within the current timebox; otherwise cut it.\n\n### 7) Package the demo + quality gate + handoff\n- **Inputs:** Prototype + all draft artifacts.\n- **Actions:** Write the demo script + runbook. Run [references/CHECKLISTS.md](references/CHECKLISTS.md) and score with [references/RUBRIC.md](references/RUBRIC.md). Finalize **Risks / Open questions / Next steps**.\n- **Outputs:** Final **Vibe Coding Prototype Pack**.\n- **Checks:** A stakeholder can demo it without you; risks and next steps are explicit and owned.\n\n## Quality gate (required)\n- Use [references/CHECKLISTS.md](references/CHECKLISTS.md) and [references/RUBRIC.md](references/RUBRIC.md).\n- Always include: **Risks**, **Open questions**, **Next steps**.\n\n## Examples\n\n**Example 1 (30–60 min prototype):** \"Use `vibe-coding` to build a demo-ready web prototype of an ‘AI meeting notes → action items’ tool. Mock the LLM output. Output the full Vibe Coding Prototype Pack.\"  \nExpected: brief + spec + prompt pack + task board + demo script; prototype plan defaults to mock data and a single hero flow.\n\n**Example 2 (non-engineer builder):** \"I’m a PM. Use `vibe-coding` to help me create a clickable prototype of an onboarding checklist app in 45 minutes. I need a demo script for my team.\"  \nExpected: tight scope, fake data, vertical slices, and a runbook optimized for demo reliability.\n\n**Boundary example:** \"Vibe code a production payments backend and deploy it.\"\nResponse: out of scope; propose a prototype-only approach (mock payments), identify required security/engineering owners, and recommend a separate production plan.\n\n**Boundary example 2:** \"Should we use React or Vue for our next product? Evaluate the trade-offs.\"\nResponse: technology evaluation is not prototyping; use `evaluating-new-technology` for framework/tool decisions. This skill is for building a working demo once you've chosen a stack.\n\n## Anti-patterns (common failure modes)\n\n1. **Scope creep past the timebox**: Starting with \"just a quick demo\" and spending 3 hours adding polish, animations, and edge cases. The timebox is the constraint; cut scope, not time.\n2. **Big-bang refactors mid-prototype**: Stopping to \"clean up the architecture\" after the first slice works. Prototypes are disposable; refactoring kills momentum and wastes the timebox.\n3. **Secrets in the prototype**: Hard-coding API keys, tokens, or credentials into the codebase. Always use environment variables or mock data; never commit secrets.\n4. **No demo script**: Building a working prototype but having no idea how to show it. The demo script should be written before the last slice, not after.\n5. **Trusting AI output without running it**: Accepting generated code without running it, checking output, or verifying behavior. Every slice must end with a validated run.","tags":["vibe","coding","lenny","skills","plus","liqiongyu","agent-skills","ai-agents","automation","claude","codex","prompt-engineering"],"capabilities":["skill","source-liqiongyu","skill-vibe-coding","topic-agent-skills","topic-ai-agents","topic-automation","topic-claude","topic-codex","topic-prompt-engineering","topic-refoundai","topic-skillpack"],"categories":["lenny_skills_plus"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/liqiongyu/lenny_skills_plus/vibe-coding","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add liqiongyu/lenny_skills_plus","source_repo":"https://github.com/liqiongyu/lenny_skills_plus","install_from":"skills.sh"}},"qualityScore":"0.474","qualityRationale":"deterministic score 0.47 from registry signals: · indexed on github topic:agent-skills · 49 github stars · SKILL.md body (8,412 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T00:56:26.250Z","embedding":null,"createdAt":"2026-04-18T22:17:13.731Z","updatedAt":"2026-04-22T00:56:26.250Z","lastSeenAt":"2026-04-22T00:56:26.250Z","tsv":"'/irreversible':194 '1':292,415,495,936,1128 '2':365,427,554,993,1078,1159 '3':293,350,366,441,524,610,654,1142,1188 '30':100,937 '30/60/90':308 '4':454,682,1214 '45':1019 '5':345,351,465,525,735,742,1242 '6':481,799 '60':519,938 '7':493,864 '8':655 '90':101 'abl':286 'acceler':848 'accept':435,596,769,1249 'action':510,571,630,648,699,756,816,876,958 'ad':1144 'adjust':58 'adopt':230 'advanc':838 'agent':79,450 'ai':15,25,123,130,233,253,955,1244 'ai-assist':14,24 'ai-product-strategi':252 'ai/llm':245 'align':180 'alway':487,927,1204 'ambigu':502 'anim':1146 'anti':1123 'anti-pattern':1122 'anyth':211 'api':333,1196 'app':318,1017 'app/tool':121 'appli':764 'approach':1063 'architectur':1172 'artifact':875 'ask':342,378,645 'assist':16,26 'assumpt':362 'audienc':311,509 'auth':196 'avoid':480,774 'backend':1050 'bang':1162 'behavior':1259 'big':1161 'big-bang':1160 'board':48,458,652,664,753,978 'boundari':1043,1076 'brief':418,542,973 'broad':775 'build':61,64,118,142,165,210,269,455,613,661,801,805,946,1112,1218 'buildabl':44 'builder':997 'building-with-llm':164 'busi':265 'business-model':264 'captur':713 'case':1149 'chang':388,765 'chat':406 'check':543,595,665,727,785,851,902,1255 'checklist':1016 'checks/tests':462 'choos':529 'chosen':695,1119 'clean':1169 'clear':141,639 'cli':320 'clickabl':109,1011 'code':3,18,20,30,78,92,402,417,449,541,620,825,899,944,969,1005,1046,1195,1251 'codebas':1203 'command':381,715 'commit':1212 'common':1125 'concept':106,138 'confirm':386 'constraint':324,425,570,627,1154 'content':815 'context':299,624 'contract':559 'copy/paste':444 'cover':22 'creat':631,649,1009 'credenti':1200 'creep':1130 'criteria':436,597,770 'critic':201 'current':859 'custom':313 'cut':862,1155 'data':326,330,372,433,579,583,586,712,986,1033,1210 'data/integrations':328 'decid':581 'decis':60,440,1107 'decisions/bugs':773 'dedic':391 'default':335,983 'defin':555 'definit':184,670 'deliver':398 'demo':10,35,73,98,127,145,214,271,291,310,420,466,474,499,516,523,545,566,823,867,879,906,949,979,1024,1041,1115,1139,1216,1231 'demo-readi':9,948 'demonstr':741 'deploy':1052 'desir':628 'detail':356 'diff':85,638,763 'dispos':1180 'done':672 'draft':539,592,874 'drive':447 'e.g':307,368 'edg':1148 'edit':812 'editor':830 'effici':453 'end':689,691,788,1263 'end-to-end':688 'engin':115,168,996 'environ':1206 'etc':322 'evalu':227,239,1089,1096,1102 'evaluating-new-technolog':238,1101 'everi':666,1260 'exampl':934,935,992,1044,1077 'exec':314 'exist':561,598 'expect':972,1029 'explicit':361,609,915 'failur':1126 'fake':437,537,605,1032 'fast':503 'featur':131 'figma':105 'file':384,409,640 'final':890,897 'first':218,1175 'fit':305,551 'flow':431,576,991 'folder':392 'forc':636 'frame':174 'framework':236 'framework/tool':1106 'fresh':729 'friction':811 'full':967 'function':34 'gate':869,919 'generat':55,700,747,813,831,1250 'goal':280,419,424,528 'grade':156 'guardrail':615 'guidanc':396 'handoff':870 'happi':294 'hard':1194 'hard-cod':1193 'harden':158 'help':116,1007 'helper':828,842,853 'hero':531,708,738,990 'high':192 'high-stak':191 'hour':1143 'human':203 'idea':6,41,132,261,506,1225 'ideat':275 'identifi':1066 'immedi':834 'implement':706 'improv':779,794 'includ':394,488,928 'increment':778 'info':340 'initi':505 'input':276,504,565,622,692,751,809,871 'instruct':643 'intak':217 'integr':588 'intern':312 'item':959 'iter':53,743,783 'keep':387 'key':1197 'kill':501,1182 'known':717 'last':1238 'least':80 'legal':198 'level':179,267 'limit':718 'list':641 'live':590 'll':618 'llm':963 'llms':167 'log':59,750 'loop':54,143,614 'm':112,999 'manual':678 'meaning':69 'medic':197 'meet':956 'method':677 'mid':1165 'mid-prototyp':1164 'min':939 'minim':702 'minimum':277,574 'minut':102,309,520,736,1020 'miss':339,358 'missing-info':338 'mobil':319 'mock':329,337,369,564,582,711,961,985,1064,1209 'mode':1127 'model':266,434 'momentum':1183 'must':1262 'narrow':220 'need':152,171,243,334,1022 'never':1211 'new':232,240,1103 'next':485,894,912,932,1087 'non':423,527,995 'non-engin':994 'non-goal':422,526 'note':723,784,844,957 'observ':549 'off':1093 'offer':364 'ok':331 'onboard':1015 'one':222,514,530 'one-sent':513 'open':483,892,930 'optim':1039 'option':367,800 'order':414 'otherwis':861 'outcom':500 'output':397,538,591,658,719,780,841,896,964,965,1245,1256 'own':917 'owner':204,1069 'pack':50,404,443,634,660,694,901,971,976 'packag':865 'past':1131 'path':295,709,739 'pattern':1124 'payment':195,1049,1065 'per':463 'pick':496 'plan':456,662,762,982,1075 'platform':315,568 'platform/stack':696 'pm':1001 'polish':376,1145 'prd':178 'prd-level':177 'prds':187 'prefer':316,569,777 'privaci':325 'privileg':81 'problem':173,183 'problem-definit':182 'proceed':359 'process':169 'produc':32,399 'product':155,246,254,1048,1074,1088 'production-grad':154 'promis':517,546 'prompt':49,442,445,633,659,693,975 'proof':136 'proof-of-concept':135 'propos':1058 'prototyp':12,28,45,95,110,250,279,403,428,557,593,697,721,755,782,840,872,900,940,952,970,981,1012,1061,1099,1166,1178,1192,1221 'prototype-on':1060 'qualiti':868,918 'question':346,484,893,931 'quick':675,1138 'rapid':27 're':257 'react':1082 'readi':11,950 'real':371,439,585,607 'recommend':1071 'record':772 'reduc':819 'refactor':776,1163,1181 'references/checklists.md':883,884,922,923 'references/intake.md':348,349 'references/rubric.md':888,889,925,926 'references/templates.md':490,491 'reliabl':1042 'remain':357 'repeat':810 'replac':103 'repo/app':623 'request':208,385,411,760 'requir':278,920,1067 'respons':1054,1094 'review':162,206 'risk':482,891,910,929 'riski':647 'rollback':87,395 'rough':40 'run':56,380,471,642,705,714,722,732,748,766,798,882,1247,1253,1267 'runbook':468,726,881,1038 'runnabl':686,720 'safe':75,451,621 'safeti':200 'safety-crit':199 'save':855 'say':477 'scaffold':683 'scale':159 'scenario':223,421,532,567 'scope':21,1031,1057,1129,1156 'score':886 'screens/components':432,577 'script':146,467,832,880,980,1025,1217,1232 'secret':83,1189,1213 'secur':161 'security/engineering':1068 'sensit':327 'sentenc':515 'separ':1073 'set':611 'shape':580 'ship':125 'show':1228 'simpl':373 'singl':498,989 'skeleton':703 'skill':1109 'skill-vibe-coding' 'slice':460,464,657,667,687,746,759,787,1035,1176,1239,1261 'slide':37 'small':84,120,637 'source-liqiongyu' 'spec':46,429,594,698,974 'specif':548 'specifi':572 'speed':70 'spend':1141 'spreadsheet':321 'stack':629,1121 'stake':193 'stakehold':904 'start':1134 'startup':260,274 'startup-id':273 'step':486,494,604,679,895,913,933 'stop':1167 'strategi':175,247,255,341 'stub':587 'system':157 'target':215,297,508 'task':47,296,457,651,663,752,977 'team':1028 'technolog':241,1095,1104 'templat':489 'test':681 'thing':66,807 'thinnest':685 'tight':52,1030 'time':354,821,856,1158 'time-to-demo':820 'timebox':23,74,306,426,507,553,808,860,1133,1151,1187 'tini':827 'token':1198 'tool':62,234,803,829,843,854,960 'topic-agent-skills' 'topic-ai-agents' 'topic-automation' 'topic-claude' 'topic-codex' 'topic-prompt-engineering' 'topic-refoundai' 'topic-skillpack' 'trade':1092 'trade-off':1091 'transform':814 'trust':1243 'turn':4,38,128 'ui':374 'updat':781 'upstream':172 'use':13,76,90,150,163,181,237,251,272,301,835,921,941,1002,1081,1100,1205 'user':284,298,430,575,602,730,792 'user-vis':601,791 'valid':86,258,676,797,1266 'variabl':1207 've':1118 'verifi':57,749,767,1258 'vertic':459,656,745,1034 'vibe':2,17,19,29,91,401,416,540,619,824,898,943,968,1004,1045 'vibe-cod':1,942,1003 'visibl':603,793 'vs':370,375,438,584,589,606 'vue':1084 'want':225 'wast':1185 'web':317,951 'whether':228 'within':857 'without':202,908,1246,1252 'work':94,189,754,1114,1177,1220 'workflow':492,850 'write':186,511,877 'write/modify':383 'writing-prd':185 'written':1235","prices":[{"id":"3938e248-618e-4fd0-8726-d99e0ee0c4c7","listingId":"1d2b83b1-f797-48ee-ae59-3ade95b6acb6","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"liqiongyu","category":"lenny_skills_plus","install_from":"skills.sh"},"createdAt":"2026-04-18T22:17:13.731Z"}],"sources":[{"listingId":"1d2b83b1-f797-48ee-ae59-3ade95b6acb6","source":"github","sourceId":"liqiongyu/lenny_skills_plus/vibe-coding","sourceUrl":"https://github.com/liqiongyu/lenny_skills_plus/tree/main/skills/vibe-coding","isPrimary":false,"firstSeenAt":"2026-04-18T22:17:13.731Z","lastSeenAt":"2026-04-22T00:56:26.250Z"}],"details":{"listingId":"1d2b83b1-f797-48ee-ae59-3ade95b6acb6","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"liqiongyu","slug":"vibe-coding","github":{"repo":"liqiongyu/lenny_skills_plus","stars":49,"topics":["agent-skills","ai-agents","automation","claude","codex","prompt-engineering","refoundai","skillpack"],"license":"apache-2.0","html_url":"https://github.com/liqiongyu/lenny_skills_plus","pushed_at":"2026-04-04T06:30:11Z","description":"86 agent-executable skill packs converted from RefoundAI’s Lenny skills (unofficial). Works with Codex + Claude Code.","skill_md_sha":"4d0d8ab6d712a3a1c3b0469c002d1b091eaa1326","skill_md_path":"skills/vibe-coding/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/liqiongyu/lenny_skills_plus/tree/main/skills/vibe-coding"},"layout":"multi","source":"github","category":"lenny_skills_plus","frontmatter":{"name":"vibe-coding","description":"Turn an idea into a demo-ready prototype using AI-assisted vibe coding."},"skills_sh_url":"https://skills.sh/liqiongyu/lenny_skills_plus/vibe-coding"},"updatedAt":"2026-04-22T00:56:26.250Z"}}