{"schemaVersion":"1.0","kind":"composio-brand-page","generatedAt":"2026-09-20T13:30:01.557Z","page":{"path":"/chart-templates","url":"https://brand.composio.dev/chart-templates","agentJsonPath":"/chart-templates/agent.json","agentJsonUrl":"https://brand.composio.dev/chart-templates/agent.json","title":"Chart Templates","description":"Composio-branded 1200×675 chart cards ready to post on X. Bring data, get a PNG — dithered bars in the shared palette, JetBrains Mono chrome, real Chromium capture (not html-to-image or satori).","category":"assets"},"agent":{"crawlHint":"This endpoint is intentionally machine-readable. Use data for tokens/specs and assets/endpoints for downloadable resources.","notes":["This section is data-first: given raw numbers, pick a template shape by data (leaderboard / comparison / matrix / multi-metric), copy its folder, edit config.ts, register the slug, run pnpm capture <slug>.","Never rename the data file to `template.ts` — that's a reserved Next.js route file and the build silently breaks with an unrelated error.","Every template needs the client `chart.tsx` wrapper so server `page.tsx` files can render the chart without crossing the RSC function-prop boundary.","Capture surfaces must use `<main id=\"chart-capture-root\">` as the root — Playwright's screenshot targets that id.","Do not swap Playwright for html-to-image or satori — html-to-image drops SVG fonts and darkens gradients; satori can't paint the dither canvas.","Read the full workflow in .claude/skills/chart-templates/SKILL.md; internals in reference.md; every non-obvious trap in gotchas.md."]},"data":{"captureSize":{"width":1200,"height":675,"dpr":2},"renderPipeline":"Playwright headless Chromium screenshots the /capture route at exactly 1200×675. Writes to public/og/chart-templates/<slug>.png. Real browser paint — fonts, canvas dither, and colors match the on-screen preview pixel-for-pixel.","captureCommand":"pnpm capture <slug> --port <dev-port>","captureAll":"pnpm capture --all --port <dev-port>","templates":[{"slug":"deepseek-bench-success","title":"DeepSeek V4 Flash — Success rate","shape":"Vertical dither bars, one per item, ranked. Best/worst Δ marker on the right, per-item hue, vendor logos above bars.","previewPath":"/chart-templates/deepseek-bench-success","capturePath":"/chart-templates/deepseek-bench-success/capture","pngPath":"/og/chart-templates/deepseek-bench-success.png"},{"slug":"fastest-growing-apps","title":"Fastest-growing apps on Composio","shape":"Horizontal dither bars with a real x-axis (same layout as deepseek-v4-pro-median-time). Value labels float at each bar's right end. Only difference: app logos pulled live from the Composio logo API via `logoUrl(slug)` instead of local files.","previewPath":"/chart-templates/fastest-growing-apps","capturePath":"/chart-templates/fastest-growing-apps/capture","pngPath":"/og/chart-templates/fastest-growing-apps.png"},{"slug":"deepseek-v4-pro-median-time","title":"DeepSeek V4 Pro — Median time per task","shape":"Horizontal dither bars with a real x-axis (nice-round ticks). Value labels float at each bar's right end; right-edge padding reserved so labels never clip. Use for bench-style ranked single metric with units (seconds, dollars, tokens).","previewPath":"/chart-templates/deepseek-v4-pro-median-time","capturePath":"/chart-templates/deepseek-v4-pro-median-time/capture","pngPath":"/og/chart-templates/deepseek-v4-pro-median-time.png"},{"slug":"deepseek-v4-pro-multichart","title":"DeepSeek V4 Pro across 5 harnesses","shape":"Three side-by-side dither bar panels (Success / Cost / Time). Same hue per item across all panels so the eye can track a harness.","previewPath":"/chart-templates/deepseek-v4-pro-multichart","capturePath":"/chart-templates/deepseek-v4-pro-multichart/capture","pngPath":"/og/chart-templates/deepseek-v4-pro-multichart.png"},{"slug":"bench-harness-matrix","title":"Tasks flipped by harness choice","shape":"N × M pass/fail matrix. Dithered green cells for clean passes, muted red for partials. Lucide Check/X icons with the raw fraction inside each cell.","previewPath":"/chart-templates/bench-harness-matrix","capturePath":"/chart-templates/bench-harness-matrix/capture","pngPath":"/og/chart-templates/bench-harness-matrix.png"}],"folderShape":{"root":"src/app/chart-templates/<slug>/","files":{"config.ts":"data + share text + formatters. Named config.ts (not template.ts — that's a reserved Next.js route file).","chart.tsx":"\"use client\" wrapper that resolves formatter functions from ./config. Needed because server page.tsx can't pass function props across the RSC boundary.","page.tsx":"Hub preview page (Metadata + Download PNG + Share to X). Renders the captured PNG, not the live chart.","capture/page.tsx":"Bare 1200×675 surface. Root MUST be <main id=\"chart-capture-root\"> — Playwright locates the surface by id."}},"designTokens":{"location":"src/app/chart-templates/_lib/spacing.ts","exports":["CAPTURE_SIZE — { width: 1200, height: 675 }","CAPTURE_PADDING — { x, top, bottom, footerY } as Tailwind class strings","CAPTURE_BORDER — border-white/10","CAPTURE_TYPE — { title, caption, meta, badge } — Geist Pixel Square + JetBrains Mono classes","CAPTURE_WORDMARK — Composio wordmark src/height/width/className"],"rule":"Every template imports from spacing.ts — never hard-code padding or type classes. When these change, every template moves together."},"palette":{"source":"src/components/dither-kit/palette.ts","colors":["green","blue","purple","pink","orange","red","grey"],"rule":"Use dither palette entries only for bar/cell fills. Same item across panels keeps the same hue."},"logoSources":{"vendorHarnessLogos":{"location":"public/logos/bench/*.svg","usage":"Reference from config.ts as `logo: \"/logos/bench/<name>.svg\"` on a row."},"composioAppLogos":{"endpoint":"https://logos.composio.dev/api/<slug>","slugRule":"Lowercase, no hyphens. googlemeet works; google-meet and gmeet return the generic fallback.","usage":"Reference as full URL from config.ts. Render with plain <img>, not next/image (avoids remotePatterns config)."}},"registry":"src/app/chart-templates/registry.ts","skill":".claude/skills/chart-templates/SKILL.md"},"assets":[],"endpoints":[{"method":"GET","name":"Templates registry","path":"/chart-templates","description":"Human-facing gallery listing every registered template.","url":"https://brand.composio.dev/chart-templates"}],"index":{"rootAgentJsonPath":"/agent.json","rootAgentJsonUrl":"https://brand.composio.dev/agent.json","llmsTxtPath":"/llms.txt","llmsTxtUrl":"https://brand.composio.dev/llms.txt"}}