{
  "schemaVersion": "1.0",
  "item": {
    "slug": "financial-design-systems",
    "name": "Financial Design Systems",
    "source": "tencent",
    "type": "skill",
    "category": "AI 智能",
    "sourceUrl": "https://clawhub.ai/wpank/financial-design-systems",
    "canonicalUrl": "https://clawhub.ai/wpank/financial-design-systems",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/financial-design-systems",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=financial-design-systems",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "README.md",
      "SKILL.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/financial-design-systems"
    },
    "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/financial-design-systems",
    "agentPageUrl": "https://openagent3.xyz/skills/financial-design-systems/agent",
    "manifestUrl": "https://openagent3.xyz/skills/financial-design-systems/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/financial-design-systems/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": "Financial Data Visualization",
        "body": "Build dark-themed financial charts and visualizations that are readable, beautiful, and consistent with modern trading UIs."
      },
      {
        "title": "When to Use",
        "body": "Building trading dashboards with charts\nDisplaying portfolio performance\nShowing price history and trends\nAny financial data visualization"
      },
      {
        "title": "Pattern 1: Chart Color Palette",
        "body": "// lib/chart-theme.ts\nexport const chartColors = {\n  // Gains/Losses\n  positive: 'hsl(154 80% 60%)',    // Green\n  negative: 'hsl(346 80% 62%)',    // Red\n  neutral: 'hsl(216 90% 68%)',     // Blue\n  \n  // Backgrounds\n  background: 'hsl(222 47% 11%)',\n  surface: 'hsl(222 47% 15%)',\n  grid: 'hsl(222 47% 20%)',\n  \n  // Text\n  textPrimary: 'hsl(210 40% 98%)',\n  textSecondary: 'hsl(215 20% 65%)',\n  textMuted: 'hsl(215 20% 45%)',\n  \n  // Data series\n  series: [\n    'hsl(200 90% 65%)',  // Cyan\n    'hsl(280 90% 65%)',  // Purple\n    'hsl(45 90% 65%)',   // Gold\n    'hsl(160 90% 65%)',  // Teal\n    'hsl(320 90% 65%)',  // Pink\n  ],\n};"
      },
      {
        "title": "Pattern 2: Recharts Theme Config",
        "body": "// components/charts/chart-config.ts\nimport { chartColors } from '@/lib/chart-theme';\n\nexport const chartConfig = {\n  // Axis styling\n  axisStyle: {\n    stroke: chartColors.textMuted,\n    fontSize: 11,\n    fontFamily: 'var(--font-mono)',\n  },\n  \n  // Grid styling\n  gridStyle: {\n    stroke: chartColors.grid,\n    strokeDasharray: '3 3',\n  },\n  \n  // Tooltip styling\n  tooltipStyle: {\n    backgroundColor: chartColors.surface,\n    border: `1px solid ${chartColors.grid}`,\n    borderRadius: '8px',\n    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',\n  },\n};\n\n// Custom tooltip component\nexport function ChartTooltip({ active, payload, label }: any) {\n  if (!active || !payload) return null;\n\n  return (\n    <div\n      className=\"rounded-lg border bg-popover px-3 py-2 shadow-lg\"\n      style={chartConfig.tooltipStyle}\n    >\n      <p className=\"text-xs text-muted-foreground mb-1\">{label}</p>\n      {payload.map((entry: any, index: number) => (\n        <p\n          key={index}\n          className=\"text-sm font-mono tabular-nums\"\n          style={{ color: entry.color }}\n        >\n          {entry.name}: {formatCurrency(entry.value)}\n        </p>\n      ))}\n    </div>\n  );\n}"
      },
      {
        "title": "Pattern 3: Price Chart Component",
        "body": "import {\n  AreaChart,\n  Area,\n  XAxis,\n  YAxis,\n  Tooltip,\n  ResponsiveContainer,\n} from 'recharts';\n\ninterface PriceChartProps {\n  data: { time: string; price: number }[];\n  isPositive?: boolean;\n}\n\nexport function PriceChart({ data, isPositive = true }: PriceChartProps) {\n  const color = isPositive ? chartColors.positive : chartColors.negative;\n  \n  return (\n    <ResponsiveContainer width=\"100%\" height={200}>\n      <AreaChart data={data}>\n        <defs>\n          <linearGradient id=\"priceGradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop offset=\"0%\" stopColor={color} stopOpacity={0.3} />\n            <stop offset=\"100%\" stopColor={color} stopOpacity={0} />\n          </linearGradient>\n        </defs>\n        \n        <XAxis\n          dataKey=\"time\"\n          axisLine={false}\n          tickLine={false}\n          tick={{ ...chartConfig.axisStyle }}\n        />\n        \n        <YAxis\n          domain={['auto', 'auto']}\n          axisLine={false}\n          tickLine={false}\n          tick={{ ...chartConfig.axisStyle }}\n          tickFormatter={(value) => formatCompact(value)}\n        />\n        \n        <Tooltip content={<ChartTooltip />} />\n        \n        <Area\n          type=\"monotone\"\n          dataKey=\"price\"\n          stroke={color}\n          strokeWidth={2}\n          fill=\"url(#priceGradient)\"\n        />\n      </AreaChart>\n    </ResponsiveContainer>\n  );\n}"
      },
      {
        "title": "Pattern 4: Candlestick Colors",
        "body": "export const candlestickColors = {\n  up: {\n    fill: 'hsl(154 80% 60%)',\n    stroke: 'hsl(154 80% 50%)',\n  },\n  down: {\n    fill: 'hsl(346 80% 62%)',\n    stroke: 'hsl(346 80% 52%)',\n  },\n  wick: 'hsl(215 20% 45%)',\n};\n\n// Usage with lightweight-charts or similar\nconst candlestickSeries = chart.addCandlestickSeries({\n  upColor: candlestickColors.up.fill,\n  downColor: candlestickColors.down.fill,\n  borderUpColor: candlestickColors.up.stroke,\n  borderDownColor: candlestickColors.down.stroke,\n  wickUpColor: candlestickColors.wick,\n  wickDownColor: candlestickColors.wick,\n});"
      },
      {
        "title": "Pattern 5: Percentage Bar",
        "body": "interface PercentageBarProps {\n  value: number;  // -100 to 100\n  showLabel?: boolean;\n}\n\nexport function PercentageBar({ value, showLabel = true }: PercentageBarProps) {\n  const isPositive = value >= 0;\n  const absValue = Math.min(Math.abs(value), 100);\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      {/* Negative side */}\n      <div className=\"flex-1 flex justify-end\">\n        {!isPositive && (\n          <div\n            className=\"h-2 rounded-l bg-destructive\"\n            style={{ width: `${absValue}%` }}\n          />\n        )}\n      </div>\n      \n      {/* Center divider */}\n      <div className=\"w-px h-4 bg-border\" />\n      \n      {/* Positive side */}\n      <div className=\"flex-1\">\n        {isPositive && (\n          <div\n            className=\"h-2 rounded-r bg-success\"\n            style={{ width: `${absValue}%` }}\n          />\n        )}\n      </div>\n      \n      {showLabel && (\n        <span\n          className={cn(\n            'text-xs font-mono tabular-nums w-12 text-right',\n            isPositive ? 'text-success' : 'text-destructive'\n          )}\n        >\n          {formatPercentage(value)}\n        </span>\n      )}\n    </div>\n  );\n}"
      },
      {
        "title": "Pattern 6: Mini Sparkline",
        "body": "interface SparklineProps {\n  data: number[];\n  width?: number;\n  height?: number;\n}\n\nexport function Sparkline({ data, width = 80, height = 24 }: SparklineProps) {\n  const first = data[0];\n  const last = data[data.length - 1];\n  const isPositive = last >= first;\n  const color = isPositive ? chartColors.positive : chartColors.negative;\n\n  const min = Math.min(...data);\n  const max = Math.max(...data);\n  const range = max - min || 1;\n\n  const points = data\n    .map((value, i) => {\n      const x = (i / (data.length - 1)) * width;\n      const y = height - ((value - min) / range) * height;\n      return `${x},${y}`;\n    })\n    .join(' ');\n\n  return (\n    <svg width={width} height={height} className=\"overflow-visible\">\n      <polyline\n        points={points}\n        fill=\"none\"\n        stroke={color}\n        strokeWidth={1.5}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}"
      },
      {
        "title": "Pattern 7: Chart Legend",
        "body": "interface LegendItem {\n  label: string;\n  color: string;\n  value?: string;\n}\n\nexport function ChartLegend({ items }: { items: LegendItem[] }) {\n  return (\n    <div className=\"flex flex-wrap gap-4\">\n      {items.map((item) => (\n        <div key={item.label} className=\"flex items-center gap-2\">\n          <div\n            className=\"size-3 rounded-full\"\n            style={{ backgroundColor: item.color }}\n          />\n          <span className=\"text-xs text-muted-foreground\">{item.label}</span>\n          {item.value && (\n            <span className=\"text-xs font-mono\">{item.value}</span>\n          )}\n        </div>\n      ))}\n    </div>\n  );\n}"
      },
      {
        "title": "Related Skills",
        "body": "Meta-skill: ai/skills/meta/design-system-creation/ — Complete design system workflow\nanimated-financial-display — Number animations and value flash effects\ndual-stream-architecture — Real-time data streaming patterns"
      },
      {
        "title": "NEVER Do",
        "body": "Use light theme colors — Ensure sufficient contrast on dark backgrounds\nUse red/green without considering colorblind users — Add shapes or patterns\nSkip grid lines — They help read values\nUse thick strokes — 1-2px is optimal for data lines\nAnimate charts on every data point — Reserve animation for initial load"
      },
      {
        "title": "Quick Reference",
        "body": "// Color assignment\nconst color = value >= 0 ? chartColors.positive : chartColors.negative;\n\n// Gradient definition\n<linearGradient id=\"gradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n  <stop offset=\"0%\" stopColor={color} stopOpacity={0.3} />\n  <stop offset=\"100%\" stopColor={color} stopOpacity={0} />\n</linearGradient>\n\n// Axis styling\n<XAxis tick={{ fill: chartColors.textMuted, fontSize: 11 }} />\n\n// Tooltip styling\n<Tooltip contentStyle={{ background: chartColors.surface }} />"
      }
    ],
    "body": "Financial Data Visualization\n\nBuild dark-themed financial charts and visualizations that are readable, beautiful, and consistent with modern trading UIs.\n\nWhen to Use\nBuilding trading dashboards with charts\nDisplaying portfolio performance\nShowing price history and trends\nAny financial data visualization\nPattern 1: Chart Color Palette\n// lib/chart-theme.ts\nexport const chartColors = {\n  // Gains/Losses\n  positive: 'hsl(154 80% 60%)',    // Green\n  negative: 'hsl(346 80% 62%)',    // Red\n  neutral: 'hsl(216 90% 68%)',     // Blue\n  \n  // Backgrounds\n  background: 'hsl(222 47% 11%)',\n  surface: 'hsl(222 47% 15%)',\n  grid: 'hsl(222 47% 20%)',\n  \n  // Text\n  textPrimary: 'hsl(210 40% 98%)',\n  textSecondary: 'hsl(215 20% 65%)',\n  textMuted: 'hsl(215 20% 45%)',\n  \n  // Data series\n  series: [\n    'hsl(200 90% 65%)',  // Cyan\n    'hsl(280 90% 65%)',  // Purple\n    'hsl(45 90% 65%)',   // Gold\n    'hsl(160 90% 65%)',  // Teal\n    'hsl(320 90% 65%)',  // Pink\n  ],\n};\n\nPattern 2: Recharts Theme Config\n// components/charts/chart-config.ts\nimport { chartColors } from '@/lib/chart-theme';\n\nexport const chartConfig = {\n  // Axis styling\n  axisStyle: {\n    stroke: chartColors.textMuted,\n    fontSize: 11,\n    fontFamily: 'var(--font-mono)',\n  },\n  \n  // Grid styling\n  gridStyle: {\n    stroke: chartColors.grid,\n    strokeDasharray: '3 3',\n  },\n  \n  // Tooltip styling\n  tooltipStyle: {\n    backgroundColor: chartColors.surface,\n    border: `1px solid ${chartColors.grid}`,\n    borderRadius: '8px',\n    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',\n  },\n};\n\n// Custom tooltip component\nexport function ChartTooltip({ active, payload, label }: any) {\n  if (!active || !payload) return null;\n\n  return (\n    <div\n      className=\"rounded-lg border bg-popover px-3 py-2 shadow-lg\"\n      style={chartConfig.tooltipStyle}\n    >\n      <p className=\"text-xs text-muted-foreground mb-1\">{label}</p>\n      {payload.map((entry: any, index: number) => (\n        <p\n          key={index}\n          className=\"text-sm font-mono tabular-nums\"\n          style={{ color: entry.color }}\n        >\n          {entry.name}: {formatCurrency(entry.value)}\n        </p>\n      ))}\n    </div>\n  );\n}\n\nPattern 3: Price Chart Component\nimport {\n  AreaChart,\n  Area,\n  XAxis,\n  YAxis,\n  Tooltip,\n  ResponsiveContainer,\n} from 'recharts';\n\ninterface PriceChartProps {\n  data: { time: string; price: number }[];\n  isPositive?: boolean;\n}\n\nexport function PriceChart({ data, isPositive = true }: PriceChartProps) {\n  const color = isPositive ? chartColors.positive : chartColors.negative;\n  \n  return (\n    <ResponsiveContainer width=\"100%\" height={200}>\n      <AreaChart data={data}>\n        <defs>\n          <linearGradient id=\"priceGradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop offset=\"0%\" stopColor={color} stopOpacity={0.3} />\n            <stop offset=\"100%\" stopColor={color} stopOpacity={0} />\n          </linearGradient>\n        </defs>\n        \n        <XAxis\n          dataKey=\"time\"\n          axisLine={false}\n          tickLine={false}\n          tick={{ ...chartConfig.axisStyle }}\n        />\n        \n        <YAxis\n          domain={['auto', 'auto']}\n          axisLine={false}\n          tickLine={false}\n          tick={{ ...chartConfig.axisStyle }}\n          tickFormatter={(value) => formatCompact(value)}\n        />\n        \n        <Tooltip content={<ChartTooltip />} />\n        \n        <Area\n          type=\"monotone\"\n          dataKey=\"price\"\n          stroke={color}\n          strokeWidth={2}\n          fill=\"url(#priceGradient)\"\n        />\n      </AreaChart>\n    </ResponsiveContainer>\n  );\n}\n\nPattern 4: Candlestick Colors\nexport const candlestickColors = {\n  up: {\n    fill: 'hsl(154 80% 60%)',\n    stroke: 'hsl(154 80% 50%)',\n  },\n  down: {\n    fill: 'hsl(346 80% 62%)',\n    stroke: 'hsl(346 80% 52%)',\n  },\n  wick: 'hsl(215 20% 45%)',\n};\n\n// Usage with lightweight-charts or similar\nconst candlestickSeries = chart.addCandlestickSeries({\n  upColor: candlestickColors.up.fill,\n  downColor: candlestickColors.down.fill,\n  borderUpColor: candlestickColors.up.stroke,\n  borderDownColor: candlestickColors.down.stroke,\n  wickUpColor: candlestickColors.wick,\n  wickDownColor: candlestickColors.wick,\n});\n\nPattern 5: Percentage Bar\ninterface PercentageBarProps {\n  value: number;  // -100 to 100\n  showLabel?: boolean;\n}\n\nexport function PercentageBar({ value, showLabel = true }: PercentageBarProps) {\n  const isPositive = value >= 0;\n  const absValue = Math.min(Math.abs(value), 100);\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      {/* Negative side */}\n      <div className=\"flex-1 flex justify-end\">\n        {!isPositive && (\n          <div\n            className=\"h-2 rounded-l bg-destructive\"\n            style={{ width: `${absValue}%` }}\n          />\n        )}\n      </div>\n      \n      {/* Center divider */}\n      <div className=\"w-px h-4 bg-border\" />\n      \n      {/* Positive side */}\n      <div className=\"flex-1\">\n        {isPositive && (\n          <div\n            className=\"h-2 rounded-r bg-success\"\n            style={{ width: `${absValue}%` }}\n          />\n        )}\n      </div>\n      \n      {showLabel && (\n        <span\n          className={cn(\n            'text-xs font-mono tabular-nums w-12 text-right',\n            isPositive ? 'text-success' : 'text-destructive'\n          )}\n        >\n          {formatPercentage(value)}\n        </span>\n      )}\n    </div>\n  );\n}\n\nPattern 6: Mini Sparkline\ninterface SparklineProps {\n  data: number[];\n  width?: number;\n  height?: number;\n}\n\nexport function Sparkline({ data, width = 80, height = 24 }: SparklineProps) {\n  const first = data[0];\n  const last = data[data.length - 1];\n  const isPositive = last >= first;\n  const color = isPositive ? chartColors.positive : chartColors.negative;\n\n  const min = Math.min(...data);\n  const max = Math.max(...data);\n  const range = max - min || 1;\n\n  const points = data\n    .map((value, i) => {\n      const x = (i / (data.length - 1)) * width;\n      const y = height - ((value - min) / range) * height;\n      return `${x},${y}`;\n    })\n    .join(' ');\n\n  return (\n    <svg width={width} height={height} className=\"overflow-visible\">\n      <polyline\n        points={points}\n        fill=\"none\"\n        stroke={color}\n        strokeWidth={1.5}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n\nPattern 7: Chart Legend\ninterface LegendItem {\n  label: string;\n  color: string;\n  value?: string;\n}\n\nexport function ChartLegend({ items }: { items: LegendItem[] }) {\n  return (\n    <div className=\"flex flex-wrap gap-4\">\n      {items.map((item) => (\n        <div key={item.label} className=\"flex items-center gap-2\">\n          <div\n            className=\"size-3 rounded-full\"\n            style={{ backgroundColor: item.color }}\n          />\n          <span className=\"text-xs text-muted-foreground\">{item.label}</span>\n          {item.value && (\n            <span className=\"text-xs font-mono\">{item.value}</span>\n          )}\n        </div>\n      ))}\n    </div>\n  );\n}\n\nRelated Skills\nMeta-skill: ai/skills/meta/design-system-creation/ — Complete design system workflow\nanimated-financial-display — Number animations and value flash effects\ndual-stream-architecture — Real-time data streaming patterns\nNEVER Do\nUse light theme colors — Ensure sufficient contrast on dark backgrounds\nUse red/green without considering colorblind users — Add shapes or patterns\nSkip grid lines — They help read values\nUse thick strokes — 1-2px is optimal for data lines\nAnimate charts on every data point — Reserve animation for initial load\nQuick Reference\n// Color assignment\nconst color = value >= 0 ? chartColors.positive : chartColors.negative;\n\n// Gradient definition\n<linearGradient id=\"gradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n  <stop offset=\"0%\" stopColor={color} stopOpacity={0.3} />\n  <stop offset=\"100%\" stopColor={color} stopOpacity={0} />\n</linearGradient>\n\n// Axis styling\n<XAxis tick={{ fill: chartColors.textMuted, fontSize: 11 }} />\n\n// Tooltip styling\n<Tooltip contentStyle={{ background: chartColors.surface }} />"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/wpank/financial-design-systems",
    "publisherUrl": "https://clawhub.ai/wpank/financial-design-systems",
    "owner": "wpank",
    "version": "1.0.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/financial-design-systems",
    "downloadUrl": "https://openagent3.xyz/downloads/financial-design-systems",
    "agentUrl": "https://openagent3.xyz/skills/financial-design-systems/agent",
    "manifestUrl": "https://openagent3.xyz/skills/financial-design-systems/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/financial-design-systems/agent.md"
  }
}