[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7BWSWYHC7CTZXBFKNAP53TH":3,"skill-same:01M7BWSWYHC7CTZXBFKNAP53TH":61},{"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":18,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":24,"commitSha":25,"skillDirectory":26,"forksCount":27,"repositoryHtmlUrl":28,"repositoryHomepageUrl":29,"ownerHtmlUrl":30,"ownerBlogUrl":6,"ownerDescription":31,"updatedAt":32,"install":33,"resources":46},"01M7BWSWYHC7CTZXBFKNAP53TH","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.","YYC-Cube\u002FYYC3-Knowledge-Base","YYC-Cube","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F235006543?v=4","01M79J2PH4SWD2X0825X6PN748","yyc3","01M79J2PHVK3F6ZBYT8K2SCZCW",1,"MIT","https:\u002F\u002Fgithub.com\u002FYYC-Cube\u002FYYC3-Knowledge-Base\u002Fblob\u002Fmain\u002FYYC3-Plugin-插件协议\u002FYYC3-Plugin-插件协议-plugins-claude\u002Fui-design\u002Fskills\u002Fvisual-design-foundations\u002FSKILL.md",[],[],"2026-11-15 14:19:17",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","# 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",{"name":5,"description":7},"main","87afe6ce96220accf50a345dea46784c8c9f210e","YYC3-Plugin-插件协议\u002FYYC3-Plugin-插件协议-plugins-claude\u002Fui-design\u002Fskills\u002Fvisual-design-foundations",0,"https:\u002F\u002Fgithub.com\u002FYYC-Cube\u002FYYC3-Knowledge-Base","https:\u002F\u002Fkb.yyc3.top\u002F","https:\u002F\u002Fgithub.com\u002FYYC-Cube","万象归元于云枢 | 深栈智启新纪元","2026-11-10 10:37:32",{"source":8,"skillName":5,"commands":34,"prompt":44,"zipAvailable":45},[35,38,41],{"tool":36,"command":37},"npx","npx skills add YYC-Cube\u002FYYC3-Knowledge-Base --skill visual-design-foundations",{"tool":39,"command":40},"bunx","bunx skills add YYC-Cube\u002FYYC3-Knowledge-Base --skill visual-design-foundations",{"tool":42,"command":43},"pnpm","pnpm dlx skills add YYC-Cube\u002FYYC3-Knowledge-Base --skill visual-design-foundations","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FYYC-Cube\u002FYYC3-Knowledge-Base\u002Fblob\u002Fmain\u002FYYC3-Plugin-插件协议\u002FYYC3-Plugin-插件协议-plugins-claude\u002Fui-design\u002Fskills\u002Fvisual-design-foundations\u002FSKILL.md",true,[47,53,57],{"path":48,"resourceType":49,"resourceTypeDesc":50,"sizeBytes":51,"sourceHtmlUrl":52},"references\u002Fcolor-systems.md","REFERENCE","参考文档",10744,"https:\u002F\u002Fgithub.com\u002FYYC-Cube\u002FYYC3-Knowledge-Base\u002Fblob\u002Fmain\u002FYYC3-Plugin-插件协议\u002FYYC3-Plugin-插件协议-plugins-claude\u002Fui-design\u002Fskills\u002Fvisual-design-foundations\u002Freferences\u002Fcolor-systems.md",{"path":54,"resourceType":49,"resourceTypeDesc":50,"sizeBytes":55,"sourceHtmlUrl":56},"references\u002Fspacing-iconography.md",10691,"https:\u002F\u002Fgithub.com\u002FYYC-Cube\u002FYYC3-Knowledge-Base\u002Fblob\u002Fmain\u002FYYC3-Plugin-插件协议\u002FYYC3-Plugin-插件协议-plugins-claude\u002Fui-design\u002Fskills\u002Fvisual-design-foundations\u002Freferences\u002Fspacing-iconography.md",{"path":58,"resourceType":49,"resourceTypeDesc":50,"sizeBytes":59,"sourceHtmlUrl":60},"references\u002Ftypography-systems.md",8895,"https:\u002F\u002Fgithub.com\u002FYYC-Cube\u002FYYC3-Knowledge-Base\u002Fblob\u002Fmain\u002FYYC3-Plugin-插件协议\u002FYYC3-Plugin-插件协议-plugins-claude\u002Fui-design\u002Fskills\u002Fvisual-design-foundations\u002Freferences\u002Ftypography-systems.md",[62,69,76,83,90,97],{"skillNo":63,"name":64,"nameZh":6,"description":65,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":66,"categories":67,"keywords":68,"publishedAt":19},"01M7CTDWHERCXPQCP0K03A86AS","vercel-sandbox","Run agent-browser + Chrome inside Vercel Sandbox microVMs for browser automation from any Vercel-deployed app. Use when the user needs browser automation in a Vercel app (Next.js, SvelteKit, Nuxt, Remix, Astro, etc.), wants to run headless Chrome without binary size limits, needs persistent browser sessions across commands, or wants ephemeral isolated browser environments. Triggers include \"Vercel Sandbox browser\", \"microVM Chrome\", \"agent-browser in sandbox\", \"browser automation on Vercel\", or any task requiring Chrome in a Vercel Sandbox.","https:\u002F\u002Fgithub.com\u002FYYC-Cube\u002FYYC3-Knowledge-Base\u002Fblob\u002Fmain\u002FYYC3-WebSpec-Web标准\u002FYYC3-WebSpec-Web标准-standards\u002Fbrowser-agent\u002Fskills\u002Fvercel-sandbox\u002FSKILL.md",[],[],{"skillNo":70,"name":71,"nameZh":6,"description":72,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":73,"categories":74,"keywords":75,"publishedAt":19},"01M7CTD8D2BNJY54S65M47HEJA","slack","Interact with Slack workspaces using browser automation. Use when the user needs to check unread channels, navigate Slack, send messages, extract data, find information, search conversations, or automate any Slack task. Triggers include \"check my Slack\", \"what channels have unreads\", \"send a message to\", \"search Slack for\", \"extract from Slack\", \"find who said\", or any task requiring programmatic Slack interaction.","https:\u002F\u002Fgithub.com\u002FYYC-Cube\u002FYYC3-Knowledge-Base\u002Fblob\u002Fmain\u002FYYC3-WebSpec-Web标准\u002FYYC3-WebSpec-Web标准-standards\u002Fbrowser-agent\u002Fskills\u002Fslack\u002FSKILL.md",[],[],{"skillNo":77,"name":78,"nameZh":6,"description":79,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":80,"categories":81,"keywords":82,"publishedAt":19},"01M7CTCSSB8ZP3Q58C3YZDZK1W","electron","Automate Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify, etc.) using agent-browser via Chrome DevTools Protocol. Use when the user needs to interact with an Electron app, automate a desktop app, connect to a running app, control a native app, or test an Electron application. Triggers include \"automate Slack app\", \"control VS Code\", \"interact with Discord app\", \"test this Electron app\", \"connect to desktop app\", or any task requiring automation of a native Electron application.","https:\u002F\u002Fgithub.com\u002FYYC-Cube\u002FYYC3-Knowledge-Base\u002Fblob\u002Fmain\u002FYYC3-WebSpec-Web标准\u002FYYC3-WebSpec-Web标准-standards\u002Fbrowser-agent\u002Fskills\u002Felectron\u002FSKILL.md",[],[],{"skillNo":84,"name":85,"nameZh":6,"description":86,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":87,"categories":88,"keywords":89,"publishedAt":19},"01M7CTCBJY76688V4DCZGWFHGQ","dogfood","Systematically explore and test a web application to find bugs, UX issues, and other problems. Use when asked to \"dogfood\", \"QA\", \"exploratory test\", \"find issues\", \"bug hunt\", \"test this app\u002Fsite\u002Fplatform\", or review the quality of a web application. Produces a structured report with full reproduction evidence -- step-by-step screenshots, repro videos, and detailed repro steps for every issue -- so findings can be handed directly to the responsible teams.","https:\u002F\u002Fgithub.com\u002FYYC-Cube\u002FYYC3-Knowledge-Base\u002Fblob\u002Fmain\u002FYYC3-WebSpec-Web标准\u002FYYC3-WebSpec-Web标准-standards\u002Fbrowser-agent\u002Fskills\u002Fdogfood\u002FSKILL.md",[],[],{"skillNo":91,"name":92,"nameZh":6,"description":93,"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":96,"publishedAt":19},"01M7CTC4H0FFGVEAQR9PA4GA1A","agent-browser","Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to \"open a website\", \"fill out a form\", \"click a button\", \"take a screenshot\", \"scrape data from a page\", \"test this web app\", \"login to a site\", \"automate browser actions\", or any task requiring programmatic web interaction.","https:\u002F\u002Fgithub.com\u002FYYC-Cube\u002FYYC3-Knowledge-Base\u002Fblob\u002Fmain\u002FYYC3-WebSpec-Web标准\u002FYYC3-WebSpec-Web标准-standards\u002Fbrowser-agent\u002Fskills\u002Fagent-browser\u002FSKILL.md",[],[],{"skillNo":98,"name":99,"nameZh":6,"description":100,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":101,"categories":102,"keywords":103,"publishedAt":19},"01M7CTBKVFYBG78FDSABSDJTTQ","shadcn","Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn\u002Fui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for \"shadcn init\", \"create an app with --preset\", \"switch to --preset\", and for building a design system or applying a DESIGN.md or brand spec to shadcn\u002Fui.","https:\u002F\u002Fgithub.com\u002FYYC-Cube\u002FYYC3-Knowledge-Base\u002Fblob\u002Fmain\u002FYYC3-UI-界面组件\u002FYYC3-UI-界面组件-ui\u002Fskills\u002Fshadcn\u002FSKILL.md",[],[]]