{
  "schemaVersion": "1.0",
  "item": {
    "slug": "design-system",
    "name": "Design System",
    "source": "tencent",
    "type": "skill",
    "category": "AI 智能",
    "sourceUrl": "https://clawhub.ai/ivangdavila/design-system",
    "canonicalUrl": "https://clawhub.ai/ivangdavila/design-system",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/design-system",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=design-system",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "SKILL.md",
      "memory-template.md",
      "setup.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. 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. Summarize what changed and any follow-up checks I should run."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "slug": "design-system",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-05-01T02:42:24.558Z",
      "expiresAt": "2026-05-08T02:42:24.558Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=design-system",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=design-system",
        "contentDisposition": "attachment; filename=\"design-system-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null,
        "slug": "design-system"
      },
      "scope": "item",
      "summary": "Item download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this item.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/design-system"
    },
    "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",
    "agentPageUrl": "https://openagent3.xyz/skills/design-system/agent",
    "manifestUrl": "https://openagent3.xyz/skills/design-system/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/design-system/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. 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. Summarize what changed and any follow-up checks I should run."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "Setup",
        "body": "On first use, read setup.md for integration guidelines. All preferences are stored in ~/design-system/memory.md."
      },
      {
        "title": "When to Use",
        "body": "User needs to create, maintain, or extend a design system. Agent handles token architecture, component patterns, documentation structure, and cross-platform consistency."
      },
      {
        "title": "Architecture",
        "body": "Memory lives in ~/design-system/. See memory-template.md for structure.\n\n~/design-system/\n├── memory.md         # Status + context + decisions\n└── tokens/           # Token definitions if exported"
      },
      {
        "title": "Quick Reference",
        "body": "TopicFileSetup processsetup.mdMemory templatememory-template.md"
      },
      {
        "title": "1. Tokens First, Components Second",
        "body": "Design tokens are the foundation. Before building any component:\n\nDefine color tokens (semantic, not raw hex)\nDefine spacing scale (consistent multiplier)\nDefine typography scale (modular)\n\nComponents consume tokens. Never hardcode values."
      },
      {
        "title": "2. Semantic Over Literal Naming",
        "body": "BadGoodblue-500primary14pxtext-sm8pxspace-2\n\nSemantic names survive rebrand. Literal names break everything."
      },
      {
        "title": "3. Three-Tier Token Architecture",
        "body": "Primitive → Semantic → Component\n   ↓           ↓          ↓\n gray-900   text-primary  button-text\n\nPrimitive: Raw values (colors, sizes)\nSemantic: Meaning-based (primary, danger, muted)\nComponent: Specific use (button-bg, card-border)"
      },
      {
        "title": "4. Document Decisions, Not Just Specs",
        "body": "Every token and component needs:\n\nWhat: The value or pattern\nWhen: Usage context\nWhy: The decision behind it\nWhen NOT: Anti-patterns to avoid"
      },
      {
        "title": "5. Platform-Agnostic Source of Truth",
        "body": "Design tokens should export to:\n\nCSS custom properties\nTailwind config\niOS/Android native\nFigma variables\n\nOne source, many outputs. Use Style Dictionary or similar."
      },
      {
        "title": "6. Component API Consistency",
        "body": "All components follow the same patterns:\n\nSame prop naming (variant, size, disabled)\nSame size scale (sm, md, lg)\nSame variant names (primary, secondary, ghost)\n\nPredictability beats cleverness."
      },
      {
        "title": "7. Versioning and Migration",
        "body": "Breaking changes need:\n\nVersion bump (semver)\nMigration guide\nDeprecation warnings before removal\nCodemods when possible"
      },
      {
        "title": "Common Traps",
        "body": "Premature abstraction → Build 3 instances before extracting a pattern\nToken explosion → 50 grays is not a system, it is chaos\nSkipping documentation → Undocumented patterns get reimplemented wrong\nDesigning for edge cases first → Cover 80% well before 100% poorly\nNo dark mode strategy → Retrofit is 10x harder than planning upfront\nInconsistent spacing → Use a scale (4px base), not arbitrary values\nComponent prop sprawl → More than 10 props means split the component"
      },
      {
        "title": "Security & Privacy",
        "body": "Data that stays local:\n\nDesign decisions in ~/design-system/\nToken definitions and component specs\n\nThis skill does NOT:\n\nAccess files outside ~/design-system/\nMake network requests\nStore sensitive data"
      },
      {
        "title": "Related Skills",
        "body": "Install with clawhub install <slug> if user confirms:\n\ncss — Styling fundamentals\ntailwindcss — Utility-first CSS\nfrontend — Frontend development\nui — User interface patterns\ndesign — Design principles"
      },
      {
        "title": "Feedback",
        "body": "If useful: clawhub star design-system\nStay updated: clawhub sync"
      }
    ],
    "body": "Setup\n\nOn first use, read setup.md for integration guidelines. All preferences are stored in ~/design-system/memory.md.\n\nWhen to Use\n\nUser needs to create, maintain, or extend a design system. Agent handles token architecture, component patterns, documentation structure, and cross-platform consistency.\n\nArchitecture\n\nMemory lives in ~/design-system/. See memory-template.md for structure.\n\n~/design-system/\n├── memory.md         # Status + context + decisions\n└── tokens/           # Token definitions if exported\n\nQuick Reference\nTopic\tFile\nSetup process\tsetup.md\nMemory template\tmemory-template.md\nCore Rules\n1. Tokens First, Components Second\n\nDesign tokens are the foundation. Before building any component:\n\nDefine color tokens (semantic, not raw hex)\nDefine spacing scale (consistent multiplier)\nDefine typography scale (modular)\n\nComponents consume tokens. Never hardcode values.\n\n2. Semantic Over Literal Naming\nBad\tGood\nblue-500\tprimary\n14px\ttext-sm\n8px\tspace-2\n\nSemantic names survive rebrand. Literal names break everything.\n\n3. Three-Tier Token Architecture\nPrimitive → Semantic → Component\n   ↓           ↓          ↓\n gray-900   text-primary  button-text\n\nPrimitive: Raw values (colors, sizes)\nSemantic: Meaning-based (primary, danger, muted)\nComponent: Specific use (button-bg, card-border)\n4. Document Decisions, Not Just Specs\n\nEvery token and component needs:\n\nWhat: The value or pattern\nWhen: Usage context\nWhy: The decision behind it\nWhen NOT: Anti-patterns to avoid\n5. Platform-Agnostic Source of Truth\n\nDesign tokens should export to:\n\nCSS custom properties\nTailwind config\niOS/Android native\nFigma variables\n\nOne source, many outputs. Use Style Dictionary or similar.\n\n6. Component API Consistency\n\nAll components follow the same patterns:\n\nSame prop naming (variant, size, disabled)\nSame size scale (sm, md, lg)\nSame variant names (primary, secondary, ghost)\n\nPredictability beats cleverness.\n\n7. Versioning and Migration\n\nBreaking changes need:\n\nVersion bump (semver)\nMigration guide\nDeprecation warnings before removal\nCodemods when possible\nCommon Traps\nPremature abstraction → Build 3 instances before extracting a pattern\nToken explosion → 50 grays is not a system, it is chaos\nSkipping documentation → Undocumented patterns get reimplemented wrong\nDesigning for edge cases first → Cover 80% well before 100% poorly\nNo dark mode strategy → Retrofit is 10x harder than planning upfront\nInconsistent spacing → Use a scale (4px base), not arbitrary values\nComponent prop sprawl → More than 10 props means split the component\nSecurity & Privacy\n\nData that stays local:\n\nDesign decisions in ~/design-system/\nToken definitions and component specs\n\nThis skill does NOT:\n\nAccess files outside ~/design-system/\nMake network requests\nStore sensitive data\nRelated Skills\n\nInstall with clawhub install <slug> if user confirms:\n\ncss — Styling fundamentals\ntailwindcss — Utility-first CSS\nfrontend — Frontend development\nui — User interface patterns\ndesign — Design principles\nFeedback\nIf useful: clawhub star design-system\nStay updated: clawhub sync"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/ivangdavila/design-system",
    "publisherUrl": "https://clawhub.ai/ivangdavila/design-system",
    "owner": "ivangdavila",
    "version": "1.0.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/design-system",
    "downloadUrl": "https://openagent3.xyz/downloads/design-system",
    "agentUrl": "https://openagent3.xyz/skills/design-system/agent",
    "manifestUrl": "https://openagent3.xyz/skills/design-system/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/design-system/agent.md"
  }
}