[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6F1PPYHXMC8BYKBJTWBWNTS":3,"skill-same:01M6F1PPYHXMC8BYKBJTWBWNTS":90},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":28,"publishedAt":44,"linkOnly":45,"markdownContent":46,"markdownBody":47,"frontMatter":48,"refName":49,"commitSha":50,"skillDirectory":51,"forksCount":52,"repositoryHtmlUrl":53,"repositoryHomepageUrl":54,"ownerHtmlUrl":55,"ownerBlogUrl":6,"ownerDescription":56,"updatedAt":57,"install":58,"resources":71},"01M6F1PPYHXMC8BYKBJTWBWNTS","visual-design-foundations",null,"Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency.","ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",67,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fwshobson\u002Fvisual-design-foundations\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43],"design","visual design","visual design foundations","visual","foundations","create","use","typography","design tokens","tokens","systems","style","guides","color","principles","2026-11-10 10:12:30",false,"---\nname: visual-design-foundations\ndescription: Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency.\n---\n\n# Visual Design Foundations\n\nBuild cohesive, accessible visual systems using typography, color, spacing, and iconography fundamentals.\n\n## When to Use This Skill\n\n- Establishing design tokens for a new project\n- Creating or refining a spacing and sizing system\n- Selecting and pairing typefaces\n- Building accessible color palettes\n- Designing icon systems and visual assets\n- Improving visual hierarchy and readability\n- Auditing designs for visual consistency\n- Implementing dark mode or theming\n\n## Core Systems\n\n### 1. Typography Scale\n\n**Modular Scale** (ratio-based sizing):\n\n```css\n:root {\n  --font-size-xs: 0.75rem; \u002F* 12px *\u002F\n  --font-size-sm: 0.875rem; \u002F* 14px *\u002F\n  --font-size-base: 1rem; \u002F* 16px *\u002F\n  --font-size-lg: 1.125rem; \u002F* 18px *\u002F\n  --font-size-xl: 1.25rem; \u002F* 20px *\u002F\n  --font-size-2xl: 1.5rem; \u002F* 24px *\u002F\n  --font-size-3xl: 1.875rem; \u002F* 30px *\u002F\n  --font-size-4xl: 2.25rem; \u002F* 36px *\u002F\n  --font-size-5xl: 3rem; \u002F* 48px *\u002F\n}\n```\n\n**Line Height Guidelines**:\n| Text Type | Line Height |\n|-----------|-------------|\n| Headings | 1.1 - 1.3 |\n| Body text | 1.5 - 1.7 |\n| UI labels | 1.2 - 1.4 |\n\n### 2. Spacing System\n\n**8-point grid** (industry standard):\n\n```css\n:root {\n  --space-1: 0.25rem; \u002F* 4px *\u002F\n  --space-2: 0.5rem; \u002F* 8px *\u002F\n  --space-3: 0.75rem; \u002F* 12px *\u002F\n  --space-4: 1rem; \u002F* 16px *\u002F\n  --space-5: 1.25rem; \u002F* 20px *\u002F\n  --space-6: 1.5rem; \u002F* 24px *\u002F\n  --space-8: 2rem; \u002F* 32px *\u002F\n  --space-10: 2.5rem; \u002F* 40px *\u002F\n  --space-12: 3rem; \u002F* 48px *\u002F\n  --space-16: 4rem; \u002F* 64px *\u002F\n}\n```\n\n### 3. Color System\n\n**Semantic color tokens**:\n\n```css\n:root {\n  \u002F* Brand *\u002F\n  --color-primary: #2563eb;\n  --color-primary-hover: #1d4ed8;\n  --color-primary-active: #1e40af;\n\n  \u002F* Semantic *\u002F\n  --color-success: #16a34a;\n  --color-warning: #ca8a04;\n  --color-error: #dc2626;\n  --color-info: #0891b2;\n\n  \u002F* Neutral *\u002F\n  --color-gray-50: #f9fafb;\n  --color-gray-100: #f3f4f6;\n  --color-gray-200: #e5e7eb;\n  --color-gray-300: #d1d5db;\n  --color-gray-400: #9ca3af;\n  --color-gray-500: #6b7280;\n  --color-gray-600: #4b5563;\n  --color-gray-700: #374151;\n  --color-gray-800: #1f2937;\n  --color-gray-900: #111827;\n}\n```\n\n## Quick Start: Design Tokens in Tailwind\n\n```js\n\u002F\u002F tailwind.config.js\nmodule.exports = {\n  theme: {\n    extend: {\n      fontFamily: {\n        sans: [\"Inter\", \"system-ui\", \"sans-serif\"],\n        mono: [\"JetBrains Mono\", \"monospace\"],\n      },\n      fontSize: {\n        xs: [\"0.75rem\", { lineHeight: \"1rem\" }],\n        sm: [\"0.875rem\", { lineHeight: \"1.25rem\" }],\n        base: [\"1rem\", { lineHeight: \"1.5rem\" }],\n        lg: [\"1.125rem\", { lineHeight: \"1.75rem\" }],\n        xl: [\"1.25rem\", { lineHeight: \"1.75rem\" }],\n        \"2xl\": [\"1.5rem\", { lineHeight: \"2rem\" }],\n      },\n      colors: {\n        brand: {\n          50: \"#eff6ff\",\n          500: \"#3b82f6\",\n          600: \"#2563eb\",\n          700: \"#1d4ed8\",\n        },\n      },\n      spacing: {\n        \u002F\u002F Extends default with custom values\n        18: \"4.5rem\",\n        88: \"22rem\",\n      },\n    },\n  },\n};\n```\n\n## Typography Best Practices\n\n### Font Pairing\n\n**Safe combinations**:\n\n- Heading: **Inter** \u002F Body: **Inter** (single family)\n- Heading: **Playfair Display** \u002F Body: **Source Sans Pro** (contrast)\n- Heading: **Space Grotesk** \u002F Body: **IBM Plex Sans** (geometric)\n\n### Responsive Typography\n\n```css\n\u002F* Fluid typography using clamp() *\u002F\nh1 {\n  font-size: clamp(2rem, 5vw + 1rem, 3.5rem);\n  line-height: 1.1;\n}\n\np {\n  font-size: clamp(1rem, 2vw + 0.5rem, 1.125rem);\n  line-height: 1.6;\n  max-width: 65ch; \u002F* Optimal reading width *\u002F\n}\n```\n\n### Font Loading\n\n```css\n\u002F* Prevent layout shift *\u002F\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"\u002Ffonts\u002FInter.woff2\") format(\"woff2\");\n  font-display: swap;\n  font-weight: 400 700;\n}\n```\n\n## Color Theory\n\n### Contrast Requirements (WCAG)\n\n| Element            | Minimum Ratio |\n| ------------------ | ------------- |\n| Body text          | 4.5:1 (AA)    |\n| Large text (18px+) | 3:1 (AA)      |\n| UI components      | 3:1 (AA)      |\n| Enhanced           | 7:1 (AAA)     |\n\n### Dark Mode Strategy\n\n```css\n:root {\n  --bg-primary: #ffffff;\n  --bg-secondary: #f9fafb;\n  --text-primary: #111827;\n  --text-secondary: #6b7280;\n  --border: #e5e7eb;\n}\n\n[data-theme=\"dark\"] {\n  --bg-primary: #111827;\n  --bg-secondary: #1f2937;\n  --text-primary: #f9fafb;\n  --text-secondary: #9ca3af;\n  --border: #374151;\n}\n```\n\n### Color Accessibility\n\n```tsx\n\u002F\u002F Check contrast programmatically\nfunction getContrastRatio(foreground: string, background: string): number {\n  const getLuminance = (hex: string) => {\n    const rgb = hexToRgb(hex);\n    const [r, g, b] = rgb.map((c) => {\n      c = c \u002F 255;\n      return c \u003C= 0.03928 ? c \u002F 12.92 : Math.pow((c + 0.055) \u002F 1.055, 2.4);\n    });\n    return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n  };\n\n  const l1 = getLuminance(foreground);\n  const l2 = getLuminance(background);\n  const lighter = Math.max(l1, l2);\n  const darker = Math.min(l1, l2);\n\n  return (lighter + 0.05) \u002F (darker + 0.05);\n}\n```\n\n## Spacing Guidelines\n\n### Component Spacing\n\n```\nCard padding:      16-24px (--space-4 to --space-6)\nSection gap:       32-64px (--space-8 to --space-16)\nForm field gap:    16-24px (--space-4 to --space-6)\nButton padding:    8-16px vertical, 16-24px horizontal\nIcon-text gap:     8px (--space-2)\n```\n\n### Visual Rhythm\n\n```css\n\u002F* Consistent vertical rhythm *\u002F\n.prose > * + * {\n  margin-top: var(--space-4);\n}\n\n.prose > h2 + * {\n  margin-top: var(--space-2);\n}\n\n.prose > * + h2 {\n  margin-top: var(--space-8);\n}\n```\n\n## Iconography\n\n### Icon Sizing System\n\n```css\n:root {\n  --icon-xs: 12px;\n  --icon-sm: 16px;\n  --icon-md: 20px;\n  --icon-lg: 24px;\n  --icon-xl: 32px;\n}\n```\n\n### Icon Component\n\n```tsx\ninterface IconProps {\n  name: string;\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n  className?: string;\n}\n\nconst sizeMap = {\n  xs: 12,\n  sm: 16,\n  md: 20,\n  lg: 24,\n  xl: 32,\n};\n\nexport function Icon({ name, size = \"md\", className }: IconProps) {\n  return (\n    \u003Csvg\n      width={sizeMap[size]}\n      height={sizeMap[size]}\n      className={cn(\"inline-block flex-shrink-0\", className)}\n      aria-hidden=\"true\"\n    >\n      \u003Cuse href={`\u002Ficons.svg#${name}`} \u002F>\n    \u003C\u002Fsvg>\n  );\n}\n```\n\n## Best Practices\n\n1. **Establish Constraints**: Limit choices to maintain consistency\n2. **Document Decisions**: Create a living style guide\n3. **Test Accessibility**: Verify contrast, sizing, touch targets\n4. **Use Semantic Tokens**: Name by purpose, not appearance\n5. **Design Mobile-First**: Start with constraints, add complexity\n6. **Maintain Vertical Rhythm**: Consistent spacing creates harmony\n7. **Limit Font Weights**: 2-3 weights per family is sufficient\n\n## Common Issues\n\n- **Inconsistent Spacing**: Not using a defined scale\n- **Poor Contrast**: Failing WCAG requirements\n- **Font Overload**: Too many families or weights\n- **Magic Numbers**: Arbitrary values instead of tokens\n- **Missing States**: Forgetting hover, focus, disabled\n- **No Dark Mode Plan**: Retrofitting is harder than planning\n\n## Resources\n\n- [Tailwind CSS Documentation](https:\u002F\u002Ftailwindcss.com\u002Fdocs)\n- [Type Scale Calculator](https:\u002F\u002Ftypescale.com\u002F)\n- [Contrast Checker](https:\u002F\u002Fwebaim.org\u002Fresources\u002Fcontrastchecker\u002F)\n- [Material Design Color System](https:\u002F\u002Fm3.material.io\u002Fstyles\u002Fcolor\u002Foverview)\n- [Radix Colors](https:\u002F\u002Fwww.radix-ui.com\u002Fcolors)\n","# Visual Design Foundations\n\nBuild cohesive, accessible visual systems using typography, color, spacing, and iconography fundamentals.\n\n## When to Use This Skill\n\n- Establishing design tokens for a new project\n- Creating or refining a spacing and sizing system\n- Selecting and pairing typefaces\n- Building accessible color palettes\n- Designing icon systems and visual assets\n- Improving visual hierarchy and readability\n- Auditing designs for visual consistency\n- Implementing dark mode or theming\n\n## Core Systems\n\n### 1. Typography Scale\n\n**Modular Scale** (ratio-based sizing):\n\n```css\n:root {\n  --font-size-xs: 0.75rem; \u002F* 12px *\u002F\n  --font-size-sm: 0.875rem; \u002F* 14px *\u002F\n  --font-size-base: 1rem; \u002F* 16px *\u002F\n  --font-size-lg: 1.125rem; \u002F* 18px *\u002F\n  --font-size-xl: 1.25rem; \u002F* 20px *\u002F\n  --font-size-2xl: 1.5rem; \u002F* 24px *\u002F\n  --font-size-3xl: 1.875rem; \u002F* 30px *\u002F\n  --font-size-4xl: 2.25rem; \u002F* 36px *\u002F\n  --font-size-5xl: 3rem; \u002F* 48px *\u002F\n}\n```\n\n**Line Height Guidelines**:\n| Text Type | Line Height |\n|-----------|-------------|\n| Headings | 1.1 - 1.3 |\n| Body text | 1.5 - 1.7 |\n| UI labels | 1.2 - 1.4 |\n\n### 2. Spacing System\n\n**8-point grid** (industry standard):\n\n```css\n:root {\n  --space-1: 0.25rem; \u002F* 4px *\u002F\n  --space-2: 0.5rem; \u002F* 8px *\u002F\n  --space-3: 0.75rem; \u002F* 12px *\u002F\n  --space-4: 1rem; \u002F* 16px *\u002F\n  --space-5: 1.25rem; \u002F* 20px *\u002F\n  --space-6: 1.5rem; \u002F* 24px *\u002F\n  --space-8: 2rem; \u002F* 32px *\u002F\n  --space-10: 2.5rem; \u002F* 40px *\u002F\n  --space-12: 3rem; \u002F* 48px *\u002F\n  --space-16: 4rem; \u002F* 64px *\u002F\n}\n```\n\n### 3. Color System\n\n**Semantic color tokens**:\n\n```css\n:root {\n  \u002F* Brand *\u002F\n  --color-primary: #2563eb;\n  --color-primary-hover: #1d4ed8;\n  --color-primary-active: #1e40af;\n\n  \u002F* Semantic *\u002F\n  --color-success: #16a34a;\n  --color-warning: #ca8a04;\n  --color-error: #dc2626;\n  --color-info: #0891b2;\n\n  \u002F* Neutral *\u002F\n  --color-gray-50: #f9fafb;\n  --color-gray-100: #f3f4f6;\n  --color-gray-200: #e5e7eb;\n  --color-gray-300: #d1d5db;\n  --color-gray-400: #9ca3af;\n  --color-gray-500: #6b7280;\n  --color-gray-600: #4b5563;\n  --color-gray-700: #374151;\n  --color-gray-800: #1f2937;\n  --color-gray-900: #111827;\n}\n```\n\n## Quick Start: Design Tokens in Tailwind\n\n```js\n\u002F\u002F tailwind.config.js\nmodule.exports = {\n  theme: {\n    extend: {\n      fontFamily: {\n        sans: [\"Inter\", \"system-ui\", \"sans-serif\"],\n        mono: [\"JetBrains Mono\", \"monospace\"],\n      },\n      fontSize: {\n        xs: [\"0.75rem\", { lineHeight: \"1rem\" }],\n        sm: [\"0.875rem\", { lineHeight: \"1.25rem\" }],\n        base: [\"1rem\", { lineHeight: \"1.5rem\" }],\n        lg: [\"1.125rem\", { lineHeight: \"1.75rem\" }],\n        xl: [\"1.25rem\", { lineHeight: \"1.75rem\" }],\n        \"2xl\": [\"1.5rem\", { lineHeight: \"2rem\" }],\n      },\n      colors: {\n        brand: {\n          50: \"#eff6ff\",\n          500: \"#3b82f6\",\n          600: \"#2563eb\",\n          700: \"#1d4ed8\",\n        },\n      },\n      spacing: {\n        \u002F\u002F Extends default with custom values\n        18: \"4.5rem\",\n        88: \"22rem\",\n      },\n    },\n  },\n};\n```\n\n## Typography Best Practices\n\n### Font Pairing\n\n**Safe combinations**:\n\n- Heading: **Inter** \u002F Body: **Inter** (single family)\n- Heading: **Playfair Display** \u002F Body: **Source Sans Pro** (contrast)\n- Heading: **Space Grotesk** \u002F Body: **IBM Plex Sans** (geometric)\n\n### Responsive Typography\n\n```css\n\u002F* Fluid typography using clamp() *\u002F\nh1 {\n  font-size: clamp(2rem, 5vw + 1rem, 3.5rem);\n  line-height: 1.1;\n}\n\np {\n  font-size: clamp(1rem, 2vw + 0.5rem, 1.125rem);\n  line-height: 1.6;\n  max-width: 65ch; \u002F* Optimal reading width *\u002F\n}\n```\n\n### Font Loading\n\n```css\n\u002F* Prevent layout shift *\u002F\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"\u002Ffonts\u002FInter.woff2\") format(\"woff2\");\n  font-display: swap;\n  font-weight: 400 700;\n}\n```\n\n## Color Theory\n\n### Contrast Requirements (WCAG)\n\n| Element            | Minimum Ratio |\n| ------------------ | ------------- |\n| Body text          | 4.5:1 (AA)    |\n| Large text (18px+) | 3:1 (AA)      |\n| UI components      | 3:1 (AA)      |\n| Enhanced           | 7:1 (AAA)     |\n\n### Dark Mode Strategy\n\n```css\n:root {\n  --bg-primary: #ffffff;\n  --bg-secondary: #f9fafb;\n  --text-primary: #111827;\n  --text-secondary: #6b7280;\n  --border: #e5e7eb;\n}\n\n[data-theme=\"dark\"] {\n  --bg-primary: #111827;\n  --bg-secondary: #1f2937;\n  --text-primary: #f9fafb;\n  --text-secondary: #9ca3af;\n  --border: #374151;\n}\n```\n\n### Color Accessibility\n\n```tsx\n\u002F\u002F Check contrast programmatically\nfunction getContrastRatio(foreground: string, background: string): number {\n  const getLuminance = (hex: string) => {\n    const rgb = hexToRgb(hex);\n    const [r, g, b] = rgb.map((c) => {\n      c = c \u002F 255;\n      return c \u003C= 0.03928 ? c \u002F 12.92 : Math.pow((c + 0.055) \u002F 1.055, 2.4);\n    });\n    return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n  };\n\n  const l1 = getLuminance(foreground);\n  const l2 = getLuminance(background);\n  const lighter = Math.max(l1, l2);\n  const darker = Math.min(l1, l2);\n\n  return (lighter + 0.05) \u002F (darker + 0.05);\n}\n```\n\n## Spacing Guidelines\n\n### Component Spacing\n\n```\nCard padding:      16-24px (--space-4 to --space-6)\nSection gap:       32-64px (--space-8 to --space-16)\nForm field gap:    16-24px (--space-4 to --space-6)\nButton padding:    8-16px vertical, 16-24px horizontal\nIcon-text gap:     8px (--space-2)\n```\n\n### Visual Rhythm\n\n```css\n\u002F* Consistent vertical rhythm *\u002F\n.prose > * + * {\n  margin-top: var(--space-4);\n}\n\n.prose > h2 + * {\n  margin-top: var(--space-2);\n}\n\n.prose > * + h2 {\n  margin-top: var(--space-8);\n}\n```\n\n## Iconography\n\n### Icon Sizing System\n\n```css\n:root {\n  --icon-xs: 12px;\n  --icon-sm: 16px;\n  --icon-md: 20px;\n  --icon-lg: 24px;\n  --icon-xl: 32px;\n}\n```\n\n### Icon Component\n\n```tsx\ninterface IconProps {\n  name: string;\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n  className?: string;\n}\n\nconst sizeMap = {\n  xs: 12,\n  sm: 16,\n  md: 20,\n  lg: 24,\n  xl: 32,\n};\n\nexport function Icon({ name, size = \"md\", className }: IconProps) {\n  return (\n    \u003Csvg\n      width={sizeMap[size]}\n      height={sizeMap[size]}\n      className={cn(\"inline-block flex-shrink-0\", className)}\n      aria-hidden=\"true\"\n    >\n      \u003Cuse href={`\u002Ficons.svg#${name}`} \u002F>\n    \u003C\u002Fsvg>\n  );\n}\n```\n\n## Best Practices\n\n1. **Establish Constraints**: Limit choices to maintain consistency\n2. **Document Decisions**: Create a living style guide\n3. **Test Accessibility**: Verify contrast, sizing, touch targets\n4. **Use Semantic Tokens**: Name by purpose, not appearance\n5. **Design Mobile-First**: Start with constraints, add complexity\n6. **Maintain Vertical Rhythm**: Consistent spacing creates harmony\n7. **Limit Font Weights**: 2-3 weights per family is sufficient\n\n## Common Issues\n\n- **Inconsistent Spacing**: Not using a defined scale\n- **Poor Contrast**: Failing WCAG requirements\n- **Font Overload**: Too many families or weights\n- **Magic Numbers**: Arbitrary values instead of tokens\n- **Missing States**: Forgetting hover, focus, disabled\n- **No Dark Mode Plan**: Retrofitting is harder than planning\n\n## Resources\n\n- [Tailwind CSS Documentation](https:\u002F\u002Ftailwindcss.com\u002Fdocs)\n- [Type Scale Calculator](https:\u002F\u002Ftypescale.com\u002F)\n- [Contrast Checker](https:\u002F\u002Fwebaim.org\u002Fresources\u002Fcontrastchecker\u002F)\n- [Material Design Color System](https:\u002F\u002Fm3.material.io\u002Fstyles\u002Fcolor\u002Foverview)\n- [Radix Colors](https:\u002F\u002Fwww.radix-ui.com\u002Fcolors)\n",{"name":5,"description":7},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Faiskillstore\u002Fmarketplace\u002Fwshobson\u002Fvisual-design-foundations",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":8,"skillName":5,"commands":59,"prompt":69,"zipAvailable":70},[60,63,66],{"tool":61,"command":62},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill visual-design-foundations",{"tool":64,"command":65},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill visual-design-foundations",{"tool":67,"command":68},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill visual-design-foundations","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fwshobson\u002Fvisual-design-foundations\u002FSKILL.md",true,[72,78,82,86],{"path":73,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":76,"sourceHtmlUrl":77},"references\u002Fcolor-systems.md","REFERENCE","参考文档",10744,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fwshobson\u002Fvisual-design-foundations\u002Freferences\u002Fcolor-systems.md",{"path":79,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":80,"sourceHtmlUrl":81},"references\u002Fspacing-iconography.md",10691,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fwshobson\u002Fvisual-design-foundations\u002Freferences\u002Fspacing-iconography.md",{"path":83,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":84,"sourceHtmlUrl":85},"references\u002Ftypography-systems.md",8895,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fwshobson\u002Fvisual-design-foundations\u002Freferences\u002Ftypography-systems.md",{"path":87,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":88,"sourceHtmlUrl":89},"skill-report.json",10062,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fwshobson\u002Fvisual-design-foundations\u002Fskill-report.json",[91,103,113,122,128,135],{"skillNo":92,"name":93,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":94,"categories":95,"keywords":99,"publishedAt":44},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[96],{"categoryNo":97,"categoryName":98,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[100,101,102],"model","model hierarchy","model hierarchy skill",{"skillNo":104,"name":105,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":106,"categories":107,"keywords":109,"publishedAt":44},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[108],{"categoryNo":97,"categoryName":98,"taxonomyType":21,"taxonomyTypeDesc":22},[110,111,112],"MCP","zoom","zoom mcp",{"skillNo":114,"name":115,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":116,"categories":117,"keywords":118,"publishedAt":44},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[119,120,121,111],"sdk","zoom apps sdk","apps",{"skillNo":123,"name":124,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":125,"categories":126,"keywords":127,"publishedAt":44},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[124],{"skillNo":129,"name":130,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":131,"categories":132,"keywords":134,"publishedAt":44},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[133],{"categoryNo":97,"categoryName":98,"taxonomyType":21,"taxonomyTypeDesc":22},[130],{"skillNo":136,"name":137,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":138,"categories":139,"keywords":140,"publishedAt":44},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[137]]