templates/template.html
templates/template.htmlBrowse 20 files
2,661 tokens
6,796 bytes
Token encoding: o200k_base
Snapshot 24fd22b
← Back to SKILL.md
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=device-width, initial-scale=1.0">6<title>Concept Diagram</title>7<style>8 :root {9 --text-primary: #1a1a18;10 --text-secondary: #5f5e5a;11 --text-tertiary: #88877f;12 --bg-primary: #ffffff;13 --bg-secondary: #f6f5f0;14 --bg-tertiary: #eeedeb;15 --border: rgba(0,0,0,0.15);16 --border-hover: rgba(0,0,0,0.3);17 }18 @media (prefers-color-scheme: dark) {19 :root {20 --text-primary: #e8e6de;21 --text-secondary: #b4b2a9;22 --text-tertiary: #888780;23 --bg-primary: #1a1a18;24 --bg-secondary: #2c2c2a;25 --bg-tertiary: #3d3d3a;26 --border: rgba(255,255,255,0.15);27 --border-hover: rgba(255,255,255,0.3);28 }29 }30 * { margin: 0; padding: 0; box-sizing: border-box; }31 body {32 font-family: system-ui, -apple-system, sans-serif;33 background: var(--bg-tertiary);34 display: flex;35 justify-content: center;36 align-items: flex-start;37 min-height: 100vh;38 padding: 40px 20px;39 }40 .card {41 background: var(--bg-primary);42 border-radius: 16px;43 padding: 32px;44 max-width: 780px;45 width: 100%;46 box-shadow: 0 1px 3px rgba(0,0,0,0.08);47 }48 h1 {49 font-size: 18px;50 font-weight: 500;51 color: var(--text-primary);52 margin-bottom: 8px;53 }54 .subtitle {55 font-size: 13px;56 color: var(--text-tertiary);57 margin-bottom: 24px;58 }59 svg { width: 100%; height: auto; }60 61 /* === SVG Design System Classes === */62 63 /* Text classes */64 .t { font-family: system-ui, -apple-system, sans-serif; font-size: 14px; fill: var(--text-primary); }65 .ts { font-family: system-ui, -apple-system, sans-serif; font-size: 12px; fill: var(--text-secondary); }66 .th { font-family: system-ui, -apple-system, sans-serif; font-size: 14px; fill: var(--text-primary); font-weight: 500; }67 68 /* Neutral box */69 .box { fill: var(--bg-secondary); stroke: var(--border); stroke-width: 0.5px; }70 71 /* Arrow */72 .arr { stroke: var(--text-secondary); stroke-width: 1.5px; fill: none; }73 74 /* Leader line */75 .leader { stroke: var(--text-tertiary); stroke-width: 0.5px; stroke-dasharray: 4 3; fill: none; }76 77 /* Clickable node */78 .node { cursor: pointer; transition: opacity 0.15s; }79 .node:hover { opacity: 0.82; }80 81 /* === Color Ramp Classes (light mode) === */82 .c-purple > rect, .c-purple > circle, .c-purple > ellipse { fill: #EEEDFE; stroke: #534AB7; }83 .c-purple > .th, .c-purple > text.th { fill: #3C3489; }84 .c-purple > .ts, .c-purple > text.ts { fill: #534AB7; }85 .c-purple > .t, .c-purple > text.t { fill: #3C3489; }86 87 .c-teal > rect, .c-teal > circle, .c-teal > ellipse { fill: #E1F5EE; stroke: #0F6E56; }88 .c-teal > .th, .c-teal > text.th { fill: #085041; }89 .c-teal > .ts, .c-teal > text.ts { fill: #0F6E56; }90 .c-teal > .t, .c-teal > text.t { fill: #085041; }91 92 .c-coral > rect, .c-coral > circle, .c-coral > ellipse { fill: #FAECE7; stroke: #993C1D; }93 .c-coral > .th, .c-coral > text.th { fill: #712B13; }94 .c-coral > .ts, .c-coral > text.ts { fill: #993C1D; }95 .c-coral > .t, .c-coral > text.t { fill: #712B13; }96 97 .c-pink > rect, .c-pink > circle, .c-pink > ellipse { fill: #FBEAF0; stroke: #993556; }98 .c-pink > .th, .c-pink > text.th { fill: #72243E; }99 .c-pink > .ts, .c-pink > text.ts { fill: #993556; }100 .c-pink > .t, .c-pink > text.t { fill: #72243E; }101 102 .c-gray > rect, .c-gray > circle, .c-gray > ellipse { fill: #F1EFE8; stroke: #5F5E5A; }103 .c-gray > .th, .c-gray > text.th { fill: #444441; }104 .c-gray > .ts, .c-gray > text.ts { fill: #5F5E5A; }105 .c-gray > .t, .c-gray > text.t { fill: #444441; }106 107 .c-blue > rect, .c-blue > circle, .c-blue > ellipse { fill: #E6F1FB; stroke: #185FA5; }108 .c-blue > .th, .c-blue > text.th { fill: #0C447C; }109 .c-blue > .ts, .c-blue > text.ts { fill: #185FA5; }110 .c-blue > .t, .c-blue > text.t { fill: #0C447C; }111 112 .c-green > rect, .c-green > circle, .c-green > ellipse { fill: #EAF3DE; stroke: #3B6D11; }113 .c-green > .th, .c-green > text.th { fill: #27500A; }114 .c-green > .ts, .c-green > text.ts { fill: #3B6D11; }115 .c-green > .t, .c-green > text.t { fill: #27500A; }116 117 .c-amber > rect, .c-amber > circle, .c-amber > ellipse { fill: #FAEEDA; stroke: #854F0B; }118 .c-amber > .th, .c-amber > text.th { fill: #633806; }119 .c-amber > .ts, .c-amber > text.ts { fill: #854F0B; }120 .c-amber > .t, .c-amber > text.t { fill: #633806; }121 122 .c-red > rect, .c-red > circle, .c-red > ellipse { fill: #FCEBEB; stroke: #A32D2D; }123 .c-red > .th, .c-red > text.th { fill: #791F1F; }124 .c-red > .ts, .c-red > text.ts { fill: #A32D2D; }125 .c-red > .t, .c-red > text.t { fill: #791F1F; }126 127 /* === Dark mode overrides === */128 @media (prefers-color-scheme: dark) {129 .c-purple > rect, .c-purple > circle, .c-purple > ellipse { fill: #3C3489; stroke: #AFA9EC; }130 .c-purple > .th, .c-purple > text.th { fill: #CECBF6; }131 .c-purple > .ts, .c-purple > text.ts { fill: #AFA9EC; }132 133 .c-teal > rect, .c-teal > circle, .c-teal > ellipse { fill: #085041; stroke: #5DCAA5; }134 .c-teal > .th, .c-teal > text.th { fill: #9FE1CB; }135 .c-teal > .ts, .c-teal > text.ts { fill: #5DCAA5; }136 137 .c-coral > rect, .c-coral > circle, .c-coral > ellipse { fill: #712B13; stroke: #F0997B; }138 .c-coral > .th, .c-coral > text.th { fill: #F5C4B3; }139 .c-coral > .ts, .c-coral > text.ts { fill: #F0997B; }140 141 .c-pink > rect, .c-pink > circle, .c-pink > ellipse { fill: #72243E; stroke: #ED93B1; }142 .c-pink > .th, .c-pink > text.th { fill: #F4C0D1; }143 .c-pink > .ts, .c-pink > text.ts { fill: #ED93B1; }144 145 .c-gray > rect, .c-gray > circle, .c-gray > ellipse { fill: #444441; stroke: #B4B2A9; }146 .c-gray > .th, .c-gray > text.th { fill: #D3D1C7; }147 .c-gray > .ts, .c-gray > text.ts { fill: #B4B2A9; }148 149 .c-blue > rect, .c-blue > circle, .c-blue > ellipse { fill: #0C447C; stroke: #85B7EB; }150 .c-blue > .th, .c-blue > text.th { fill: #B5D4F4; }151 .c-blue > .ts, .c-blue > text.ts { fill: #85B7EB; }152 153 .c-green > rect, .c-green > circle, .c-green > ellipse { fill: #27500A; stroke: #97C459; }154 .c-green > .th, .c-green > text.th { fill: #C0DD97; }155 .c-green > .ts, .c-green > text.ts { fill: #97C459; }156 157 .c-amber > rect, .c-amber > circle, .c-amber > ellipse { fill: #633806; stroke: #EF9F27; }158 .c-amber > .th, .c-amber > text.th { fill: #FAC775; }159 .c-amber > .ts, .c-amber > text.ts { fill: #EF9F27; }160 161 .c-red > rect, .c-red > circle, .c-red > ellipse { fill: #791F1F; stroke: #F09595; }162 .c-red > .th, .c-red > text.th { fill: #F7C1C1; }163 .c-red > .ts, .c-red > text.ts { fill: #F09595; }164 }165</style>166</head>167<body>168<div class="card">169 <h1><!-- DIAGRAM TITLE HERE --></h1>170 <p class="subtitle"><!-- OPTIONAL SUBTITLE HERE --></p>171 <!-- PASTE SVG HERE -->172</div>173</body>174</html>175 Referenced from SKILL.md
SKILL.mdView in source ↗
Source excerpt starting at line 41.SKILL.mdView in source ↗412. Lay out components using the Design System rules.423. Write the full HTML page using `templates/template.html` as the wrapper — paste your SVG where the template says `<!-- PASTE SVG HERE -->`.434. Save as a standalone `.html` file (for example `~/my-diagram.html` or `./my-diagram.html`).
Source excerpt starting at line 49.SKILL.mdView in source ↗49```50skill_view(name="concept-diagrams", file_path="templates/template.html")51```
Source excerpt starting at line 261.261# 1. Load the template262template = skill_view("concept-diagrams", "templates/template.html")