{
  "schemaVersion": "1.0",
  "item": {
    "slug": "design-system-patterns",
    "name": "Design System Patterns",
    "source": "tencent",
    "type": "skill",
    "category": "AI 智能",
    "sourceUrl": "https://clawhub.ai/wpank/design-system-patterns",
    "canonicalUrl": "https://clawhub.ai/wpank/design-system-patterns",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/design-system-patterns",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=design-system-patterns",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "README.md",
      "SKILL.md",
      "references/component-architecture.md",
      "references/design-tokens.md",
      "references/theming-architecture.md"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "Download the package from Yavira.",
        "Extract it into a folder your agent can access.",
        "Paste one of the prompts below and point your agent at the extracted folder."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete."
        },
        {
          "label": "Upgrade existing",
          "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-30T16:55:25.780Z",
      "expiresAt": "2026-05-07T16:55:25.780Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
        "contentDisposition": "attachment; filename=\"network-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/design-system-patterns"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/design-system-patterns",
    "agentPageUrl": "https://openagent3.xyz/skills/design-system-patterns/agent",
    "manifestUrl": "https://openagent3.xyz/skills/design-system-patterns/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/design-system-patterns/agent.md"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "Download the package from Yavira.",
      "Extract it into a folder your agent can access.",
      "Paste one of the prompts below and point your agent at the extracted folder."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete."
      },
      {
        "label": "Upgrade existing",
        "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "Design System Patterns",
        "body": "Foundational architecture for scalable design systems: token hierarchies, theming infrastructure, token pipelines, and governance patterns."
      },
      {
        "title": "When to Use",
        "body": "Defining token architecture (primitive → semantic → component layers)\nImplementing light/dark/system theme switching with React\nSetting up Style Dictionary or Figma-to-code token pipelines\nBuilding multi-brand theming systems\nEstablishing token naming conventions and governance\nPreventing flash of unstyled content (FOUC) in SSR"
      },
      {
        "title": "Pattern 1: Token Hierarchy",
        "body": "Three-layer token architecture separates raw values from meaning from usage.\n\n/* Layer 1: Primitive tokens — raw values, never used directly in components */\n:root {\n  --color-blue-500: #3b82f6;\n  --color-blue-600: #2563eb;\n  --color-gray-50: #fafafa;\n  --color-gray-900: #171717;\n\n  --space-1: 0.25rem;\n  --space-2: 0.5rem;\n  --space-4: 1rem;\n\n  --font-size-sm: 0.875rem;\n  --font-size-base: 1rem;\n  --radius-sm: 0.25rem;\n  --radius-md: 0.5rem;\n}\n\n/* Layer 2: Semantic tokens — contextual meaning, theme-aware */\n:root {\n  --text-primary: var(--color-gray-900);\n  --text-secondary: var(--color-gray-600);\n  --surface-default: white;\n  --surface-elevated: var(--color-gray-50);\n  --border-default: var(--color-gray-200);\n  --interactive-primary: var(--color-blue-500);\n  --interactive-primary-hover: var(--color-blue-600);\n}\n\n/* Layer 3: Component tokens — specific usage, optional */\n:root {\n  --button-bg: var(--interactive-primary);\n  --button-bg-hover: var(--interactive-primary-hover);\n  --button-text: white;\n  --button-radius: var(--radius-md);\n  --button-padding-x: var(--space-4);\n  --button-padding-y: var(--space-2);\n}\n\nSemantic tokens are the most important layer — they enable theming. Component tokens are optional and useful for complex component libraries."
      },
      {
        "title": "Pattern 2: Theme Switching with React",
        "body": "Key capabilities: theme (user selection), resolvedTheme (actual light/dark), setTheme, system preference detection, localStorage persistence, DOM attribute application.\n\ntype Theme = \"light\" | \"dark\" | \"system\";\n\nexport function ThemeProvider({ children, defaultTheme = \"system\", storageKey = \"theme\",\n  attribute = \"data-theme\" }: { children: React.ReactNode; defaultTheme?: Theme;\n  storageKey?: string; attribute?: \"class\" | \"data-theme\" }) {\n  const [theme, setThemeState] = useState<Theme>(() =>\n    typeof window === \"undefined\" ? defaultTheme\n      : (localStorage.getItem(storageKey) as Theme) || defaultTheme);\n  const [resolvedTheme, setResolvedTheme] = useState<\"light\" | \"dark\">(\"light\");\n\n  const getSystem = useCallback(() =>\n    matchMedia(\"(prefers-color-scheme: dark)\").matches ? \"dark\" : \"light\" as const, []);\n\n  const apply = useCallback((r: \"light\" | \"dark\") => {\n    const root = document.documentElement;\n    attribute === \"class\"\n      ? (root.classList.remove(\"light\", \"dark\"), root.classList.add(r))\n      : root.setAttribute(attribute, r);\n    root.style.colorScheme = r;\n    setResolvedTheme(r);\n  }, [attribute]);\n\n  useEffect(() => { apply(theme === \"system\" ? getSystem() : theme); }, [theme, apply, getSystem]);\n\n  useEffect(() => {  // Listen for system preference changes\n    if (theme !== \"system\") return;\n    const mq = matchMedia(\"(prefers-color-scheme: dark)\");\n    const handler = () => apply(getSystem());\n    mq.addEventListener(\"change\", handler);\n    return () => mq.removeEventListener(\"change\", handler);\n  }, [theme, apply, getSystem]);\n\n  const setTheme = useCallback((t: Theme) => {\n    localStorage.setItem(storageKey, t); setThemeState(t);\n  }, [storageKey]);\n\n  return <ThemeContext.Provider value={{ theme, resolvedTheme, setTheme }}>\n    {children}\n  </ThemeContext.Provider>;\n}\n\nFull implementation with toggleTheme, disableTransitionOnChange, and testing patterns in references/theming-architecture.md."
      },
      {
        "title": "Preventing FOUC in SSR (Next.js)",
        "body": "Inline script in <head> runs before paint:\n\nconst themeScript = `(function(){\n  var t=localStorage.getItem('theme')||'system';\n  var d=t==='dark'||(t==='system'&&matchMedia('(prefers-color-scheme:dark)').matches);\n  document.documentElement.setAttribute('data-theme',d?'dark':'light');\n  document.documentElement.style.colorScheme=d?'dark':'light';\n})()`;\n\n// In layout.tsx\n<html lang=\"en\" suppressHydrationWarning>\n  <head>\n    <script dangerouslySetInnerHTML={{ __html: themeScript }} />\n  </head>\n  <body><ThemeProvider>{children}</ThemeProvider></body>\n</html>"
      },
      {
        "title": "Pattern 3: Multi-Brand Theming",
        "body": "Layer brand tokens on top of semantic tokens for white-label products:\n\n[data-brand=\"corporate\"] {\n  --brand-primary: #0066cc;\n  --brand-primary-hover: #0052a3;\n  --brand-font-heading: \"Helvetica Neue\", sans-serif;\n  --brand-radius: 0.25rem;\n}\n\n[data-brand=\"startup\"] {\n  --brand-primary: #7c3aed;\n  --brand-primary-hover: #6d28d9;\n  --brand-font-heading: \"Poppins\", sans-serif;\n  --brand-radius: 1rem;\n}\n\n/* Map brand tokens into semantic tokens */\n:root {\n  --interactive-primary: var(--brand-primary);\n  --interactive-primary-hover: var(--brand-primary-hover);\n}"
      },
      {
        "title": "Pattern 4: Style Dictionary Pipeline",
        "body": "Multi-platform token generation from a single JSON source:\n\n// style-dictionary.config.js — generates CSS, iOS Swift, and Android XML\nmodule.exports = {\n  source: [\"tokens/**/*.json\"],\n  platforms: {\n    css: {\n      transformGroup: \"css\", buildPath: \"dist/css/\",\n      files: [{ destination: \"variables.css\", format: \"css/variables\",\n        options: { outputReferences: true } }],\n    },\n    ios: {\n      transformGroup: \"ios-swift\", buildPath: \"dist/ios/\",\n      files: [{ destination: \"DesignTokens.swift\", format: \"ios-swift/class.swift\",\n        className: \"DesignTokens\" }],\n    },\n    android: {\n      transformGroup: \"android\", buildPath: \"dist/android/\",\n      files: [{ destination: \"colors.xml\", format: \"android/colors\",\n        filter: { attributes: { category: \"color\" } } }],\n    },\n  },\n};\n\nSee references/design-tokens.md for token category definitions, custom transforms, and platform-specific output examples."
      },
      {
        "title": "Pattern 5: Accessibility Tokens",
        "body": "@media (prefers-reduced-motion: reduce) {\n  :root {\n    --duration-fast: 0ms;\n    --duration-normal: 0ms;\n    --duration-slow: 0ms;\n  }\n}\n\n@media (prefers-contrast: high) {\n  :root {\n    --text-primary: #000000;\n    --surface-default: #ffffff;\n    --border-default: #000000;\n    --interactive-primary: #0000ee;\n  }\n}\n\n@media (forced-colors: active) {\n  .button { border: 2px solid currentColor; }\n  .card { border: 1px solid CanvasText; }\n}"
      },
      {
        "title": "Token Naming Conventions",
        "body": "Format: [category]-[property]-[variant]-[state] (e.g. color-border-input-focus)\n\nkebab-case — text-primary not textPrimary\nSemantic names — danger not red\nState suffixes — -hover, -focus, -active, -disabled\nScale indicators — spacing-4, font-size-lg"
      },
      {
        "title": "Token Governance",
        "body": "Change management: Propose → Review (design + eng) → Test (all platforms/themes) → Deprecate (with migration path) → Remove (after deprecation period).\n\n{\n  \"color.primary\": {\n    \"value\": \"{color.primitive.blue.500}\",\n    \"deprecated\": true,\n    \"deprecatedMessage\": \"Use semantic.accent.default instead\",\n    \"replacedBy\": \"semantic.accent.default\"\n  }\n}"
      },
      {
        "title": "Best Practices",
        "body": "Name tokens by purpose — semantic names, not visual descriptions\nMaintain the hierarchy — primitives → semantic → component\nVersion tokens — treat token changes as API changes with semver\nTest all theme combinations — every theme must work with every component\nAutomate the pipeline — CI/CD for Figma-to-code synchronization\nProvide migration paths — deprecate gradually with clear alternatives\nValidate contrast — automated WCAG AA/AAA checks on token pairs"
      },
      {
        "title": "Common Pitfalls",
        "body": "Token sprawl — too many tokens without clear hierarchy\nInconsistent naming — mixing camelCase and kebab-case\nHardcoded values — using raw hex/rem instead of token references\nCircular references — tokens referencing each other in loops\nPlatform gaps — tokens defined for web but missing for mobile\nMissing dark mode — semantic tokens that don't adapt to themes"
      },
      {
        "title": "Related Skills",
        "body": "design-system-components — CVA variant patterns and Surface primitives\ndistinctive-design-systems — Aesthetic documentation and visual identity\ntheme-factory — Pre-built theme palettes for artifacts"
      },
      {
        "title": "References",
        "body": "references/design-tokens.md — Complete token category definitions\nreferences/theming-architecture.md — Detailed theming implementation\nreferences/component-architecture.md — Compound, polymorphic, and headless patterns"
      }
    ],
    "body": "Design System Patterns\n\nFoundational architecture for scalable design systems: token hierarchies, theming infrastructure, token pipelines, and governance patterns.\n\nWhen to Use\nDefining token architecture (primitive → semantic → component layers)\nImplementing light/dark/system theme switching with React\nSetting up Style Dictionary or Figma-to-code token pipelines\nBuilding multi-brand theming systems\nEstablishing token naming conventions and governance\nPreventing flash of unstyled content (FOUC) in SSR\nPattern 1: Token Hierarchy\n\nThree-layer token architecture separates raw values from meaning from usage.\n\n/* Layer 1: Primitive tokens — raw values, never used directly in components */\n:root {\n  --color-blue-500: #3b82f6;\n  --color-blue-600: #2563eb;\n  --color-gray-50: #fafafa;\n  --color-gray-900: #171717;\n\n  --space-1: 0.25rem;\n  --space-2: 0.5rem;\n  --space-4: 1rem;\n\n  --font-size-sm: 0.875rem;\n  --font-size-base: 1rem;\n  --radius-sm: 0.25rem;\n  --radius-md: 0.5rem;\n}\n\n/* Layer 2: Semantic tokens — contextual meaning, theme-aware */\n:root {\n  --text-primary: var(--color-gray-900);\n  --text-secondary: var(--color-gray-600);\n  --surface-default: white;\n  --surface-elevated: var(--color-gray-50);\n  --border-default: var(--color-gray-200);\n  --interactive-primary: var(--color-blue-500);\n  --interactive-primary-hover: var(--color-blue-600);\n}\n\n/* Layer 3: Component tokens — specific usage, optional */\n:root {\n  --button-bg: var(--interactive-primary);\n  --button-bg-hover: var(--interactive-primary-hover);\n  --button-text: white;\n  --button-radius: var(--radius-md);\n  --button-padding-x: var(--space-4);\n  --button-padding-y: var(--space-2);\n}\n\n\nSemantic tokens are the most important layer — they enable theming. Component tokens are optional and useful for complex component libraries.\n\nPattern 2: Theme Switching with React\n\nKey capabilities: theme (user selection), resolvedTheme (actual light/dark), setTheme, system preference detection, localStorage persistence, DOM attribute application.\n\ntype Theme = \"light\" | \"dark\" | \"system\";\n\nexport function ThemeProvider({ children, defaultTheme = \"system\", storageKey = \"theme\",\n  attribute = \"data-theme\" }: { children: React.ReactNode; defaultTheme?: Theme;\n  storageKey?: string; attribute?: \"class\" | \"data-theme\" }) {\n  const [theme, setThemeState] = useState<Theme>(() =>\n    typeof window === \"undefined\" ? defaultTheme\n      : (localStorage.getItem(storageKey) as Theme) || defaultTheme);\n  const [resolvedTheme, setResolvedTheme] = useState<\"light\" | \"dark\">(\"light\");\n\n  const getSystem = useCallback(() =>\n    matchMedia(\"(prefers-color-scheme: dark)\").matches ? \"dark\" : \"light\" as const, []);\n\n  const apply = useCallback((r: \"light\" | \"dark\") => {\n    const root = document.documentElement;\n    attribute === \"class\"\n      ? (root.classList.remove(\"light\", \"dark\"), root.classList.add(r))\n      : root.setAttribute(attribute, r);\n    root.style.colorScheme = r;\n    setResolvedTheme(r);\n  }, [attribute]);\n\n  useEffect(() => { apply(theme === \"system\" ? getSystem() : theme); }, [theme, apply, getSystem]);\n\n  useEffect(() => {  // Listen for system preference changes\n    if (theme !== \"system\") return;\n    const mq = matchMedia(\"(prefers-color-scheme: dark)\");\n    const handler = () => apply(getSystem());\n    mq.addEventListener(\"change\", handler);\n    return () => mq.removeEventListener(\"change\", handler);\n  }, [theme, apply, getSystem]);\n\n  const setTheme = useCallback((t: Theme) => {\n    localStorage.setItem(storageKey, t); setThemeState(t);\n  }, [storageKey]);\n\n  return <ThemeContext.Provider value={{ theme, resolvedTheme, setTheme }}>\n    {children}\n  </ThemeContext.Provider>;\n}\n\n\nFull implementation with toggleTheme, disableTransitionOnChange, and testing patterns in references/theming-architecture.md.\n\nPreventing FOUC in SSR (Next.js)\n\nInline script in <head> runs before paint:\n\nconst themeScript = `(function(){\n  var t=localStorage.getItem('theme')||'system';\n  var d=t==='dark'||(t==='system'&&matchMedia('(prefers-color-scheme:dark)').matches);\n  document.documentElement.setAttribute('data-theme',d?'dark':'light');\n  document.documentElement.style.colorScheme=d?'dark':'light';\n})()`;\n\n// In layout.tsx\n<html lang=\"en\" suppressHydrationWarning>\n  <head>\n    <script dangerouslySetInnerHTML={{ __html: themeScript }} />\n  </head>\n  <body><ThemeProvider>{children}</ThemeProvider></body>\n</html>\n\nPattern 3: Multi-Brand Theming\n\nLayer brand tokens on top of semantic tokens for white-label products:\n\n[data-brand=\"corporate\"] {\n  --brand-primary: #0066cc;\n  --brand-primary-hover: #0052a3;\n  --brand-font-heading: \"Helvetica Neue\", sans-serif;\n  --brand-radius: 0.25rem;\n}\n\n[data-brand=\"startup\"] {\n  --brand-primary: #7c3aed;\n  --brand-primary-hover: #6d28d9;\n  --brand-font-heading: \"Poppins\", sans-serif;\n  --brand-radius: 1rem;\n}\n\n/* Map brand tokens into semantic tokens */\n:root {\n  --interactive-primary: var(--brand-primary);\n  --interactive-primary-hover: var(--brand-primary-hover);\n}\n\nPattern 4: Style Dictionary Pipeline\n\nMulti-platform token generation from a single JSON source:\n\n// style-dictionary.config.js — generates CSS, iOS Swift, and Android XML\nmodule.exports = {\n  source: [\"tokens/**/*.json\"],\n  platforms: {\n    css: {\n      transformGroup: \"css\", buildPath: \"dist/css/\",\n      files: [{ destination: \"variables.css\", format: \"css/variables\",\n        options: { outputReferences: true } }],\n    },\n    ios: {\n      transformGroup: \"ios-swift\", buildPath: \"dist/ios/\",\n      files: [{ destination: \"DesignTokens.swift\", format: \"ios-swift/class.swift\",\n        className: \"DesignTokens\" }],\n    },\n    android: {\n      transformGroup: \"android\", buildPath: \"dist/android/\",\n      files: [{ destination: \"colors.xml\", format: \"android/colors\",\n        filter: { attributes: { category: \"color\" } } }],\n    },\n  },\n};\n\n\nSee references/design-tokens.md for token category definitions, custom transforms, and platform-specific output examples.\n\nPattern 5: Accessibility Tokens\n@media (prefers-reduced-motion: reduce) {\n  :root {\n    --duration-fast: 0ms;\n    --duration-normal: 0ms;\n    --duration-slow: 0ms;\n  }\n}\n\n@media (prefers-contrast: high) {\n  :root {\n    --text-primary: #000000;\n    --surface-default: #ffffff;\n    --border-default: #000000;\n    --interactive-primary: #0000ee;\n  }\n}\n\n@media (forced-colors: active) {\n  .button { border: 2px solid currentColor; }\n  .card { border: 1px solid CanvasText; }\n}\n\nToken Naming Conventions\n\nFormat: [category]-[property]-[variant]-[state] (e.g. color-border-input-focus)\n\nkebab-case — text-primary not textPrimary\nSemantic names — danger not red\nState suffixes — -hover, -focus, -active, -disabled\nScale indicators — spacing-4, font-size-lg\nToken Governance\n\nChange management: Propose → Review (design + eng) → Test (all platforms/themes) → Deprecate (with migration path) → Remove (after deprecation period).\n\n{\n  \"color.primary\": {\n    \"value\": \"{color.primitive.blue.500}\",\n    \"deprecated\": true,\n    \"deprecatedMessage\": \"Use semantic.accent.default instead\",\n    \"replacedBy\": \"semantic.accent.default\"\n  }\n}\n\nBest Practices\nName tokens by purpose — semantic names, not visual descriptions\nMaintain the hierarchy — primitives → semantic → component\nVersion tokens — treat token changes as API changes with semver\nTest all theme combinations — every theme must work with every component\nAutomate the pipeline — CI/CD for Figma-to-code synchronization\nProvide migration paths — deprecate gradually with clear alternatives\nValidate contrast — automated WCAG AA/AAA checks on token pairs\nCommon Pitfalls\nToken sprawl — too many tokens without clear hierarchy\nInconsistent naming — mixing camelCase and kebab-case\nHardcoded values — using raw hex/rem instead of token references\nCircular references — tokens referencing each other in loops\nPlatform gaps — tokens defined for web but missing for mobile\nMissing dark mode — semantic tokens that don't adapt to themes\nRelated Skills\ndesign-system-components — CVA variant patterns and Surface primitives\ndistinctive-design-systems — Aesthetic documentation and visual identity\ntheme-factory — Pre-built theme palettes for artifacts\nReferences\nreferences/design-tokens.md — Complete token category definitions\nreferences/theming-architecture.md — Detailed theming implementation\nreferences/component-architecture.md — Compound, polymorphic, and headless patterns"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/wpank/design-system-patterns",
    "publisherUrl": "https://clawhub.ai/wpank/design-system-patterns",
    "owner": "wpank",
    "version": "1.0.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/design-system-patterns",
    "downloadUrl": "https://openagent3.xyz/downloads/design-system-patterns",
    "agentUrl": "https://openagent3.xyz/skills/design-system-patterns/agent",
    "manifestUrl": "https://openagent3.xyz/skills/design-system-patterns/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/design-system-patterns/agent.md"
  }
}