[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6JC930ZD9CS7WZS6MNBQCXC":3,"skill-same:01M6JC930ZD9CS7WZS6MNBQCXC":101},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":33,"publishedAt":54,"linkOnly":55,"markdownContent":56,"markdownBody":57,"frontMatter":58,"refName":73,"commitSha":74,"skillDirectory":75,"forksCount":76,"repositoryHtmlUrl":77,"repositoryHomepageUrl":78,"ownerHtmlUrl":79,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":80,"install":81,"resources":94},"01M6JC930ZD9CS7WZS6MNBQCXC","saas-funnel-cloning",null,"Clone landing pages and funnels from SaaS builders (GoHighLevel, ClickFunnels, etc.) into standalone static HTML, then deploy to GitHub + Vercel. Covers extraction, reconstruction, and deployment.","S3YED\u002Fappie-kit","S3YED","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F62743867?v=4","01M6JBKBRRVP6KMS0VWZ27T3R6","01M6JBKBX0KG30284PW1DBYJT1",14,"MIT","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fcontent\u002Fsaas-funnel-cloning\u002FSKILL.md",[17,22,25,28],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000011","运维与部署",{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":29,"categoryName":30,"taxonomyType":31,"taxonomyTypeDesc":32},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53],"saas funnel cloning","saas","cloning","funnel","vercel","frontend-design","clone","standalone","web-design","max","ui-ux","html","frontend","landing","page","pipeline","ui","ux","deployment","design","2026-11-10 10:12:30",false,"---\nname: saas-funnel-cloning\ndescription: \"Clone landing pages and funnels from SaaS builders (GoHighLevel, ClickFunnels, etc.) into standalone static HTML, then deploy to GitHub + Vercel. Covers extraction, reconstruction, and deployment.\"\nversion: 1.2.0\nauthor: Ibrahim Ramzy (via Hermes Agent)\nlicense: MIT\nmetadata:\n  hermes:\n    tags: [funnel, cloning, gohighlevel, landing-page, vercel, github, deployment]\n    category: content\n    related_skills: [web-design-pipeline, frontend-design, ui-ux-pro-max, popular-web-designs, building-ai-websites-that-dont-look-ai]\n---\n\n# SaaS Funnel Cloning\n\nClone a landing page or funnel from a SaaS builder (GoHighLevel, ClickFunnels, etc.) into a standalone HTML\u002FCSS site and deploy it on GitHub + Vercel.\n\n## When to use\n\n- User gives you a URL to a GoHighLevel, ClickFunnels, or similar SaaS funnel preview\n- User wants a \"one-to-one clone\" as static HTML on their own domain\n- User wants to move away from the SaaS builder and iterate faster with voice\u002Fchat\n\n## Workflow\n\n### Step 1: Extract the page structure\n\nUse the browser tool to visit the preview URL:\n\n```\nbrowser_navigate(url)\n```\n\nFrom the snapshot, identify:\n- Layout structure (hero, sections, CTA, footer)\n- All headings, text content, and button labels\n- Image URLs from browser_get_images()\n- Fonts from Google Fonts links in the page\n- CSS custom properties \u002F design tokens (colours, font families)\n\nAlso extract the raw HTML source with curl for design token extraction:\n\n```\ncurl -sL '\u003CURL>' -o source.html\ngrep -E '\"\\-\\-(color|primary|secondary|headline|content|text-color|link-color)\"' source.html\n```\n\n### Step 2: Download key assets\n\nUse curl to download images from the CDN. Target the highest resolution available (r_1200 or higher). Save into `assets\u002F` directory.\n\n```\ncurl -sL '\u003CCDN_URL>' -o assets\u002F\u003Cname>.\u003Cext>\n```\n\nExpected assets:\n- logo.png (brand logo)\n- hero-bg.png (hero background)\n- ibrahim-hero.jpg (coach\u002Ftrainer photo)\n- favicon.jpg\n- testimonial-bg.webp (testimonial backgrounds)\n- feature-icon-*.png (feature section icons)\n- result-*.jpg (before\u002Fafter transformation photos)\n\n### Step 3: Research conversion principles (coaching\u002Ffitness funnels)\n\nIf the funnel is for a coaching, fitness, or info-product vertical, research Russell Brunson's conversion frameworks before building:\n\n- **DotCom Secrets**: Value Ladder (5 rungs), Hook-Story-Offer, The Secret Formula\n- **Expert Secrets**: Attractive Character, Soap Opera Sequence, Application\u002FQuiz Funnel\n- **Traffic Secrets**: Traffic temperature determines the funnel entry page\n\nKey principles to apply:\n- One CTA per page -- eliminate navigation links that distract\n- Hook-Story-Offer -- every section leads with emotion, proves with logic, closes with a CTA\n- Price anchoring -- show the value wall (e.g. 2,497 value) before the price (e.g. 497)\n- Real scarcity -- \"I only take 10 new clients per month\" not \"limited time offer\"\n- Keep the loop open -- thank you pages say \"being reviewed \u002F being customised\" not \"confirmed\"\n- Qualify with questions -- 4-7 questions that both engage AND segment\n\nIf the user has given you an Exa API key and asked you to use Exa, search for design references and conversion research via Exa before building.\n\n### Step 4: Reconstruct as static HTML\n\nBuild a single `index.html` with embedded CSS. Key requirements:\n\n- **Pixel-fidelity first**: match the original layout, spacing, and hierarchy. Do not redesign unless the user explicitly asks for it.\n- **Extract design tokens from the original**: CSS custom properties, font stacks, colours. Use them in your CSS.\n- **Responsive**: mobile-first with breakpoints at 768px and 480px.\n- **Local assets**: reference downloaded images from `assets\u002F` directory.\n- **No JS frameworks**: pure HTML + CSS. Use vanilla JS only for interactive elements (FAQ toggles, smooth scroll).\n- **Three-column pricing grid** if it exists, with a featured\u002Fmost-popular card that scales up slightly.\n- **Scarcity elements**: spots counters, waitlist counts, urgency badges.\n- **Social proof**: testimonial cards, result quotes, before\u002Fafter metrics.\n- **Footer disclaimers**: Facebook\u002FTrademark disclaimers from the original.\n- **Multi-step qualification form**: When the user wants an \"Apply Now\" flow, build a 5-step modal questionnaire:\n  - Step 1: Goal (fat loss \u002F muscle \u002F health \u002F confidence)\n  - Step 2: Commitment level (days per week)\n  - Step 3: Biggest struggle\n  - Step 4: Self-rated commitment (1-10 -- scores hot leads)\n  - Step 5: Contact details (name, email, phone)\n  - Progress bar across all steps\n  - Shake animation if an option is missed\n  - Store form data in localStorage for tracking\n- **Thank you page**: After form submission, show a thank you page that:\n  - Says \"being reviewed\" not \"confirmed\" (keeps the loop open)\n  - Has an urgency box (\"your spot is not locked in yet\")\n  - Includes a calendar\u002Fbooking embed placeholder\n- **Funnel breakdown**: When the user asks for a \"breakdown of where to go\", deliver a structured map of every page\u002Fsection and what happens at each step.\n\n### Step 5: Set up Git and push to GitHub\n\n```\ncd \u002Fpath\u002Fto\u002Fproject\ngit init\ngit add -A\ngit commit -m \"Initial commit: cloned funnel\"\n\n# Create GitHub repo\ngh repo create \u003Crepo-name> --private --description \"\u003Cdescription>\"\n\n# If you get \"could not read Username\" when pushing:\n#   1. Run: gh auth setup-git\n#   2. Or set remote URL with embedded token:\n#      git remote set-url origin https:\u002F\u002F\u003Cusername>:\u003Ctoken>@github.com\u002F\u003Cusername>\u002F\u003Crepo>.git\n#   3. Then push normally\n\ngit remote add origin https:\u002F\u002Fgithub.com\u002F\u003Cusername>\u002F\u003Crepo>.git\ngit branch -M main\ngit push -u origin main\n\n# IMPORTANT: After the push, clean the remote URL to remove the token:\ngit remote set-url origin https:\u002F\u002Fgithub.com\u002F\u003Cusername>\u002F\u003Crepo>.git\n```\n\n### Step 6: Deploy to Vercel\n\nRead the Vercel token from the .env file:\n\n```\nnpm i -g vercel\n\n# Deploy using the env-stored token\nvercel --token \"$(grep '^VERCEL_API_TOKEN=' ~\u002F.hermes\u002F.env | tail -1 | sed 's\u002F.*=\u002F\u002F')\" --yes --prod\n\n# The deploy URL appears in the output.\n# Clean aliased URL will be: https:\u002F\u002F\u003Cproject>.vercel.app\n# Verify it's live:\ncurl -s -o \u002Fdev\u002Fnull -w \"%{http_code}\" https:\u002F\u002F\u003Cproject>.vercel.app\u002F\n```\n\nDeliver the URL to the user with a summary of what was done.\n\n## Pitfalls\n\n- **Auth first**: Check GitHub auth status before trying to push. If not authenticated, give the user a device code. CRITICAL: `gh auth login` in PTY mode TIMES OUT while waiting for the user. Do not use pty mode for device code login. Instead use Option A or B below:\n  - Option A: Have the user paste a GitHub personal access token, then use `echo \"\u003Ctoken>\" | gh auth login --with-token`\n  - Option B: Run `gh auth login` in background mode (not pty) and give the user the device code. Wait for them to confirm before continuing.\n- **git push authentication**: Even after `gh auth login`, git push may fail with \"could not read Username\". Fix: `gh auth setup-git` OR set the remote URL with the token embedded, then clean it after push.\n- **Expired preview URLs**: SaaS preview links may expire. If the page comes back empty, re-navigate or ask for a fresh link.\n- **GHL-generated HTML is bloated** (2.9MB+). Do not try to clean up the raw HTML. Extract the structure manually from the browser snapshot and rebuild from scratch.\n- **Em dashes in the original content**: The user hates em dashes. Replace them with commas or periods during reconstruction.\n- **Video embeds**: GHL previews may not show the actual video URL. Use a placeholder player element and flag it for the user to replace.\n- **Testimonials section may have a \"Load More\" button**: In the clone, show all testimonials upfront (better UX for standalone pages).\n- **PEP 668 (pip install fails)**: If pip refuses to install packages globally, create a venv first: `python3 -m venv \u002Fpath\u002Fto\u002Fvenv && \u002Fpath\u002Fto\u002Fvenv\u002Fbin\u002Fpip install \u003Cpackage>`\n\n## Related skills\n\n- `creative\u002Fhumanizer` -- with `references\u002Fclient-preferences.md` for user-specific communication rules\n- `web-design-pipeline` -- for full animated multi-page builds\n- `frontend-design` -- for design-first approach\n- `ui-ux-pro-max` -- for design system decisions\n- `github-auth` -- for GitHub auth setup","# SaaS Funnel Cloning\n\nClone a landing page or funnel from a SaaS builder (GoHighLevel, ClickFunnels, etc.) into a standalone HTML\u002FCSS site and deploy it on GitHub + Vercel.\n\n## When to use\n\n- User gives you a URL to a GoHighLevel, ClickFunnels, or similar SaaS funnel preview\n- User wants a \"one-to-one clone\" as static HTML on their own domain\n- User wants to move away from the SaaS builder and iterate faster with voice\u002Fchat\n\n## Workflow\n\n### Step 1: Extract the page structure\n\nUse the browser tool to visit the preview URL:\n\n```\nbrowser_navigate(url)\n```\n\nFrom the snapshot, identify:\n- Layout structure (hero, sections, CTA, footer)\n- All headings, text content, and button labels\n- Image URLs from browser_get_images()\n- Fonts from Google Fonts links in the page\n- CSS custom properties \u002F design tokens (colours, font families)\n\nAlso extract the raw HTML source with curl for design token extraction:\n\n```\ncurl -sL '\u003CURL>' -o source.html\ngrep -E '\"\\-\\-(color|primary|secondary|headline|content|text-color|link-color)\"' source.html\n```\n\n### Step 2: Download key assets\n\nUse curl to download images from the CDN. Target the highest resolution available (r_1200 or higher). Save into `assets\u002F` directory.\n\n```\ncurl -sL '\u003CCDN_URL>' -o assets\u002F\u003Cname>.\u003Cext>\n```\n\nExpected assets:\n- logo.png (brand logo)\n- hero-bg.png (hero background)\n- ibrahim-hero.jpg (coach\u002Ftrainer photo)\n- favicon.jpg\n- testimonial-bg.webp (testimonial backgrounds)\n- feature-icon-*.png (feature section icons)\n- result-*.jpg (before\u002Fafter transformation photos)\n\n### Step 3: Research conversion principles (coaching\u002Ffitness funnels)\n\nIf the funnel is for a coaching, fitness, or info-product vertical, research Russell Brunson's conversion frameworks before building:\n\n- **DotCom Secrets**: Value Ladder (5 rungs), Hook-Story-Offer, The Secret Formula\n- **Expert Secrets**: Attractive Character, Soap Opera Sequence, Application\u002FQuiz Funnel\n- **Traffic Secrets**: Traffic temperature determines the funnel entry page\n\nKey principles to apply:\n- One CTA per page -- eliminate navigation links that distract\n- Hook-Story-Offer -- every section leads with emotion, proves with logic, closes with a CTA\n- Price anchoring -- show the value wall (e.g. 2,497 value) before the price (e.g. 497)\n- Real scarcity -- \"I only take 10 new clients per month\" not \"limited time offer\"\n- Keep the loop open -- thank you pages say \"being reviewed \u002F being customised\" not \"confirmed\"\n- Qualify with questions -- 4-7 questions that both engage AND segment\n\nIf the user has given you an Exa API key and asked you to use Exa, search for design references and conversion research via Exa before building.\n\n### Step 4: Reconstruct as static HTML\n\nBuild a single `index.html` with embedded CSS. Key requirements:\n\n- **Pixel-fidelity first**: match the original layout, spacing, and hierarchy. Do not redesign unless the user explicitly asks for it.\n- **Extract design tokens from the original**: CSS custom properties, font stacks, colours. Use them in your CSS.\n- **Responsive**: mobile-first with breakpoints at 768px and 480px.\n- **Local assets**: reference downloaded images from `assets\u002F` directory.\n- **No JS frameworks**: pure HTML + CSS. Use vanilla JS only for interactive elements (FAQ toggles, smooth scroll).\n- **Three-column pricing grid** if it exists, with a featured\u002Fmost-popular card that scales up slightly.\n- **Scarcity elements**: spots counters, waitlist counts, urgency badges.\n- **Social proof**: testimonial cards, result quotes, before\u002Fafter metrics.\n- **Footer disclaimers**: Facebook\u002FTrademark disclaimers from the original.\n- **Multi-step qualification form**: When the user wants an \"Apply Now\" flow, build a 5-step modal questionnaire:\n  - Step 1: Goal (fat loss \u002F muscle \u002F health \u002F confidence)\n  - Step 2: Commitment level (days per week)\n  - Step 3: Biggest struggle\n  - Step 4: Self-rated commitment (1-10 -- scores hot leads)\n  - Step 5: Contact details (name, email, phone)\n  - Progress bar across all steps\n  - Shake animation if an option is missed\n  - Store form data in localStorage for tracking\n- **Thank you page**: After form submission, show a thank you page that:\n  - Says \"being reviewed\" not \"confirmed\" (keeps the loop open)\n  - Has an urgency box (\"your spot is not locked in yet\")\n  - Includes a calendar\u002Fbooking embed placeholder\n- **Funnel breakdown**: When the user asks for a \"breakdown of where to go\", deliver a structured map of every page\u002Fsection and what happens at each step.\n\n### Step 5: Set up Git and push to GitHub\n\n```\ncd \u002Fpath\u002Fto\u002Fproject\ngit init\ngit add -A\ngit commit -m \"Initial commit: cloned funnel\"\n\n# Create GitHub repo\ngh repo create \u003Crepo-name> --private --description \"\u003Cdescription>\"\n\n# If you get \"could not read Username\" when pushing:\n#   1. Run: gh auth setup-git\n#   2. Or set remote URL with embedded token:\n#      git remote set-url origin https:\u002F\u002F\u003Cusername>:\u003Ctoken>@github.com\u002F\u003Cusername>\u002F\u003Crepo>.git\n#   3. Then push normally\n\ngit remote add origin https:\u002F\u002Fgithub.com\u002F\u003Cusername>\u002F\u003Crepo>.git\ngit branch -M main\ngit push -u origin main\n\n# IMPORTANT: After the push, clean the remote URL to remove the token:\ngit remote set-url origin https:\u002F\u002Fgithub.com\u002F\u003Cusername>\u002F\u003Crepo>.git\n```\n\n### Step 6: Deploy to Vercel\n\nRead the Vercel token from the .env file:\n\n```\nnpm i -g vercel\n\n# Deploy using the env-stored token\nvercel --token \"$(grep '^VERCEL_API_TOKEN=' ~\u002F.hermes\u002F.env | tail -1 | sed 's\u002F.*=\u002F\u002F')\" --yes --prod\n\n# The deploy URL appears in the output.\n# Clean aliased URL will be: https:\u002F\u002F\u003Cproject>.vercel.app\n# Verify it's live:\ncurl -s -o \u002Fdev\u002Fnull -w \"%{http_code}\" https:\u002F\u002F\u003Cproject>.vercel.app\u002F\n```\n\nDeliver the URL to the user with a summary of what was done.\n\n## Pitfalls\n\n- **Auth first**: Check GitHub auth status before trying to push. If not authenticated, give the user a device code. CRITICAL: `gh auth login` in PTY mode TIMES OUT while waiting for the user. Do not use pty mode for device code login. Instead use Option A or B below:\n  - Option A: Have the user paste a GitHub personal access token, then use `echo \"\u003Ctoken>\" | gh auth login --with-token`\n  - Option B: Run `gh auth login` in background mode (not pty) and give the user the device code. Wait for them to confirm before continuing.\n- **git push authentication**: Even after `gh auth login`, git push may fail with \"could not read Username\". Fix: `gh auth setup-git` OR set the remote URL with the token embedded, then clean it after push.\n- **Expired preview URLs**: SaaS preview links may expire. If the page comes back empty, re-navigate or ask for a fresh link.\n- **GHL-generated HTML is bloated** (2.9MB+). Do not try to clean up the raw HTML. Extract the structure manually from the browser snapshot and rebuild from scratch.\n- **Em dashes in the original content**: The user hates em dashes. Replace them with commas or periods during reconstruction.\n- **Video embeds**: GHL previews may not show the actual video URL. Use a placeholder player element and flag it for the user to replace.\n- **Testimonials section may have a \"Load More\" button**: In the clone, show all testimonials upfront (better UX for standalone pages).\n- **PEP 668 (pip install fails)**: If pip refuses to install packages globally, create a venv first: `python3 -m venv \u002Fpath\u002Fto\u002Fvenv && \u002Fpath\u002Fto\u002Fvenv\u002Fbin\u002Fpip install \u003Cpackage>`\n\n## Related skills\n\n- `creative\u002Fhumanizer` -- with `references\u002Fclient-preferences.md` for user-specific communication rules\n- `web-design-pipeline` -- for full animated multi-page builds\n- `frontend-design` -- for design-first approach\n- `ui-ux-pro-max` -- for design system decisions\n- `github-auth` -- for GitHub auth setup",{"name":5,"author":59,"license":14,"version":60,"metadata":61,"description":7},"Ibrahim Ramzy (via Hermes Agent)","1.2.0",{"hermes":62},{"tags":63,"category":67,"related_skills":68},[37,36,64,65,38,66,52],"gohighlevel","landing-page","github","content",[69,39,70,71,72],"web-design-pipeline","ui-ux-pro-max","popular-web-designs","building-ai-websites-that-dont-look-ai","master","8ec37df6d71fb664ea19d32c079e7d3ff931a8e0","skills\u002Fcontent\u002Fsaas-funnel-cloning",3,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit","https:\u002F\u002Fweblyfe.ai","https:\u002F\u002Fgithub.com\u002FS3YED","2026-08-27 01:54:02",{"source":8,"skillName":5,"commands":82,"prompt":92,"zipAvailable":93},[83,86,89],{"tool":84,"command":85},"npx","npx skills add S3YED\u002Fappie-kit --skill saas-funnel-cloning",{"tool":87,"command":88},"bunx","bunx skills add S3YED\u002Fappie-kit --skill saas-funnel-cloning",{"tool":90,"command":91},"pnpm","pnpm dlx skills add S3YED\u002Fappie-kit --skill saas-funnel-cloning","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fcontent\u002Fsaas-funnel-cloning\u002FSKILL.md",true,[95],{"path":96,"resourceType":97,"resourceTypeDesc":98,"sizeBytes":99,"sourceHtmlUrl":100},"references\u002Fcreed-code-funnel-2025-06-17.md","REFERENCE","参考文档",3467,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fcontent\u002Fsaas-funnel-cloning\u002Freferences\u002Fcreed-code-funnel-2025-06-17.md",[102,134,163,189,216,241],{"skillNo":103,"name":104,"nameZh":6,"description":105,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":106,"categories":107,"keywords":115,"publishedAt":54},"01M6JFD4M6N4DSGC7TXEJ5R3J2","ai-music","AI music generation and audio tools: HeartMuLa lyrics-to-music generation, songwriting craft (+ Suno prompts), and audio spectrogram\u002Ffeature visualization.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fwethlete\u002Fai-music\u002FSKILL.md",[108,111,114],{"categoryNo":109,"categoryName":110,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000013","分析与可视化",{"categoryNo":112,"categoryName":113,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000016","图像与多媒体",{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},[116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133],"music","ai music","humanizer","visualization","Tools","Audio","hermes","hermes agent","songwriting","suno","lyrics","prompts","heartmula","craft","generation","feature","ai music generation","music generation",{"skillNo":135,"name":136,"nameZh":6,"description":137,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":138,"categories":139,"keywords":144,"publishedAt":54},"01M6JFCZE4XNFQFMNZDHKHT5V5","agentic-webdesign-design-system-ingestion","Use v0 Design Systems 2.0, Bolt Design System Agents, or Lovable to generate production UI from a client's real design system components — not generic Tailwind. Use when building a client website where brand consistency matters.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fweb-design\u002Fagentic-webdesign-design-system-ingestion\u002FSKILL.md",[140,143],{"categoryNo":141,"categoryName":142,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":29,"categoryName":30,"taxonomyType":31,"taxonomyTypeDesc":32},[53,145,146,147,148,149,150,151,152,153,154,50,155,156,157,158,159,160,161,162],"agentic","design system","system","ingestion","webdesign","agentic webdesign design system ingestion","components","generate","design systems","website","Tailwind","bolt","lovable","v0","design-system","wed","design system components","appie",{"skillNo":164,"name":165,"nameZh":6,"description":166,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":167,"categories":168,"keywords":171,"publishedAt":54},"01M6JFCVPX3913CFAS6QQJ33ZB","agentic-webdesign-agent-elements","Use 21st.dev Agent Elements — 25 shadcn\u002Fui components purpose-built for AI agent UIs. Tool cards (Bash, Edit, Search, Plan, Subagent, MCP), chat, input, streaming. Open source, shadcn-registry install, no runtime lock-in.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fweb-design\u002Fagentic-webdesign-agent-elements\u002FSKILL.md",[169,170],{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":29,"categoryName":30,"taxonomyType":31,"taxonomyTypeDesc":32},[145,172,149,173,174,175,151,176,177,178,179,180,181,182,183,184,185,186,187,188],"elements","agentic webdesign agent elements","MCP","ai agent","registry","search","streaming","open source","open","Bash","plan","subagent","edit","install","input","lock","source",{"skillNo":190,"name":191,"nameZh":6,"description":192,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":193,"categories":194,"keywords":197,"publishedAt":54},"01M6JFCQC7H65M9QJ6TRE71BS1","vercel-deployment","Deploy static sites and frontends to Vercel — handles both CLI and REST API paths, including the CLI token sanitization workaround.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fsoftware-development\u002Fvercel-deployment\u002FSKILL.md",[195,196],{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},[52,198,38,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215],"vercel deployment","macos","cli","linux","windows","deploy","vercel deploy","REST","api","site","deploy to vercel","token","rest api","host","sites","paths","sanitization","static site",{"skillNo":217,"name":218,"nameZh":6,"description":219,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":220,"categories":221,"keywords":223,"publishedAt":54},"01M6JFCM4SMTXBM5A01BK2YQG1","software-quality-workflows","Umbrella workflow for TDD, debugging, code simplification, spikes, pre-commit review, and debugger-assisted investigation.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fsoftware-development\u002Fsoftware-quality-workflows\u002FSKILL.md",[222],{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},[224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240],"workflows","quality","software","software quality workflows","review","tdd","workflow","commit","debugging","code","debugger","pre-commit","investigation","code simplification","user","simplification","for",{"skillNo":242,"name":243,"nameZh":6,"description":244,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":245,"categories":246,"keywords":252,"publishedAt":54},"01M6JFCGD0M6CEATY01W7YN6DB","react-component-refactoring","Safely refactor large React components into smaller, maintainable pieces using proven patterns","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fsoftware-development\u002Freact-component-refactoring\u002FSKILL.md",[247,250,251],{"categoryNo":248,"categoryName":249,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000007","代码审查",{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},[253,254,255,256,257,258,46,259,199,260,261,151,262,202,263,233,264,265,266,267],"react","component","refactoring","component refactoring","react component","react component refactoring","writing","safe","typescript","react components","modular","refactor","simplify","patterns","test-driven-development"]