[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6JC59XZ0MKW18C2QNFXSMBM":3,"skill-same:01M6JC59XZ0MKW18C2QNFXSMBM":73},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":6,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":6,"sourceHtmlUrl":14,"categories":15,"keywords":26,"publishedAt":29,"linkOnly":30,"markdownContent":31,"markdownBody":31,"frontMatter":32,"refName":33,"commitSha":34,"skillDirectory":35,"forksCount":36,"repositoryHtmlUrl":37,"repositoryHomepageUrl":38,"ownerHtmlUrl":39,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":40,"install":41,"resources":54},"01M6JC59XZ0MKW18C2QNFXSMBM","design-mastery",null,"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\u002Fdesign-mastery\u002FSKILL.md",[16,21],{"categoryNo":17,"categoryName":18,"taxonomyType":19,"taxonomyTypeDesc":20},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":22,"categoryName":23,"taxonomyType":24,"taxonomyTypeDesc":25},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[27,28],"design","design mastery","2026-11-10 10:12:30",false,"# Design Mastery - Appie's Design Brain\n\n**Doel:** Dit is mijn interne kennis voor design. Raadplegen bij ELK design project.\n\n---\n\n## Core Principes (Refactoring UI)\n\n### 1. HIERARCHY IS EVERYTHING\n- **Niet alle elementen zijn gelijk** — Bepaal wat belangrijk is VOORDAT je begint\n- **Size isn't everything** — Gebruik ook weight, color, spacing voor hierarchy\n- **De-emphasize to emphasize** — Maak secundaire content zachter, niet primary louder\n- **Labels are a last resort** — Data kan vaak voor zichzelf spreken\n\n### 2. LAYOUT & SPACING\n- **Start with too much white space** — Makkelijker om weg te halen dan toe te voegen\n- **8pt spacing system:** 8, 16, 24, 32, 40, 48, 64, 80px\n- **You don't have to fill the whole screen** — Lege ruimte is geen verspilling\n- **Avoid ambiguous spacing** — Elementen moeten duidelijk gegroepeerd zijn\n\n### 3. TYPOGRAPHY\n- **Establish a type scale:** 12, 14, 16, 18, 20, 24, 30, 36, 48, 60px\n- **Max 2 fonts** — Meestal 1 is genoeg\n- **Line length: 45-75 characters** — Nooit volle breedte tekst\n- **Line-height:** 1.5 voor body, 1.2-1.3 voor headings\n- **Letter-spacing:** Tighter voor headings, normal voor body\n\n### 4. COLOR\n- **Ditch hex for HSL** — Makkelijker om variaties te maken\n- **Je hebt meer kleuren nodig dan je denkt** — 8-10 shades per kleur\n- **Greys don't have to be grey** — Voeg een tint toe (warm\u002Fcool)\n- **60-30-10 regel:** Primary 60%, Secondary 30%, Accent 10%\n- **Max 3 kleuren + neutrals**\n\n### 5. DEPTH & SHADOWS\n- **Emulate a light source** — Shadows gaan consistent één kant op\n- **Two-part shadows:** Een scherpe kleine + een zachte grote\n- **Overlap elements** — Creëert lagen en diepte\n- **Flat can have depth** — Gebruik kleur en spacing\n\n### 6. FINISHING TOUCHES\n- **Supercharge the defaults** — Bullets → icons, borders → shadows\n- **Add color with accent borders** — Top\u002Fleft borders in brand color\n- **Use fewer borders** — Shadows of spacing zijn vaak beter\n- **Empty states matter** — Nooit een lege pagina zonder guidance\n\n---\n\n## Laws of UX (Psychology)\n\n| Law | Betekenis | Toepassing |\n|-----|-----------|------------|\n| **Fitts's Law** | Grotere targets = sneller te raken | Buttons minstens 44px, belangrijke acties groot |\n| **Hick's Law** | Meer keuzes = langere beslissing | Limiteer opties, progressive disclosure |\n| **Jakob's Law** | Users verwachten dat je site werkt zoals andere sites | Volg conventies, innoveer niet onnodig |\n| **Miller's Law** | 7±2 items in werkgeheugen | Chunk informatie, max 5-7 menu items |\n| **Von Restorff** | Het ding dat anders is wordt onthouden | 1 CTA opvallend, rest subtiel |\n| **Aesthetic-Usability** | Mooie dingen voelen bruikbaarder | Investeer in visual polish |\n| **Doherty Threshold** | Responses \u003C400ms voelen instant | Animaties kort houden |\n\n---\n\n## Mijn Design Checklist\n\n### Voor ik begin:\n- [ ] Wat is de BELANGRIJKSTE actie op deze pagina?\n- [ ] Wie is de gebruiker en wat willen ze?\n- [ ] Welke bestaande sites doen dit goed? (referenties verzamelen)\n\n### Tijdens design:\n- [ ] Is de hierarchy duidelijk zonder kleur?\n- [ ] Zijn alle spacings uit mijn 8pt systeem?\n- [ ] Max 2 fonts, max 3 kleuren?\n- [ ] Geen orphaned elementen (alles duidelijk gegroepeerd)?\n- [ ] Line-length onder 75 characters?\n\n### Voor oplevering:\n- [ ] Empty states ontworpen?\n- [ ] Mobile responsive?\n- [ ] Contrast check (WCAG AA minimum)?\n- [ ] Hover\u002Ffocus states?\n- [ ] Loading states?\n\n---\n\n## Mijn Defaults\n\n### Spacing Scale (8pt)\n```\n4px   - icon padding, tight gaps\n8px   - small gaps, icon margins\n16px  - standard padding, gaps between related items\n24px  - section gaps within components\n32px  - gaps between components\n48px  - section padding\n64px  - large section gaps\n96px  - hero padding, major sections\n```\n\n### Typography Scale\n```\n12px  - captions, labels, meta\n14px  - secondary text, UI elements  \n16px  - body text (base)\n18px  - large body, intro text\n20px  - small headings, card titles\n24px  - H4, section titles\n30px  - H3\n36px  - H2\n48px  - H1, page titles\n60px  - Hero headlines\n```\n\n### Neutral Palette (Default)\n```\n50:  #fafafa  - backgrounds\n100: #f4f4f5 - subtle backgrounds\n200: #e4e4e7 - borders, dividers\n300: #d4d4d8 - disabled text\n400: #a1a1aa - placeholder text\n500: #71717a - secondary text\n600: #52525b - icons\n700: #3f3f46 - body text\n800: #27272a - headings\n900: #18181b - primary text\n950: #09090b - darkest\n```\n\n---\n\n## Sites om te studeren (mijn referenties)\n\n### Premium SaaS\n- **Linear.app** — Clean, dark, fast\n  - Dark mode als default = premium tech feel\n  - Hoge information density zonder chaos\n  - Subtle glows en gradients voor depth\n  - Consistent spacing, alles aligned\n  \n- **Vercel.com** — Gradients done right\n- **Stripe.com** — Typography master\n- **Notion.so** — Whitespace, simplicity\n\n### Landing Pages\n- **Apple.com** — Hero mastery\n- **Airbnb.com** — Trust building\n- **Figma.com** — Playful maar pro\n\n### Dark Mode Excellence\n- **Raycast.com** — Glow effects\n- **Arc.net** — Subtle gradients\n- **GitHub.com** — Readable dark\n\n---\n\n## Wanneer te gebruiken\n\n**ALTIJD** dit bestand lezen voordat ik een design maak.\n**NA** elk design: checklist doorlopen.\n**BIJ** feedback: principes gebruiken om te articuleren.\n\n---\n\n## Case Studies\n\n### SAFESITE Security (2026-03-05)\n**Project:** Elite security website for ex-military bodyguard\n**Result:** Complete website in one session, client \"wild\" over quality\n\n**What Worked:**\n- **Framer Motion animations** — Staggered reveals, parallax, scroll-triggered\n- **Iconography** — Lucide icons in service cards and stats made content scannable\n- **Dark theme + amber accents** — Premium, tactical feel\n- **Hero's Journey structure** — Story-driven sections that flow\n\n**Key Learnings:**\n1. **Word choice matters for targeting** — \"Podium\" targets performers, \"Voorgrond\" targets everyone\n2. **Team messaging builds trust** — Even solo operators benefit from showing a network\n3. **Corporate ≠ boring** — You can be professional AND have strong copy\n4. **Stats with icons** — \"24\u002F7 Surveillance\" with Eye icon > just text\n5. **Anchor nav + scroll-mt** — Use `scroll-mt-24` to offset for fixed headers\n\n**Reusable Patterns:**\n- `AnimatedSection` component for scroll-triggered reveals\n- `StaggerContainer` + `StaggerItem` for sequential animations\n- `ImageReveal` with clip-path for dramatic image entrances\n- `FloatingBadge` for overlapping stat callouts\n- `HoverCard` for service cards with lift effect\n\n**Client Feedback Applied:**\n- Broader audience (executives, not just artists)\n- More corporate\u002Fprofessional tone\n- Team section added\n- Name change based on brand direction\n\n---\n\n*Laatst bijgewerkt: 2026-03-05 11:37 PST*\n*Case study toegevoegd: SAFESITE Security*\n",{},"master","8ec37df6d71fb664ea19d32c079e7d3ff931a8e0","skills\u002Fcontent\u002Fdesign-mastery",3,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit","https:\u002F\u002Fweblyfe.ai","https:\u002F\u002Fgithub.com\u002FS3YED","2026-08-27 01:54:02",{"source":7,"skillName":5,"commands":42,"prompt":52,"zipAvailable":53},[43,46,49],{"tool":44,"command":45},"npx","npx skills add S3YED\u002Fappie-kit --skill design-mastery",{"tool":47,"command":48},"bunx","bunx skills add S3YED\u002Fappie-kit --skill design-mastery",{"tool":50,"command":51},"pnpm","pnpm dlx skills add S3YED\u002Fappie-kit --skill design-mastery","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fcontent\u002Fdesign-mastery\u002FSKILL.md",true,[55,61,65,69],{"path":56,"resourceType":57,"resourceTypeDesc":58,"sizeBytes":59,"sourceHtmlUrl":60},"AWWWARDS-PATTERNS.md","REFERENCE","参考文档",3457,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fcontent\u002Fdesign-mastery\u002FAWWWARDS-PATTERNS.md",{"path":62,"resourceType":57,"resourceTypeDesc":58,"sizeBytes":63,"sourceHtmlUrl":64},"DEEP-KNOWLEDGE.md",7728,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fcontent\u002Fdesign-mastery\u002FDEEP-KNOWLEDGE.md",{"path":66,"resourceType":57,"resourceTypeDesc":58,"sizeBytes":67,"sourceHtmlUrl":68},"HEROS-JOURNEY.md",5429,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fcontent\u002Fdesign-mastery\u002FHEROS-JOURNEY.md",{"path":70,"resourceType":57,"resourceTypeDesc":58,"sizeBytes":71,"sourceHtmlUrl":72},"WEBLYFE-ANALYSIS.md",4118,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fcontent\u002Fdesign-mastery\u002FWEBLYFE-ANALYSIS.md",[74,108,136,162,193,218],{"skillNo":75,"name":76,"nameZh":6,"description":77,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":6,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":6,"sourceHtmlUrl":78,"categories":79,"keywords":89,"publishedAt":29},"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",[80,83,86],{"categoryNo":81,"categoryName":82,"taxonomyType":19,"taxonomyTypeDesc":20},"01JBSEEDCAT000000000000013","分析与可视化",{"categoryNo":84,"categoryName":85,"taxonomyType":19,"taxonomyTypeDesc":20},"01JBSEEDCAT000000000000016","图像与多媒体",{"categoryNo":87,"categoryName":88,"taxonomyType":19,"taxonomyTypeDesc":20},"01JBSEEDCAT000000000000023","Skill与智能体开发",[90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107],"music","ai music","humanizer","visualization","Tools","Audio","hermes","hermes agent","songwriting","suno","lyrics","prompts","heartmula","craft","generation","feature","ai music generation","music generation",{"skillNo":109,"name":110,"nameZh":6,"description":111,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":6,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":6,"sourceHtmlUrl":112,"categories":113,"keywords":116,"publishedAt":29},"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",[114,115],{"categoryNo":17,"categoryName":18,"taxonomyType":19,"taxonomyTypeDesc":20},{"categoryNo":22,"categoryName":23,"taxonomyType":24,"taxonomyTypeDesc":25},[27,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135],"agentic","design system","system","ingestion","webdesign","agentic webdesign design system ingestion","components","generate","design systems","website","ui","Tailwind","bolt","lovable","v0","design-system","wed","design system components","appie",{"skillNo":137,"name":138,"nameZh":6,"description":139,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":6,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":6,"sourceHtmlUrl":140,"categories":141,"keywords":144,"publishedAt":29},"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",[142,143],{"categoryNo":87,"categoryName":88,"taxonomyType":19,"taxonomyTypeDesc":20},{"categoryNo":22,"categoryName":23,"taxonomyType":24,"taxonomyTypeDesc":25},[117,145,121,146,147,148,123,149,150,151,152,153,154,155,156,157,158,159,160,161],"elements","agentic webdesign agent elements","MCP","ai agent","registry","search","streaming","open source","open","Bash","plan","subagent","edit","install","input","lock","source",{"skillNo":163,"name":164,"nameZh":6,"description":165,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":6,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":6,"sourceHtmlUrl":166,"categories":167,"keywords":172,"publishedAt":29},"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",[168,171],{"categoryNo":169,"categoryName":170,"taxonomyType":19,"taxonomyTypeDesc":20},"01JBSEEDCAT000000000000011","运维与部署",{"categoryNo":87,"categoryName":88,"taxonomyType":19,"taxonomyTypeDesc":20},[173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192],"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":194,"name":195,"nameZh":6,"description":196,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":6,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":6,"sourceHtmlUrl":197,"categories":198,"keywords":200,"publishedAt":29},"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",[199],{"categoryNo":87,"categoryName":88,"taxonomyType":19,"taxonomyTypeDesc":20},[201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217],"workflows","quality","software","software quality workflows","review","tdd","workflow","commit","debugging","code","debugger","pre-commit","investigation","code simplification","user","simplification","for",{"skillNo":219,"name":220,"nameZh":6,"description":221,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":6,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":6,"sourceHtmlUrl":222,"categories":223,"keywords":231,"publishedAt":29},"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",[224,227,230],{"categoryNo":225,"categoryName":226,"taxonomyType":19,"taxonomyTypeDesc":20},"01JBSEEDCAT000000000000007","代码审查",{"categoryNo":228,"categoryName":229,"taxonomyType":19,"taxonomyTypeDesc":20},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":87,"categoryName":88,"taxonomyType":19,"taxonomyTypeDesc":20},[232,233,234,235,236,237,238,239,176,240,241,123,242,179,243,210,244,245,246,247],"react","component","refactoring","component refactoring","react component","react component refactoring","frontend","writing","safe","typescript","react components","modular","refactor","simplify","patterns","test-driven-development"]