[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6JEXCSY0RX65V6N0WCNCTCD":3,"skill-same:01M6JEXCSY0RX65V6N0WCNCTCD":89},{"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":67,"commitSha":68,"skillDirectory":69,"forksCount":70,"repositoryHtmlUrl":71,"repositoryHomepageUrl":72,"ownerHtmlUrl":73,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":74,"install":75,"resources":88},"01M6JEXCSY0RX65V6N0WCNCTCD","weblyfe-landing-page",null,"Build a complete conversion-optimized landing page for Weblyfe clients. Full pipeline from competitor audit through SEO analysis, brand style guide, Next.js build, and Vercel deploy. Use when building or rebuilding any client website from scratch.","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\u002Fmisc\u002Fweblyfe-landing-page\u002FSKILL.md",[17,22,25,28],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000011","运维与部署","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000019","营销推广",{"categoryNo":29,"categoryName":30,"taxonomyType":31,"taxonomyTypeDesc":32},"01JBSEEDCAT000000000000035","市场营销","PROFESSION","适用职业",[34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53],"weblyfe landing page","weblyfe","page","landing","landing page","rebuild","for","seo analysis","brand style","complete","full","next","website","conversion","guide","brand","analysis","seo","pipeline","audit","2026-11-10 10:12:30",false,"---\nname: weblyfe-landing-page\ndescription: Build a complete conversion-optimized landing page for Weblyfe clients. Full pipeline from competitor audit through SEO analysis, brand style guide, Next.js build, and Vercel deploy. Use when building or rebuilding any client website from scratch.\nversion: 1.0.0\ntriggers:\n  - build a website\n  - rebuild a landing page\n  - new client website\n  - modernize website\n  - landing page for\n  - website for client\n---\n\n# Weblyfe Landing Page Builder\n\nComplete pipeline for building modern, conversion-optimized landing pages for Weblyfe clients.\n\n## Seyed's Design Preferences (NON-NEGOTIABLE)\n\nThese preferences were established through direct feedback and corrections:\n\n1. **Light theme by default** — white backgrounds, NOT dark mode. Dark is only for specific clients who explicitly request it.\n2. **Use the client's original brand colors** — extract from existing site or logo. Don't invent new palettes unless the client wants a rebrand.\n3. **Lots of images** — Unsplash photography throughout. Hero images, service cards, image strips, location photos. A bike shop needs bike photos. Be generous.\n4. **Rich animations** — Framer Motion everywhere: scroll reveals, parallax, floating badges, counter animations, image clip-path reveals, hover lifts. Make it feel alive but not childish.\n5. **Brand style guide FIRST** — Before writing any code, produce a style guide with: color system, typography, imagery direction, UI components, animation philosophy, section architecture. Get the vibe right before building.\n6. **NO emoji overuse** — Emojis only in chat, never in production code. Use SVG icons (Lucide, Heroicons).\n7. **Clean, minimal aesthetic** (\"exaggerated minimalism\") — white space is not wasted space.\n8. **German clients need German precision** — conservative but modern. Think Porsche\u002FAudi design language, not TikTok trends.\n\n## Full Pipeline\n\n### Phase 0: Class the site correctly\nBefore designing, decide whether this is:\n- a straight service landing page,\n- a local business site,\n- or a personal brand \u002F creator ecosystem.\n\nIf it is a personal brand or creator site, do not force it into a single-page lead-gen shape. Map the authority ecosystem first.\n\nReference notes: `references\u002Fpersonal-brand-site-research.md`\n\nExisting-project review example: `references\u002Fnathan-nuyts-project-review.md` covers a real Weblyfe personal-brand repo audit, including handoff-first reading, doc\u002Fcode conflict handling, canonical-domain gotchas, placeholder asset detection, legal-link checks, and stubbed lead-capture risks.\n\nDutch law-firm proposal\u002Fsite pattern: `references\u002Fdutch-law-firm-website-pattern.md` covers NOvA\u002FKVK\u002FRechtspraak discovery, controlled confidential CTAs, legal trust\u002Fcompliance content, small-firm positioning, imagery, and SEO page maps for advocaat websites.\n\nLaw-firm client call synthesis: `references\u002Flaw-firm-client-call-synthesis.md` covers how to turn a lawyer call transcript into sanitized project notes, sharper positioning, hero copy, asset asks, and honest Notion sync status without leaking private relationship context.\n\nDrive assets and responsive QA example: `references\u002Fdrive-assets-and-mobile-qa.md` covers public Google Drive asset extraction, validating downloaded files, choosing personal-brand imagery, mobile hardening, and honest Playwright verification reporting.\n\nLegal services website playbook: `references\u002Flegal-services-website-playbook.md` covers Dutch lawyer\u002Flaw-firm research, NOvA\u002FKVK-style trust checks, confidential conversion, compliance-aware CTAs, SEO page mapping, and premium legal visual direction.\n\nLaw-firm branding and growth-system pattern: `references\u002Flaw-firm-branding-and-growth-system.md` covers when a legal website expands into brand identity, logo\u002Fmoodboard process, asset briefs, optional intake\u002Fonboarding pages, blog\u002FSEO engine, Google Business Profile, and domain strategy.\n\nLaw-firm client call synthesis and branding workflow: `references\u002Flaw-firm-client-call-synthesis.md` covers how to turn long legal-client calls into sanitized project docs, Weblyfe's branding-first process, logo system exploration, asset briefs, intake\u002Fsystem pages, blog approval workflows, and Google Business Profile quick wins.\n\nLaw-firm branding process: `references\u002Flaw-firm-branding-process.md` covers moving from legal website audit into full Weblyfe-style branding: brand audit, moodboard directions, logo routes, brand system, asset brief, reviewed SEO content engine, and optional intake\u002Fsystem pages.\n\n### Phase 1: Audit (30% of effort)\n```\n1. Browser-navigate to the current site\n2. Browser-vision for visual analysis (colors, fonts, layout, flaws)\n3. Browser-console for technical SEO: title, meta, H1 count, schema, OG tags, alt text\n4. Run UI\u002FUX Pro Max design system:\n   python3 ~\u002F.hermes\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"\u003Cindustry> \u003Ckeywords>\" --design-system -p \"Client Name\"\n5. Compile audit: what's broken, what's missing, what's ugly\n```\n\n### Phase 2: Style Guide (15% of effort)\n```\nWrite STYLE_GUIDE.md in project root with:\n- Brand positioning + target audience segments\n- Color system (primary, neutral, accent palettes)\n- Typography (why this font, scale)\n- Imagery direction (Unsplash categories, treatments)\n- UI components (buttons, cards, layout specs)\n- Animation philosophy + easing curves\n- Section architecture (ordered list of sections)\n```\n\n### Phase 3: Build (40% of effort)\n\n#### PRD handoff implementation loop\nWhen the user says to scrutinize a PRD and start design\u002Fdevelopment in an existing repo:\n1. Read the PRD, project instructions, current git status, and the homepage\u002Fpage components before editing.\n2. Treat existing uncommitted work as in-progress handoff work. Audit it against the PRD instead of replacing it blindly.\n3. Identify concrete PRD gaps first: section order, visual direction, copy\u002Fproof claims, CTAs\u002Froutes, accessibility, responsive behavior, and build health.\n4. Apply minimal targeted edits that move the page closer to the PRD's direction while preserving route contracts and client content.\n5. Verify with `npm run build` and, for visual work, browser\u002Fmobile review. If editing or build is blocked by permissions, report the blocker and the exact remaining issues, not a vague plan.\n\n#### Reference-site header cleanup loop\nWhen the user asks to make a site header clean like a reference site:\n1. Load project docs first: handoff, README, PRDs, cached Notion\u002FDrive notes, and any reference-site notes. These often define the intended nav architecture better than the current component does.\n2. Inspect the current header component and global tokens before editing. Header fixes are usually small component\u002Ftoken changes, not a full page redesign.\n3. Reduce visible choices to the conversion architecture. For personal-brand hubs, keep the core routes and one primary CTA. Remove secondary\u002Fanchor links from desktop nav unless the docs explicitly require them.\n4. Match the reference qualities, not just colors: compact height, generous whitespace, light type weights, quiet borders, subtle glass\u002Fblur, one clear CTA, and simple mobile drawer.\n5. If the reference URL cannot be fetched, do not claim visual certainty. Use checked-in docs and cached context, then state the limitation and the exact files changed or blocked.\n\n```\n1. npx create-next-app@latest \u003Cproject> --typescript --tailwind --eslint --app --src-dir --import-alias \"@\u002F*\" --no-turbopack\n2. npm install framer-motion lucide-react\n3. Write layout.tsx with:\n   - Google Font (DM Sans for German clients, Instrument Sans\u002FPlus Jakarta Sans for modern)\n   - Full SEO metadata (title, description, keywords, openGraph, canonical)\n   - Schema.org structured data (LocalBusiness, Organization, Service, etc.)\n4. Write globals.css with:\n   - CSS custom properties for all colors\n   - Custom scrollbar styling\n   - Animation keyframes (float, draw-line)\n   - Selection colors matching brand\n5. Write page.tsx as single-page app with ALL sections:\n   - NAVIGATION: sticky, white bg with backdrop-blur, brand color logo\n   - HERO: 50\u002F50 split (text left, image right), floating badges, stat counters\n   - IMAGE STRIP: 5+ images in horizontal flex\n   - SERVICES: 3-column cards with image headers, icon + tags\n   - ABOUT: 2-column (image + overlapping smaller image left, text + checklist right)\n   - IMAGE BREAKER: full-width photo with gradient overlay + slogan\n   - LOCATIONS: 2-column cards with map placeholder and opening hours\n   - TRUST: 4-column icons with guarantees\n   - CTA: full-width brand-color background with white text + phone + email\n   - FOOTER: dark\u002Fminimal, Impressum link\n   - IMPRESSUM: hidden section at bottom\n```\n\n### Phase 4: Deploy (15% of effort)\n```\n1. npm run build (fix any TS errors -- common: as const on ease arrays)\n2. gh repo create \u003Cproject> --public --source . --remote origin --push\n3. npx vercel --prod --yes --token $VERCEL_TOKEN\n4. curl verify: 200 OK\n5. Send live URL to Seyed\n```\n\n## Animation Patterns (Copy-Paste Ready)\n\n### Scroll-triggered fade-up\n```tsx\nfunction FadeUp({ children, delay = 0, className = \"\" }) {\n  const ref = useRef(null);\n  const inView = useInView(ref, { once: true, margin: \"-80px\" });\n  return (\n    \u003Cmotion.div ref={ref}\n      initial={{ opacity: 0, y: 40 }}\n      animate={inView ? { opacity: 1, y: 0 } : {}}\n      transition={{ duration: 0.7, delay, ease: [0.19, 1, 0.22, 1] }}>\n      {children}\n    \u003C\u002Fmotion.div>\n  );\n}\n```\n\n### Counter animation\n```tsx\nfunction useCountUp(end: number, duration = 2, startCounting: boolean) {\n  const [count, setCount] = useState(0);\n  useEffect(() => {\n    if (!startCounting) return;\n    let start = 0;\n    const step = (end \u002F (duration * 60)) | 0 || 1;\n    const timer = setInterval(() => {\n      start += step;\n      if (start >= end) { setCount(end); clearInterval(timer); }\n      else { setCount(start); }\n    }, 16);\n    return () => clearInterval(timer);\n  }, [end, duration, startCounting]);\n  return count;\n}\n```\n\n### Image clip-path reveal\n```tsx\nfunction ImageReveal({ src, alt, className }) {\n  const ref = useRef(null);\n  const inView = useInView(ref, { once: true, margin: \"-60px\" });\n  return (\n    \u003Cdiv ref={ref} className={`overflow-hidden rounded-2xl ${className}`}>\n      \u003Cmotion.img src={src} alt={alt}\n        initial={{ scale: 1.15 }}\n        animate={inView ? { scale: 1 } : {}}\n        transition={{ duration: 1.2, ease: [0.19, 1, 0.22, 1] }}\n        className=\"w-full h-full object-cover\" loading=\"lazy\" \u002F>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n### Floating badge\n```tsx\n\u003Cmotion.div\n  animate={{ y: [0, -8, 0] }}\n  transition={{ duration: 4, repeat: Infinity, ease: \"easeInOut\" }}\n  className=\"absolute -bottom-6 -left-6 bg-white rounded-2xl shadow-xl p-4\">\n  ...\n\u003C\u002Fmotion.div>\n```\n\n### Hero parallax\n```tsx\nconst { scrollY } = useScroll();\nconst heroScale = useTransform(scrollY, [0, 600], [1, 1.08]);\n\u002F\u002F Apply style={{ scale: heroScale }} to hero image container\n```\n\n## SEO Checklist (Must Include)\n\n- [ ] H1 with primary keyword (exactly 1 per page)\n- [ ] Meta description with keyword + CTA\n- [ ] OG title, description (NOT template text)\n- [ ] Canonical URL\n- [ ] Schema.org structured data (LocalBusiness, Service, etc.)\n- [ ] All images have descriptive alt text\n- [ ] Keywords meta tag with 5-8 relevant terms\n- [ ] Heading hierarchy: H1, H2, H3 (no skips)\n- [ ] Viewport meta tag present\n\n## Scroll-Video Hero Pattern\n\nFor client sites where you want a cinematic \"transformative\" reveal (interior design empty→finished, renovation before→after, construction timelapse), use a canvas-scroll scrub video:\n\n```html\n\u003Csection class=\"hero\" style=\"height:300vh;background:#0d0a08\">\n  \u003Cdiv class=\"hero-sticky\" style=\"position:sticky;top:0;height:100vh;overflow:hidden\">\n    \u003Ccanvas id=\"heroCanvas\">\u003C\u002Fcanvas>\n    \u003Cdiv class=\"hero-overlay\">\u003C!-- title, tagline, scroll hint -->\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n```\n\nScroll logic (vanilla JS, no framework needed):\n```js\nconst canvas = document.getElementById('heroCanvas');\nconst ctx = canvas.getContext('2d');\nconst video = document.createElement('video');\nvideo.preload = 'auto'; video.muted = true; video.playsInline = true;\nvideo.src = 'videos\u002Ftransformation.mp4'; \u002F\u002F MUST be H.264, not MPEG4\nlet fps = 30, totalFrames, ready = false;\n\nvideo.addEventListener('loadedmetadata', () => {\n  ready = true; totalFrames = Math.round(video.duration * fps);\n});\n\nfunction resize() {\n  const rect = canvas.parentElement.getBoundingClientRect();\n  canvas.width = rect.width; canvas.height = rect.height;\n}\n\nfunction render() {\n  if (!ready) return;\n  ctx.clearRect(0, 0, canvas.width, canvas.height);\n  const scale = Math.max(canvas.width \u002F video.videoWidth, canvas.height \u002F video.videoHeight);\n  const sw = video.videoWidth * scale, sh = video.videoHeight * scale;\n  ctx.drawImage(video, (canvas.width-sw)\u002F2, (canvas.height-sh)\u002F2, sw, sh);\n}\n\nfunction onScroll() {\n  const hero = document.getElementById('hero');\n  const scrolled = -hero.getBoundingClientRect().top;\n  const scrollable = hero.offsetHeight - window.innerHeight;\n  const progress = Math.max(0, Math.min(1, scrolled \u002F scrollable));\n  const targetFrame = Math.round(progress * totalFrames);\n  const targetTime = targetFrame \u002F fps;\n  if (ready && Math.abs(video.currentTime - targetTime) > 0.02) {\n    video.currentTime = targetTime;\n  }\n}\nwindow.addEventListener('scroll', onScroll, { passive: true });\nvideo.addEventListener('seeked', () => { if (ready) render(); });\nwindow.addEventListener('resize', resize);\nvideo.load();\n```\n\n**Frame-accurate tips:**\n- Use `Math.round(progress * totalFrames)` to map scroll to discrete frames — prevents redundant seeks\n- Smooth overlay fade: calculate `Math.max(0, 1 - Math.max(0, progress - 0.05) \u002F 0.2)` and apply to `overlay.style.opacity`\n- Scroll hint text: something specific like \"Scroll om de transformatie te zien\" or \"Scroll om interieur te stijlen\"\n- Progress bar: pair with `progressBar.style.width = (progress * 100) + '%'`\n\n**Video codec check (critical):**\n```bash\nffprobe -v error -show_entries stream=codec_name -of default=noprint_wrappers=1 video.mp4\n# Expect: h264 — if mpeg4, transcode:\nffmpeg -i input.mp4 -c:v libx264 -crf 23 -movflags +faststart -c:a aac output.mp4\n```\n\n## Standard Landing Page Components (Copy-Paste Ready)\n\n### Lucide Icons\nLoad from CDN: `\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Flucide@latest\">\u003C\u002Fscript>`\nAdd icons: `\u003Ci data-lucide=\"icon-name\">\u003C\u002Fi>` — init with `lucide.createIcons()` after DOM ready.\nReplace all emoji in production UI with Lucide equivalents (armchair, truck, gift, camera, phone, map-pin, clock, arrow-right, chevron-down, menu, message-circle, instagram, facebook).\n\n### WhatsApp Floating Bubble\n```html\n\u003Cstyle>\n.wa-button {\n  position:fixed; bottom:1.5rem; right:1.5rem; z-index:100;\n  width:56px; height:56px; border-radius:50%;\n  background:#25d366; border:none; cursor:pointer;\n  display:flex; align-items:center; justify-content:center;\n  box-shadow:0 4px 16px rgba(37,211,102,.35);\n  animation:waPulse 2s ease-in-out infinite;\n}\n@keyframes waPulse { 0%,100% { box-shadow:0 4px 16px rgba(37,211,102,.35); } 50% { box-shadow:0 4px 24px rgba(37,211,102,.6); } }\n\u003C\u002Fstyle>\n\u003Cbutton class=\"wa-button\" onclick=\"window.open('https:\u002F\u002Fwa.me\u002F31XXXXXXXXX','_blank')\" aria-label=\"WhatsApp\">\n  \u003Ci data-lucide=\"message-circle\" style=\"width:26px;height:26px;color:#fff\">\u003C\u002Fi>\n\u003C\u002Fbutton>\n```\nAdd a tooltip div that fades after 5s: \"Hoe kunnen we helpen?\"\n\n### FAQ Accordion\n```html\n\u003Cdiv class=\"faq-item\" style=\"border-bottom:1px solid #ece8e2;cursor:pointer\">\n  \u003Cdiv class=\"faq-q\" onclick=\"this.parentElement.classList.toggle('open')\"\n       style=\"display:flex;justify-content:space-between;align-items:center;padding:1.25rem 0\">\n    \u003Cspan>Vraag\u003C\u002Fspan>\n    \u003Ci data-lucide=\"chevron-down\" style=\"width:18px;height:18px;transition:transform .3s\">\u003C\u002Fi>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"faq-a\" style=\"max-height:0;overflow:hidden;transition:max-height .4s;font-size:.9rem;color:#6a5a4a\">\n    \u003Cp style=\"padding-bottom:1.25rem\">Antwoord\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\nCSS: `.faq-item.open .faq-a { max-height: 300px; }` and `.faq-item.open .faq-q .lucide { transform: rotate(180deg); }`\n\n### Custom Scrollbar\n```css\n::-webkit-scrollbar { width: 6px; }\n::-webkit-scrollbar-track { background: #f8f6f3; }\n::-webkit-scrollbar-thumb { background: #c4b5a5; border-radius: 3px; }\n::-webkit-scrollbar-thumb:hover { background: #a09080; }\n```\n\n## Pitfalls\n\n1. **Don't use dark theme unless asked** — Seyed corrected this. White\u002Flight is default.\n2. **Don't invent new colors** — use the client's existing brand palette.\n3. **Don't skimp on images** — Seyed asked for \"dramatically more pictures.\" Use 10+ Unsplash images.\n4. **Framer Motion ease arrays need `as const`** in Next.js 16: `ease: [0.19, 1, 0.22, 1] as const`\n5. **Never deploy with an expired Vercel token** — refresh first.\n6. **Always verify the deploy with curl** before reporting success.\n7. **Check Next.js version** — conventions change between major versions. Use `cat node_modules\u002Fnext\u002Fpackage.json | python3 -c \"import sys,json; print(json.load(sys.stdin)['version'])\"`\n8. **For creator\u002Fpersonal brand sites, don't flatten everything into one offer** — preserve multiple pathways, proof layers, and the social identity from Instagram.\n9. **Separate template content from true brand assets** — template scaffolds like Olivia can hide the real brand direction if you don't audit carefully.\n10. **Preserve approved hero\u002Fheader imagery** — when Seyed says the hero\u002Fheader image was good, treat it as locked. Improvements from Drive assets should enrich supporting visuals, brand\u002Fproof sections, and responsive presentation unless he explicitly asks to replace the hero.\n11. **Vercel token gets masked in terminal** — `$VERCEL_TOKEN` and token values containing `vcp_` get masked to `***` in Hermes terminal output. The token IS stored correctly in `.env.secrets` but you can't use it directly in shell commands. Workaround: read via Python from the file and pass to `subprocess.run(['npx','vercel','--token',token,'--yes','--prod'], cwd='\u002Fpath')` instead of inline terminal commands.\n12. **Dark background sites use glass morphism, NOT pure white** — Seyed rejected pure white boxes on dark backgrounds as \"te fel\". Use `bg-white\u002F30 backdrop-blur-md border-white\u002F30` with dark green text. See `references\u002Fapple-glass-morphism.md` for the full pattern.\n13. **Always verify the Vercel team scope** — weblyfe.ai was locked because Vercel Authentication was enabled. Also, the Vercel team scope changed from `weblyfe` to `weblyfe-team-s-projects` — check `vercel teams ls` before deploying.","# Weblyfe Landing Page Builder\n\nComplete pipeline for building modern, conversion-optimized landing pages for Weblyfe clients.\n\n## Seyed's Design Preferences (NON-NEGOTIABLE)\n\nThese preferences were established through direct feedback and corrections:\n\n1. **Light theme by default** — white backgrounds, NOT dark mode. Dark is only for specific clients who explicitly request it.\n2. **Use the client's original brand colors** — extract from existing site or logo. Don't invent new palettes unless the client wants a rebrand.\n3. **Lots of images** — Unsplash photography throughout. Hero images, service cards, image strips, location photos. A bike shop needs bike photos. Be generous.\n4. **Rich animations** — Framer Motion everywhere: scroll reveals, parallax, floating badges, counter animations, image clip-path reveals, hover lifts. Make it feel alive but not childish.\n5. **Brand style guide FIRST** — Before writing any code, produce a style guide with: color system, typography, imagery direction, UI components, animation philosophy, section architecture. Get the vibe right before building.\n6. **NO emoji overuse** — Emojis only in chat, never in production code. Use SVG icons (Lucide, Heroicons).\n7. **Clean, minimal aesthetic** (\"exaggerated minimalism\") — white space is not wasted space.\n8. **German clients need German precision** — conservative but modern. Think Porsche\u002FAudi design language, not TikTok trends.\n\n## Full Pipeline\n\n### Phase 0: Class the site correctly\nBefore designing, decide whether this is:\n- a straight service landing page,\n- a local business site,\n- or a personal brand \u002F creator ecosystem.\n\nIf it is a personal brand or creator site, do not force it into a single-page lead-gen shape. Map the authority ecosystem first.\n\nReference notes: `references\u002Fpersonal-brand-site-research.md`\n\nExisting-project review example: `references\u002Fnathan-nuyts-project-review.md` covers a real Weblyfe personal-brand repo audit, including handoff-first reading, doc\u002Fcode conflict handling, canonical-domain gotchas, placeholder asset detection, legal-link checks, and stubbed lead-capture risks.\n\nDutch law-firm proposal\u002Fsite pattern: `references\u002Fdutch-law-firm-website-pattern.md` covers NOvA\u002FKVK\u002FRechtspraak discovery, controlled confidential CTAs, legal trust\u002Fcompliance content, small-firm positioning, imagery, and SEO page maps for advocaat websites.\n\nLaw-firm client call synthesis: `references\u002Flaw-firm-client-call-synthesis.md` covers how to turn a lawyer call transcript into sanitized project notes, sharper positioning, hero copy, asset asks, and honest Notion sync status without leaking private relationship context.\n\nDrive assets and responsive QA example: `references\u002Fdrive-assets-and-mobile-qa.md` covers public Google Drive asset extraction, validating downloaded files, choosing personal-brand imagery, mobile hardening, and honest Playwright verification reporting.\n\nLegal services website playbook: `references\u002Flegal-services-website-playbook.md` covers Dutch lawyer\u002Flaw-firm research, NOvA\u002FKVK-style trust checks, confidential conversion, compliance-aware CTAs, SEO page mapping, and premium legal visual direction.\n\nLaw-firm branding and growth-system pattern: `references\u002Flaw-firm-branding-and-growth-system.md` covers when a legal website expands into brand identity, logo\u002Fmoodboard process, asset briefs, optional intake\u002Fonboarding pages, blog\u002FSEO engine, Google Business Profile, and domain strategy.\n\nLaw-firm client call synthesis and branding workflow: `references\u002Flaw-firm-client-call-synthesis.md` covers how to turn long legal-client calls into sanitized project docs, Weblyfe's branding-first process, logo system exploration, asset briefs, intake\u002Fsystem pages, blog approval workflows, and Google Business Profile quick wins.\n\nLaw-firm branding process: `references\u002Flaw-firm-branding-process.md` covers moving from legal website audit into full Weblyfe-style branding: brand audit, moodboard directions, logo routes, brand system, asset brief, reviewed SEO content engine, and optional intake\u002Fsystem pages.\n\n### Phase 1: Audit (30% of effort)\n```\n1. Browser-navigate to the current site\n2. Browser-vision for visual analysis (colors, fonts, layout, flaws)\n3. Browser-console for technical SEO: title, meta, H1 count, schema, OG tags, alt text\n4. Run UI\u002FUX Pro Max design system:\n   python3 ~\u002F.hermes\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"\u003Cindustry> \u003Ckeywords>\" --design-system -p \"Client Name\"\n5. Compile audit: what's broken, what's missing, what's ugly\n```\n\n### Phase 2: Style Guide (15% of effort)\n```\nWrite STYLE_GUIDE.md in project root with:\n- Brand positioning + target audience segments\n- Color system (primary, neutral, accent palettes)\n- Typography (why this font, scale)\n- Imagery direction (Unsplash categories, treatments)\n- UI components (buttons, cards, layout specs)\n- Animation philosophy + easing curves\n- Section architecture (ordered list of sections)\n```\n\n### Phase 3: Build (40% of effort)\n\n#### PRD handoff implementation loop\nWhen the user says to scrutinize a PRD and start design\u002Fdevelopment in an existing repo:\n1. Read the PRD, project instructions, current git status, and the homepage\u002Fpage components before editing.\n2. Treat existing uncommitted work as in-progress handoff work. Audit it against the PRD instead of replacing it blindly.\n3. Identify concrete PRD gaps first: section order, visual direction, copy\u002Fproof claims, CTAs\u002Froutes, accessibility, responsive behavior, and build health.\n4. Apply minimal targeted edits that move the page closer to the PRD's direction while preserving route contracts and client content.\n5. Verify with `npm run build` and, for visual work, browser\u002Fmobile review. If editing or build is blocked by permissions, report the blocker and the exact remaining issues, not a vague plan.\n\n#### Reference-site header cleanup loop\nWhen the user asks to make a site header clean like a reference site:\n1. Load project docs first: handoff, README, PRDs, cached Notion\u002FDrive notes, and any reference-site notes. These often define the intended nav architecture better than the current component does.\n2. Inspect the current header component and global tokens before editing. Header fixes are usually small component\u002Ftoken changes, not a full page redesign.\n3. Reduce visible choices to the conversion architecture. For personal-brand hubs, keep the core routes and one primary CTA. Remove secondary\u002Fanchor links from desktop nav unless the docs explicitly require them.\n4. Match the reference qualities, not just colors: compact height, generous whitespace, light type weights, quiet borders, subtle glass\u002Fblur, one clear CTA, and simple mobile drawer.\n5. If the reference URL cannot be fetched, do not claim visual certainty. Use checked-in docs and cached context, then state the limitation and the exact files changed or blocked.\n\n```\n1. npx create-next-app@latest \u003Cproject> --typescript --tailwind --eslint --app --src-dir --import-alias \"@\u002F*\" --no-turbopack\n2. npm install framer-motion lucide-react\n3. Write layout.tsx with:\n   - Google Font (DM Sans for German clients, Instrument Sans\u002FPlus Jakarta Sans for modern)\n   - Full SEO metadata (title, description, keywords, openGraph, canonical)\n   - Schema.org structured data (LocalBusiness, Organization, Service, etc.)\n4. Write globals.css with:\n   - CSS custom properties for all colors\n   - Custom scrollbar styling\n   - Animation keyframes (float, draw-line)\n   - Selection colors matching brand\n5. Write page.tsx as single-page app with ALL sections:\n   - NAVIGATION: sticky, white bg with backdrop-blur, brand color logo\n   - HERO: 50\u002F50 split (text left, image right), floating badges, stat counters\n   - IMAGE STRIP: 5+ images in horizontal flex\n   - SERVICES: 3-column cards with image headers, icon + tags\n   - ABOUT: 2-column (image + overlapping smaller image left, text + checklist right)\n   - IMAGE BREAKER: full-width photo with gradient overlay + slogan\n   - LOCATIONS: 2-column cards with map placeholder and opening hours\n   - TRUST: 4-column icons with guarantees\n   - CTA: full-width brand-color background with white text + phone + email\n   - FOOTER: dark\u002Fminimal, Impressum link\n   - IMPRESSUM: hidden section at bottom\n```\n\n### Phase 4: Deploy (15% of effort)\n```\n1. npm run build (fix any TS errors -- common: as const on ease arrays)\n2. gh repo create \u003Cproject> --public --source . --remote origin --push\n3. npx vercel --prod --yes --token $VERCEL_TOKEN\n4. curl verify: 200 OK\n5. Send live URL to Seyed\n```\n\n## Animation Patterns (Copy-Paste Ready)\n\n### Scroll-triggered fade-up\n```tsx\nfunction FadeUp({ children, delay = 0, className = \"\" }) {\n  const ref = useRef(null);\n  const inView = useInView(ref, { once: true, margin: \"-80px\" });\n  return (\n    \u003Cmotion.div ref={ref}\n      initial={{ opacity: 0, y: 40 }}\n      animate={inView ? { opacity: 1, y: 0 } : {}}\n      transition={{ duration: 0.7, delay, ease: [0.19, 1, 0.22, 1] }}>\n      {children}\n    \u003C\u002Fmotion.div>\n  );\n}\n```\n\n### Counter animation\n```tsx\nfunction useCountUp(end: number, duration = 2, startCounting: boolean) {\n  const [count, setCount] = useState(0);\n  useEffect(() => {\n    if (!startCounting) return;\n    let start = 0;\n    const step = (end \u002F (duration * 60)) | 0 || 1;\n    const timer = setInterval(() => {\n      start += step;\n      if (start >= end) { setCount(end); clearInterval(timer); }\n      else { setCount(start); }\n    }, 16);\n    return () => clearInterval(timer);\n  }, [end, duration, startCounting]);\n  return count;\n}\n```\n\n### Image clip-path reveal\n```tsx\nfunction ImageReveal({ src, alt, className }) {\n  const ref = useRef(null);\n  const inView = useInView(ref, { once: true, margin: \"-60px\" });\n  return (\n    \u003Cdiv ref={ref} className={`overflow-hidden rounded-2xl ${className}`}>\n      \u003Cmotion.img src={src} alt={alt}\n        initial={{ scale: 1.15 }}\n        animate={inView ? { scale: 1 } : {}}\n        transition={{ duration: 1.2, ease: [0.19, 1, 0.22, 1] }}\n        className=\"w-full h-full object-cover\" loading=\"lazy\" \u002F>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n### Floating badge\n```tsx\n\u003Cmotion.div\n  animate={{ y: [0, -8, 0] }}\n  transition={{ duration: 4, repeat: Infinity, ease: \"easeInOut\" }}\n  className=\"absolute -bottom-6 -left-6 bg-white rounded-2xl shadow-xl p-4\">\n  ...\n\u003C\u002Fmotion.div>\n```\n\n### Hero parallax\n```tsx\nconst { scrollY } = useScroll();\nconst heroScale = useTransform(scrollY, [0, 600], [1, 1.08]);\n\u002F\u002F Apply style={{ scale: heroScale }} to hero image container\n```\n\n## SEO Checklist (Must Include)\n\n- [ ] H1 with primary keyword (exactly 1 per page)\n- [ ] Meta description with keyword + CTA\n- [ ] OG title, description (NOT template text)\n- [ ] Canonical URL\n- [ ] Schema.org structured data (LocalBusiness, Service, etc.)\n- [ ] All images have descriptive alt text\n- [ ] Keywords meta tag with 5-8 relevant terms\n- [ ] Heading hierarchy: H1, H2, H3 (no skips)\n- [ ] Viewport meta tag present\n\n## Scroll-Video Hero Pattern\n\nFor client sites where you want a cinematic \"transformative\" reveal (interior design empty→finished, renovation before→after, construction timelapse), use a canvas-scroll scrub video:\n\n```html\n\u003Csection class=\"hero\" style=\"height:300vh;background:#0d0a08\">\n  \u003Cdiv class=\"hero-sticky\" style=\"position:sticky;top:0;height:100vh;overflow:hidden\">\n    \u003Ccanvas id=\"heroCanvas\">\u003C\u002Fcanvas>\n    \u003Cdiv class=\"hero-overlay\">\u003C!-- title, tagline, scroll hint -->\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n```\n\nScroll logic (vanilla JS, no framework needed):\n```js\nconst canvas = document.getElementById('heroCanvas');\nconst ctx = canvas.getContext('2d');\nconst video = document.createElement('video');\nvideo.preload = 'auto'; video.muted = true; video.playsInline = true;\nvideo.src = 'videos\u002Ftransformation.mp4'; \u002F\u002F MUST be H.264, not MPEG4\nlet fps = 30, totalFrames, ready = false;\n\nvideo.addEventListener('loadedmetadata', () => {\n  ready = true; totalFrames = Math.round(video.duration * fps);\n});\n\nfunction resize() {\n  const rect = canvas.parentElement.getBoundingClientRect();\n  canvas.width = rect.width; canvas.height = rect.height;\n}\n\nfunction render() {\n  if (!ready) return;\n  ctx.clearRect(0, 0, canvas.width, canvas.height);\n  const scale = Math.max(canvas.width \u002F video.videoWidth, canvas.height \u002F video.videoHeight);\n  const sw = video.videoWidth * scale, sh = video.videoHeight * scale;\n  ctx.drawImage(video, (canvas.width-sw)\u002F2, (canvas.height-sh)\u002F2, sw, sh);\n}\n\nfunction onScroll() {\n  const hero = document.getElementById('hero');\n  const scrolled = -hero.getBoundingClientRect().top;\n  const scrollable = hero.offsetHeight - window.innerHeight;\n  const progress = Math.max(0, Math.min(1, scrolled \u002F scrollable));\n  const targetFrame = Math.round(progress * totalFrames);\n  const targetTime = targetFrame \u002F fps;\n  if (ready && Math.abs(video.currentTime - targetTime) > 0.02) {\n    video.currentTime = targetTime;\n  }\n}\nwindow.addEventListener('scroll', onScroll, { passive: true });\nvideo.addEventListener('seeked', () => { if (ready) render(); });\nwindow.addEventListener('resize', resize);\nvideo.load();\n```\n\n**Frame-accurate tips:**\n- Use `Math.round(progress * totalFrames)` to map scroll to discrete frames — prevents redundant seeks\n- Smooth overlay fade: calculate `Math.max(0, 1 - Math.max(0, progress - 0.05) \u002F 0.2)` and apply to `overlay.style.opacity`\n- Scroll hint text: something specific like \"Scroll om de transformatie te zien\" or \"Scroll om interieur te stijlen\"\n- Progress bar: pair with `progressBar.style.width = (progress * 100) + '%'`\n\n**Video codec check (critical):**\n```bash\nffprobe -v error -show_entries stream=codec_name -of default=noprint_wrappers=1 video.mp4\n# Expect: h264 — if mpeg4, transcode:\nffmpeg -i input.mp4 -c:v libx264 -crf 23 -movflags +faststart -c:a aac output.mp4\n```\n\n## Standard Landing Page Components (Copy-Paste Ready)\n\n### Lucide Icons\nLoad from CDN: `\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Flucide@latest\">\u003C\u002Fscript>`\nAdd icons: `\u003Ci data-lucide=\"icon-name\">\u003C\u002Fi>` — init with `lucide.createIcons()` after DOM ready.\nReplace all emoji in production UI with Lucide equivalents (armchair, truck, gift, camera, phone, map-pin, clock, arrow-right, chevron-down, menu, message-circle, instagram, facebook).\n\n### WhatsApp Floating Bubble\n```html\n\u003Cstyle>\n.wa-button {\n  position:fixed; bottom:1.5rem; right:1.5rem; z-index:100;\n  width:56px; height:56px; border-radius:50%;\n  background:#25d366; border:none; cursor:pointer;\n  display:flex; align-items:center; justify-content:center;\n  box-shadow:0 4px 16px rgba(37,211,102,.35);\n  animation:waPulse 2s ease-in-out infinite;\n}\n@keyframes waPulse { 0%,100% { box-shadow:0 4px 16px rgba(37,211,102,.35); } 50% { box-shadow:0 4px 24px rgba(37,211,102,.6); } }\n\u003C\u002Fstyle>\n\u003Cbutton class=\"wa-button\" onclick=\"window.open('https:\u002F\u002Fwa.me\u002F31XXXXXXXXX','_blank')\" aria-label=\"WhatsApp\">\n  \u003Ci data-lucide=\"message-circle\" style=\"width:26px;height:26px;color:#fff\">\u003C\u002Fi>\n\u003C\u002Fbutton>\n```\nAdd a tooltip div that fades after 5s: \"Hoe kunnen we helpen?\"\n\n### FAQ Accordion\n```html\n\u003Cdiv class=\"faq-item\" style=\"border-bottom:1px solid #ece8e2;cursor:pointer\">\n  \u003Cdiv class=\"faq-q\" onclick=\"this.parentElement.classList.toggle('open')\"\n       style=\"display:flex;justify-content:space-between;align-items:center;padding:1.25rem 0\">\n    \u003Cspan>Vraag\u003C\u002Fspan>\n    \u003Ci data-lucide=\"chevron-down\" style=\"width:18px;height:18px;transition:transform .3s\">\u003C\u002Fi>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"faq-a\" style=\"max-height:0;overflow:hidden;transition:max-height .4s;font-size:.9rem;color:#6a5a4a\">\n    \u003Cp style=\"padding-bottom:1.25rem\">Antwoord\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\nCSS: `.faq-item.open .faq-a { max-height: 300px; }` and `.faq-item.open .faq-q .lucide { transform: rotate(180deg); }`\n\n### Custom Scrollbar\n```css\n::-webkit-scrollbar { width: 6px; }\n::-webkit-scrollbar-track { background: #f8f6f3; }\n::-webkit-scrollbar-thumb { background: #c4b5a5; border-radius: 3px; }\n::-webkit-scrollbar-thumb:hover { background: #a09080; }\n```\n\n## Pitfalls\n\n1. **Don't use dark theme unless asked** — Seyed corrected this. White\u002Flight is default.\n2. **Don't invent new colors** — use the client's existing brand palette.\n3. **Don't skimp on images** — Seyed asked for \"dramatically more pictures.\" Use 10+ Unsplash images.\n4. **Framer Motion ease arrays need `as const`** in Next.js 16: `ease: [0.19, 1, 0.22, 1] as const`\n5. **Never deploy with an expired Vercel token** — refresh first.\n6. **Always verify the deploy with curl** before reporting success.\n7. **Check Next.js version** — conventions change between major versions. Use `cat node_modules\u002Fnext\u002Fpackage.json | python3 -c \"import sys,json; print(json.load(sys.stdin)['version'])\"`\n8. **For creator\u002Fpersonal brand sites, don't flatten everything into one offer** — preserve multiple pathways, proof layers, and the social identity from Instagram.\n9. **Separate template content from true brand assets** — template scaffolds like Olivia can hide the real brand direction if you don't audit carefully.\n10. **Preserve approved hero\u002Fheader imagery** — when Seyed says the hero\u002Fheader image was good, treat it as locked. Improvements from Drive assets should enrich supporting visuals, brand\u002Fproof sections, and responsive presentation unless he explicitly asks to replace the hero.\n11. **Vercel token gets masked in terminal** — `$VERCEL_TOKEN` and token values containing `vcp_` get masked to `***` in Hermes terminal output. The token IS stored correctly in `.env.secrets` but you can't use it directly in shell commands. Workaround: read via Python from the file and pass to `subprocess.run(['npx','vercel','--token',token,'--yes','--prod'], cwd='\u002Fpath')` instead of inline terminal commands.\n12. **Dark background sites use glass morphism, NOT pure white** — Seyed rejected pure white boxes on dark backgrounds as \"te fel\". Use `bg-white\u002F30 backdrop-blur-md border-white\u002F30` with dark green text. See `references\u002Fapple-glass-morphism.md` for the full pattern.\n13. **Always verify the Vercel team scope** — weblyfe.ai was locked because Vercel Authentication was enabled. Also, the Vercel team scope changed from `weblyfe` to `weblyfe-team-s-projects` — check `vercel teams ls` before deploying.",{"name":5,"version":59,"triggers":60,"description":7},"1.0.0",[61,62,63,64,65,66],"build a website","rebuild a landing page","new client website","modernize website","landing page for","website for client","master","8ec37df6d71fb664ea19d32c079e7d3ff931a8e0","skills\u002Fmisc\u002Fweblyfe-landing-page",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":76,"prompt":86,"zipAvailable":87},[77,80,83],{"tool":78,"command":79},"npx","npx skills add S3YED\u002Fappie-kit --skill weblyfe-landing-page",{"tool":81,"command":82},"bunx","bunx skills add S3YED\u002Fappie-kit --skill weblyfe-landing-page",{"tool":84,"command":85},"pnpm","pnpm dlx skills add S3YED\u002Fappie-kit --skill weblyfe-landing-page","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fmisc\u002Fweblyfe-landing-page\u002FSKILL.md",true,[],[90,124,154,180,209,233],{"skillNo":91,"name":92,"nameZh":6,"description":93,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":94,"categories":95,"keywords":105,"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",[96,99,102],{"categoryNo":97,"categoryName":98,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000013","分析与可视化",{"categoryNo":100,"categoryName":101,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000016","图像与多媒体",{"categoryNo":103,"categoryName":104,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123],"music","ai music","humanizer","visualization","Tools","Audio","hermes","hermes agent","songwriting","suno","lyrics","prompts","heartmula","craft","generation","feature","ai music generation","music generation",{"skillNo":125,"name":126,"nameZh":6,"description":127,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":128,"categories":129,"keywords":134,"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",[130,131],{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":132,"categoryName":133,"taxonomyType":31,"taxonomyTypeDesc":32},"01JBSEEDCAT000000000000032","设计师",[135,136,137,138,139,140,141,142,143,144,46,145,146,147,148,149,150,151,152,153],"design","agentic","design system","system","ingestion","webdesign","agentic webdesign design system ingestion","components","generate","design systems","ui","Tailwind","bolt","lovable","v0","design-system","wed","design system components","appie",{"skillNo":155,"name":156,"nameZh":6,"description":157,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":158,"categories":159,"keywords":162,"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",[160,161],{"categoryNo":103,"categoryName":104,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":132,"categoryName":133,"taxonomyType":31,"taxonomyTypeDesc":32},[136,163,140,164,165,166,142,167,168,169,170,171,172,173,174,175,176,177,178,179],"elements","agentic webdesign agent elements","MCP","ai agent","registry","search","streaming","open source","open","Bash","plan","subagent","edit","install","input","lock","source",{"skillNo":181,"name":182,"nameZh":6,"description":183,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":184,"categories":185,"keywords":188,"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",[186,187],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":103,"categoryName":104,"taxonomyType":20,"taxonomyTypeDesc":21},[189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208],"deployment","vercel deployment","vercel","macos","cli","linux","windows","deploy","vercel deploy","REST","api","site","deploy to vercel","token","rest api","host","sites","paths","sanitization","static site",{"skillNo":210,"name":211,"nameZh":6,"description":212,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":213,"categories":214,"keywords":216,"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",[215],{"categoryNo":103,"categoryName":104,"taxonomyType":20,"taxonomyTypeDesc":21},[217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,40],"workflows","quality","software","software quality workflows","review","tdd","workflow","commit","debugging","code","debugger","pre-commit","investigation","code simplification","user","simplification",{"skillNo":234,"name":235,"nameZh":6,"description":236,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":237,"categories":238,"keywords":246,"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",[239,242,245],{"categoryNo":240,"categoryName":241,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000007","代码审查",{"categoryNo":243,"categoryName":244,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":103,"categoryName":104,"taxonomyType":20,"taxonomyTypeDesc":21},[247,248,249,250,251,252,253,254,192,255,256,142,257,195,258,226,259,260,261,262],"react","component","refactoring","component refactoring","react component","react component refactoring","frontend","writing","safe","typescript","react components","modular","refactor","simplify","patterns","test-driven-development"]