[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6EGRYYN2D5AAFHZVX3B035P":3,"skill-same:01M6EGRYYN2D5AAFHZVX3B035P":62},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":30,"publishedAt":35,"linkOnly":36,"markdownContent":37,"markdownBody":37,"frontMatter":38,"refName":39,"commitSha":40,"skillDirectory":41,"forksCount":42,"repositoryHtmlUrl":43,"repositoryHomepageUrl":44,"ownerHtmlUrl":45,"ownerBlogUrl":6,"ownerDescription":46,"updatedAt":47,"install":48,"resources":61},"01M6EGRYYN2D5AAFHZVX3B035P","frontend-design-masterclass",null,"ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",66,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faaaronmiller\u002Ffrontend-design-masterclass\u002Ffrontend-design-masterclass\u002FSKILL.md",[17,22,25],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":26,"categoryName":27,"taxonomyType":28,"taxonomyTypeDesc":29},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[31,32,33,34],"frontend","design","frontend design","frontend design masterclass","2026-11-10 10:12:30",false,"# Frontend Design Masterclass v2.1\n\nBuild interfaces that resonate, not just render. This skill enforces bold, intentional\ndesign with a modern high-performance stack. Every pixel must justify its existence.\n\n## 1. Core Stack\n\n- **Framework**: SvelteKit 5 with Runes (`$state`, `$derived`, `$effect`)\n- **Runtime**: Bun (server, packages)\n- **Backend\u002FAPI**: Hono (edge-first routes, middleware)\n- **UI Primitives**: shadcn-svelte (headless, fully customizable). Override ALL defaults.\n- **Charts**: LayerChart (built on Layer Cake, powers shadcn-svelte charts)\n- **Animation**: Svelte Motion (`@humanspeak\u002Fsvelte-motion`) for complex orchestration.\n  Built-in `svelte\u002Ftransition` and `svelte\u002Fanimate` for standard motion. CSS keyframes\n  for simple loops.\n- **Mermaid**: `beautiful-mermaid` for themed SVG rendering with Shiki compatibility\n- **Styling**: Tailwind CSS v4, extended with CSS custom properties\n- **Testing**: Playwright for visual regression\n- **Assets**: Nano Banana for generative imagery and textures\n- **Deployment**: `@sveltejs\u002Fadapter-static` for static, `@sveltejs\u002Fadapter-vercel` for SSR\n\n## 2. Intent Identification (Pre-Resource)\n\nBefore loading references, classify the request across three dimensions. This shapes\nevery subsequent design decision.\n\n### A. Product Type\nIdentify what is being built. Each product type implies style, color, and layout norms.\n\n| Product Category | Recommended Styles | Color Direction |\n|---|---|---|\n| SaaS \u002F B2B \u002F Productivity | Swiss Grid, Flat + Glassmorphism | Trust blue + accent contrast |\n| E-commerce \u002F Retail | Vibrant Block, Feature-Rich Showcase | Brand primary + success green |\n| E-commerce Luxury | Liquid Glass, Cinematic | Dark neutrals + gold\u002Fchampagne accent |\n| Fintech \u002F Crypto | Data-Dense, Dark Mode OLED | Deep navy\u002Fcharcoal + neon accent |\n| Healthcare \u002F Wellness | Organic Flow, Soft UI | Soft teal\u002Fsage + warm neutral |\n| Creative \u002F Portfolio | Neo-Brutalist, Kinetic Typography | High-contrast + one bold accent |\n| Gaming \u002F Entertainment | Cyberpunk, HUD\u002FSci-Fi | Deep dark + neon multi-accent |\n| Education \u002F Docs | Editorial Broadsheet, Minimal | Warm paper + ink hierarchy |\n| AI \u002F ML Platform | Aurora UI, Motion-Driven | Gradient primary + dark surface |\n| Dashboard \u002F Analytics | Bento Grid, Data-Dense | Neutral surface + semantic data colors |\n\nUse this table as a starting compass, not a constraint. Always customize.\n\n### B. Style Intent\nDetermine the aesthetic target from context cues, explicit request, or product type.\nSee `references\u002Flanding-pages.md` Section 3 for 8 timeless styles with full specs.\n\n### C. Audience and Context\nConsider who uses this and where. Enterprise audiences tolerate density; consumer\naudiences need breathing room. Mobile-first changes everything about touch targets,\ntypography scale, and animation intensity.\n\n## 3. Resource Loading Protocol\n\nAfter identifying intent, scan the request for trigger keywords. Load matching\nreference files from `references\u002F` to access deep implementation patterns.\n\n### Landing Pages and Hero Sections\n**Triggers**: \"landing page\", \"hero\", \"above the fold\", \"homepage\", \"site title\",\n\"headline\", \"CTA\", \"call to action\", \"conversion\", \"first impression\"\n**Load**: `references\u002Flanding-pages.md`\n**Provides**: Hero section anatomy, 8 timeless landing page styles (Apple Keynote,\nEditorial Broadsheet, Geometric Playground, Cinematic Immersive, Swiss Grid,\nNeo-Brutalist, Organic Flow, Retro Terminal), visual flow patterns (Z\u002FF\u002FGolden\u002FDiagonal),\nconversion architecture, mobile-first hero strategy, code patterns.\n\n### Typography and Font Selection\n**Triggers**: \"font\", \"typography\", \"typeface\", \"heading\", \"text style\", \"font pairing\",\n\"type scale\", \"letter spacing\", \"line height\", \"readable\", \"display font\"\n**Load**: `references\u002Ftypography.md`\n**Provides**: Display\u002Fbody\u002Fmono font catalogs with pairing recommendations, type scale\nconstruction (mathematical ratios), responsive typography with `clamp()`, variable fonts,\nfont loading and performance, typographic details (tracking, hanging punctuation, optical\nalignment), the readability checklist.\n\n### Color System and Theming\n**Triggers**: \"color\", \"palette\", \"theme\", \"dark mode\", \"light mode\", \"accent\",\n\"color scheme\", \"brand colors\", \"contrast\", \"hue\", \"saturation\"\n**Load**: `references\u002Fcolor-system.md`\n**Provides**: Structured 3-group palette architecture (Base Tones, Primary Tones,\nAccent Tones), color theory harmony models, palette generation workflow, light theme\nconstruction, dark theme construction (independent rules), theme selector with bonus\nthemes (warm\u002Fcool\u002Fmono\u002Fhigh-contrast variants), semantic color tokens, CSS custom\nproperty system, WCAG contrast compliance.\n\n### Imagery, Textures, and Backgrounds\n**Triggers**: \"image\", \"background\", \"texture\", \"photo\", \"illustration\", \"dithering\",\n\"overlay\", \"parallax background\", \"hero image\", \"Nano Banana\", \"duotone\", \"pattern\"\n**Load**: `references\u002Fimagery.md`\n**Provides**: Image role taxonomy, sizing and format strategy, three-layer background\ncomposition, dithering algorithms (Atkinson\u002FFloyd-Steinberg\u002FBayer), overlay and\ngeometric bounding (diagonal lines, clip-path shapes, corner marks, grid overlays),\nmovement in imagery, artistic style selection (photorealistic\u002Fillustrated\u002Fgenerative\u002F\nmixed media\u002Fduotone), button and banner imagery, Nano Banana integration, AI image\nprompting guide.\n\n### Data Graphics, Tables, Charts, and Infographics\n**Triggers**: \"table\", \"chart\", \"infographic\", \"data\", \"statistics\", \"metrics\",\n\"dashboard KPI\", \"comparison\", \"timeline\", \"process flow\", \"number display\"\n**Load**: `references\u002Fdata-graphics.md`\n**Provides**: Table design beyond defaults (no-grid tables, status indicators, sparkline\ncells, sticky headers, emphasis techniques), chart aesthetics and storytelling (gradient\nfills, glow effects, annotations, grid replacements), Mermaid diagram integration,\ninfographic patterns (number blocks, timelines, comparison grids, process flows),\nAI prompting for data visuals, print-ready data graphics.\n\n### Microanimations and Interactive Controls\n**Triggers**: \"animation\", \"hover\", \"click\", \"button\", \"toggle\", \"feedback\", \"ripple\",\n\"loading\", \"skeleton\", \"transition\", \"snap\", \"magnetic\", \"scroll animation\",\n\"microinteraction\", \"responsive control\", \"state transition\", \"form animation\"\n**Load**: `references\u002Fmicroanimations.md`\n**Provides**: Complete 5-state button system (default\u002Fhover\u002Factive\u002Ffocus\u002Fdisabled),\nnavigation feedback (menu items, hamburger, tab indicator), scroll-driven animations\n(staggered reveal, progress bar, counter animation), form interactions (floating labels,\nvalidation feedback, custom checkboxes), loading states (skeletons, success\u002Ferror),\npage transitions, haptic-feel patterns (press, bounce, card lift, ripple), snap and\nmagnetic behaviors, performance rules, easing and timing reference table.\n\n### Visual Motion and Depth\n**Triggers**: \"3d\", \"depth\", \"parallax\", \"tilt\", \"fake 3d\", \"spatial\", \"kinetic\",\n\"motion\", \"glassmorphism\", \"holographic\"\n**Load**: `references\u002Fvisual-kinetics.md`\n**Provides**: Animation tier system (CSS -> Svelte -> Svelte Motion -> GSAP), holographic\ntilt card with glare, parallax hero with Nano Banana layers, glassmorphism 2.0, kinetic\ntypography (reveal mask, marquee, split text), scroll-triggered reveals, physics-based\neasing, magnetic button, performance checklist.\n\n### Data Visualization (Charts and Dashboards)\n**Triggers**: \"layerchart\", \"chart component\", \"dashboard layout\", \"bento grid\",\n\"sparkline\", \"real-time\", \"neon chart\", \"editorial chart\"\n**Load**: `references\u002Fdata-visualization.md`\n**Provides**: LayerChart composable patterns, shadcn-svelte chart integration, chart\naesthetic modes (Neon\u002FEditorial\u002FMinimal), table styling recipes, Bento grid dashboard\nlayouts, sparklines, real-time data patterns, fallback libraries.\n\n### Diagrams (Mermaid)\n**Triggers**: \"mermaid\", \"diagram\", \"flowchart\", \"sequence diagram\", \"architecture diagram\"\n**Load**: `references\u002Fmermaid-theming.md`\n**Provides**: beautiful-mermaid setup and theming, Shiki integration, native Mermaid\n`themeVariables` mapping, SVG post-processing (texture overlay, shadows, borders),\nSvelteKit component pattern, diagram type styling notes, print considerations.\n\nWhen **multiple triggers** are detected, load all relevant references.\nWhen **no triggers** are detected, apply the Universal Mandates below directly.\n\n## 4. The Anti-Slop Mandate\n\nLLMs converge toward high-probability \"safe\" design patterns from training data.\nThis is distributional convergence. Fight it deliberately.\n\n**REJECT**: Bootstrap\u002FTailwind defaults shipped as-is, Inter\u002FRoboto\u002FArial\u002Fsystem fonts,\npurple-on-white color schemes, predictable card grids, cookie-cutter hero sections,\ncentered-everything layouts, stock photography, generic gradients, emoji icons in UI,\nmagic number spacing, invisible hover states, layout-shifting scale transforms on hover,\nlight-mode glass cards with \u003C30% opacity, muted text below gray-500 contrast.\n\n**EMBRACE**: Intentional typography hierarchies, asymmetric compositions, atmospheric\ndepth, kinetic feedback, editorial grids, geometric eye-guides, print-ready precision,\ncustom color palettes built from color theory, distinctive font pairings, SVG icon\nsystems (Lucide, Heroicons) with consistent viewBox, cursor-pointer on every clickable\nelement, stable hover states using color\u002Fopacity (not layout-disrupting transforms).\n\n## 5. Design Thinking (Pre-Code)\n\nBefore writing code, commit to a direction:\n\n1. **Purpose**: What does this solve? Who uses it?\n2. **Product Type**: Classify using the table in Section 2A for initial direction.\n3. **Aesthetic Tone**: Pick ONE and commit fully. See `references\u002Flanding-pages.md`\n   Section 3 for 8 proven styles. Or invent a hybrid.\n4. **Color Direction**: Select primary hue, derive accent via color theory harmony.\n   See `references\u002Fcolor-system.md` Section 3 for the full workflow.\n5. **Typography**: Choose display + body + mono trio from\n   `references\u002Ftypography.md` catalogs.\n6. **The Memorable Detail**: Identify ONE element the user will remember.\n7. **Complexity Match**: Maximalist = elaborate code. Minimalist = surgical precision.\n\n## 6. Universal Aesthetic Mandates\n\n### Typography\nSelect distinctive, characterful pairings. Load from Google Fonts or Fontsource.\nSee `references\u002Ftypography.md` for full font catalogs and pairing strategies.\nNEVER use Inter, Roboto, Open Sans, Lato, or default system fonts unless heavily modified.\nNEVER converge on Space Grotesk across generations.\n\n### Color (The Structured Palette)\nBuild a 3-group palette: Base Tones, Primary Tones, Accent Tones.\nSee `references\u002Fcolor-system.md` for the complete system.\nLight themes: hard shadows, heavy typography, thin lines.\nDark themes: colored glows, off-white text (#E8E8E8), subtle surface gradients.\nNEVER use pure purple (H: 270-280) as primary. Shift to indigo, teal, coral, or emerald.\n\n### Imagery and Texture\nNever use flat, solid-color backgrounds for hero sections.\nSee `references\u002Fimagery.md` for the three-layer composition technique, dithering\nalgorithms, and Nano Banana integration patterns.\n\n### Microanimations (Mandatory)\nEvery interactive element must provide motion feedback.\nSee `references\u002Fmicroanimations.md` for the complete 5-state button system,\nscroll-driven animations, and haptic-feel patterns.\n\n### Spatial Composition\nVertical scaffolding, asymmetry, negative space, grid-breaking elements.\nSee `references\u002Flanding-pages.md` Section 4 for visual flow patterns.\n\n### Accessibility (Non-Negotiable)\n- Semantic HTML: `\u003Carticle>`, `\u003Csection>`, `\u003Cnav>`, `\u003Caside>`, `\u003Cmain>`\n- Focus states: NEVER `outline: none`. Style as `outline: 2px solid var(--accent); outline-offset: 4px`\n- WCAG AA contrast minimum. See `references\u002Fcolor-system.md` Section 9.\n- ARIA labels on all custom interactive components\n- `prefers-reduced-motion`: disable parallax, tilt, complex animations\n- Color must never be the sole indicator of state\n- All images need alt text; form inputs need labels\n\n### Print and PDF\nSites must double as printable reports when `@media print` is active.\nHide nav\u002Ffooter\u002Fbuttons, force white background, preserve SVG charts,\nuse `break-inside: avoid` on cards\u002Fcharts\u002Ftables.\n\n## 7. Implementation Workflow\n\n1. **Identify**: Classify product type, style intent, audience (Section 2).\n2. **Load**: Scan for resource triggers. Load relevant reference files (Section 3).\n3. **Research**: For complex builds, conduct deep research (up to 10 web searches)\n   on comparable award-winning sites, patterns, and library capabilities.\n4. **Architect**: Plan SvelteKit file structure. Define CSS variable tokens.\n5. **Code**: Write semantic HTML, extended Tailwind, Svelte 5 Runes.\n   Production-ready, no placeholders.\n6. **Polish**: Apply microanimations, texture layers, hover states, scroll triggers.\n7. **Validate**: Run the Pre-Delivery Checklist (Section 8). Fix all failures.\n8. **Iterate**: Compare against the aesthetic vision. Adjust until it pops.\n\n## 8. Pre-Delivery Checklist\n\nRun this before delivering any UI code. Every item is a known failure mode.\n\n### Visual Quality\n- [ ] No emojis used as UI icons (use Lucide or Heroicons SVGs)\n- [ ] All icons from a single consistent set with matching viewBox (24x24)\n- [ ] Brand logos verified against official sources (Simple Icons)\n- [ ] Hover states cause NO layout shift (use opacity\u002Fcolor, not scale transforms)\n- [ ] No default Tailwind color classes without customization\n- [ ] Typography pairing is intentional and loaded (not system fallback)\n\n### Interaction\n- [ ] Every clickable element has `cursor-pointer`\n- [ ] Every interactive element has visible hover feedback\n- [ ] Transitions use 150-300ms duration (never >500ms for UI, never 0ms)\n- [ ] Focus states are visible and styled (not browser defaults, never removed)\n- [ ] Touch targets are minimum 44x44px on mobile\n\n### Light\u002FDark Mode\n- [ ] Light mode: text contrast passes WCAG AA (4.5:1 minimum)\n- [ ] Light mode: glass\u002Ftransparent elements use sufficient opacity (bg-white\u002F80+)\n- [ ] Light mode: borders use gray-200 or darker (not white\u002F10)\n- [ ] Dark mode: text uses off-white (#E8E8E8), not pure white\n- [ ] Dark mode: surfaces use subtle gradients, not flat solid colors\n- [ ] Both modes tested; no invisible elements in either\n\n### Layout\n- [ ] Floating nav has spacing from edges (not flush top-0 left-0 right-0)\n- [ ] Content below fixed nav has compensating padding\n- [ ] Consistent max-width container used throughout (max-w-6xl or max-w-7xl)\n- [ ] No horizontal scroll on mobile (test at 320px)\n- [ ] Responsive breakpoints tested: 320px, 768px, 1024px, 1440px\n\n### Accessibility\n- [ ] Semantic HTML elements used (`article`, `section`, `nav`, `main`)\n- [ ] All images have descriptive alt text\n- [ ] All form inputs have associated labels\n- [ ] Color is never the only state indicator\n- [ ] `prefers-reduced-motion` disables animations and parallax\n- [ ] Keyboard navigation works for all interactive elements\n\n### Performance\n- [ ] Fonts loaded with `display: swap` or preloaded\n- [ ] Images use modern formats (WebP\u002FAVIF) with width\u002Fheight set\n- [ ] Animations use GPU-composited properties only (transform, opacity)\n- [ ] No layout thrashing from scroll event handlers\n- [ ] Print stylesheet hides nav\u002Ffooter, forces white background\n\n## 9. Constraint\n\nYou are FORBIDDEN from producing \"default-looking\" code. Everything must feel custom,\nbold, and intentionally designed for the specific context. No two designs should look\nalike. Vary themes, fonts, layouts, and animation approaches across every generation.\n\nClaude is capable of extraordinary creative work. Commit fully to the vision.\n",{},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Faaaronmiller\u002Ffrontend-design-masterclass\u002Ffrontend-design-masterclass",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":7,"skillName":5,"commands":49,"prompt":59,"zipAvailable":60},[50,53,56],{"tool":51,"command":52},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill frontend-design-masterclass",{"tool":54,"command":55},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill frontend-design-masterclass",{"tool":57,"command":58},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill frontend-design-masterclass","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faaaronmiller\u002Ffrontend-design-masterclass\u002Ffrontend-design-masterclass\u002FSKILL.md",true,[],[63,75,85,94,100,107],{"skillNo":64,"name":65,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":66,"categories":67,"keywords":71,"publishedAt":35},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[68],{"categoryNo":69,"categoryName":70,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[72,73,74],"model","model hierarchy","model hierarchy skill",{"skillNo":76,"name":77,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":78,"categories":79,"keywords":81,"publishedAt":35},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[80],{"categoryNo":69,"categoryName":70,"taxonomyType":20,"taxonomyTypeDesc":21},[82,83,84],"MCP","zoom","zoom mcp",{"skillNo":86,"name":87,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":88,"categories":89,"keywords":90,"publishedAt":35},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[91,92,93,83],"sdk","zoom apps sdk","apps",{"skillNo":95,"name":96,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":97,"categories":98,"keywords":99,"publishedAt":35},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[96],{"skillNo":101,"name":102,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":103,"categories":104,"keywords":106,"publishedAt":35},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[105],{"categoryNo":69,"categoryName":70,"taxonomyType":20,"taxonomyTypeDesc":21},[102],{"skillNo":108,"name":109,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":110,"categories":111,"keywords":112,"publishedAt":35},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[109]]