{"id":50400627,"url":"https://github.com/misakakuroko/principle-deepdive-html-style","last_synced_at":"2026-05-30T23:03:36.135Z","repository":{"id":358696774,"uuid":"1242649311","full_name":"Misakakuroko/principle-deepdive-html-style","owner":"Misakakuroko","description":"A reusable visual recipe for single-file analytical HTML articles - agent skill for Claude Code and Cursor. Dark/light theme, inline SVG diagrams, zero external dependencies, under 300KB.","archived":false,"fork":false,"pushed_at":"2026-05-18T16:19:12.000Z","size":37,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-18T18:28:33.814Z","etag":null,"topics":["agent-skill","anthropic-skill","claude-code","cursor-skill","dark-mode","deepdive","html-template","offline-first","single-file","technical-documentation"],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Misakakuroko.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-18T16:10:09.000Z","updated_at":"2026-05-18T17:25:19.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/Misakakuroko/principle-deepdive-html-style","commit_stats":null,"previous_names":["misakakuroko/principle-deepdive-html-style"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/Misakakuroko/principle-deepdive-html-style","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Misakakuroko%2Fprinciple-deepdive-html-style","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Misakakuroko%2Fprinciple-deepdive-html-style/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Misakakuroko%2Fprinciple-deepdive-html-style/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Misakakuroko%2Fprinciple-deepdive-html-style/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Misakakuroko","download_url":"https://codeload.github.com/Misakakuroko/principle-deepdive-html-style/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Misakakuroko%2Fprinciple-deepdive-html-style/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33712582,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-30T02:00:06.278Z","response_time":92,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["agent-skill","anthropic-skill","claude-code","cursor-skill","dark-mode","deepdive","html-template","offline-first","single-file","technical-documentation"],"created_at":"2026-05-30T23:03:30.821Z","updated_at":"2026-05-30T23:03:36.119Z","avatar_url":"https://github.com/Misakakuroko.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Principle Deepdive HTML Style\n\n**English** | [中文](README.zh-CN.md)\n\n\u003e A reusable visual recipe for **single-file analytical HTML articles** — dark/light dual-theme, indigo/amber accents, inline-SVG diagrams, collapsible cards, zero external dependencies, offline-readable under 300KB.\n\nPackaged as an [**agent skill**](https://docs.anthropic.com/en/docs/claude-code/skills) for [Claude Code](https://docs.anthropic.com/en/docs/claude-code) and [Cursor](https://cursor.sh/). Drop it in your agent skill directory and the agent will use it whenever you ask for a \"principle deep-dive HTML\" / \"single-file analytical HTML article\" / similar.\n\n---\n\n## What you get\n\nGenerate articles that look like this (light + dark mode):\n\n- **Sticky glass nav** with brand icon + section anchors + theme toggle\n- **Hero block** with gradient eyebrow + main title + lede + meta chips + responsive stat grid + jump-link TOC\n- **Principle sections** in 2-column layout (text + sticky inline-SVG diagram on the right)\n- **Citation cards** (📖 prefix · year + author + venue), **essence boxes** (💡 prefix), **framework-use callouts** (🔧 prefix), **disclaim panels** (⚠️ prefix)\n- **Collapsible solution cards** (`\u003cdetails\u003e/\u003csummary\u003e`) with layer-mapping panels, fit ratings, ETA chips\n- **Combo / roadmap section** with 3-up step cards and engineering implementation plans\n- **Footer** with badge row, cross-link tiles, reference list\n- Everything 100% offline — no CDN, no font import, no image asset, no JS framework\n\nDesigned for: research notes · framework deep-dives · cross-discipline explainers · technical postmortems · benchmark reports.\n\nNot designed for: marketing landing pages · short index pages · chart-heavy dashboards.\n\n---\n\n## Quick install (one line)\n\n### Linux / macOS\n\n```bash\ncurl -fsSL https://raw.githubusercontent.com/Misakakuroko/principle-deepdive-html-style/main/install.sh | bash\n```\n\n### Windows PowerShell\n\n```powershell\nirm https://raw.githubusercontent.com/Misakakuroko/principle-deepdive-html-style/main/install.ps1 | iex\n```\n\nBoth scripts:\n\n1. Auto-detect whether you have Claude Code (`~/.claude/skills/`) or Cursor (`~/.cursor/skills/`) installed — and install to both if both exist\n2. Clone (or update) the skill directory\n3. Print confirmation with the install path\n\nTo override the install location:\n\n```bash\nINSTALL_DIR=~/my-skills/principle-deepdive bash \u003c(curl -fsSL https://raw.githubusercontent.com/Misakakuroko/principle-deepdive-html-style/main/install.sh)\n```\n\n### Manual install\n\n```bash\n# For Claude Code\ngit clone https://github.com/Misakakuroko/principle-deepdive-html-style.git ~/.claude/skills/principle-deepdive-html-style\n\n# For Cursor\ngit clone https://github.com/Misakakuroko/principle-deepdive-html-style.git ~/.cursor/skills/principle-deepdive-html-style\n```\n\nOr download the [latest release zip](https://github.com/Misakakuroko/principle-deepdive-html-style/archive/refs/heads/main.zip), extract, rename the folder to `principle-deepdive-html-style`, and drop it in `~/.claude/skills/` or `~/.cursor/skills/`.\n\n---\n\n## Usage\n\nAfter installation, just ask your agent (Claude Code / Cursor / any agent that reads SKILL.md):\n\n\u003e \"Generate a deep-dive HTML article on [topic] in the principle-deepdive style.\"\n\nThe agent will:\n\n1. Read `SKILL.md` (auto-loaded based on the trigger keywords in the description)\n2. Pick a color gradient from `color-palettes.md`\n3. Copy `template.html` as scaffolding\n4. Fill in your topic content using the structural recipes in `content-structure.md`\n5. Draw inline SVG diagrams using the cookbook patterns in `svg-patterns.md`\n\n### Trigger phrases\n\nThe agent should auto-load this skill when you say any of:\n\n- \"principle deep-dive HTML\"\n- \"single-file analytical HTML article\"\n- \"原理深拆 HTML\"\n- \"和 deepdive 同风格\"\n- \"documentation HTML with citations and diagrams\"\n\nIf your agent doesn't auto-load it, mention the skill name explicitly: `Use the principle-deepdive-html-style skill to...`\n\n---\n\n## File reference\n\n| File | Purpose |\n|---|---|\n| `SKILL.md` | Main instructions · component contracts · checklist · 186 lines |\n| `template.html` | **Copy this verbatim as starting point** · full working scaffold with all CSS + 2 example principles + 2 collapsible solution cards · 725 lines / 38KB |\n| `color-palettes.md` | 12 ready-to-use hero gradient combinations · light-mode considerations · discipline chip mapping |\n| `content-structure.md` | 7 section-by-section HTML recipes (hero · problem · principle · solution · combo · footer · tooltip) |\n| `svg-patterns.md` | 6 reusable inline-SVG diagram patterns (vector space · pipeline · nested · comparison · trace table · timeline) |\n| `install.sh` | POSIX one-line installer |\n| `install.ps1` | Windows PowerShell one-line installer |\n| `LICENSE` | MIT |\n\n---\n\n## What this skill explicitly forbids\n\n- ❌ Tailwind / Bootstrap / Bulma / any CSS framework\n- ❌ Chart.js / D3 / Mermaid / Plotly / any chart library\n- ❌ Font imports from Google Fonts / Adobe Fonts — system stack only\n- ❌ External icon libraries (Font Awesome, Lucide, Heroicons) — emoji or hand-drawn SVG only\n- ❌ Image `\u003cimg\u003e` tags — pages must be 100% offline-readable as a single file\n- ❌ Build steps — output must work directly opened from `file://`\n- ❌ React / Vue / any JS framework — vanilla JS only (just theme toggle + smooth scroll)\n\nThese constraints are what make the output portable, archive-friendly, and consistent across many agents writing many pages over time. The skill is designed for content density and longevity, not for visual novelty.\n\n---\n\n## Examples / Showcase\n\n\u003e Showcase examples coming soon. If you publish a page generated with this skill, feel free to open a PR adding it to this section.\n\n---\n\n## Why this exists\n\nModern technical docs sites (Vercel, Linear, Stripe, Notion) have a visual idiom — dark + amber accents, glass nav, mono-font citation chips, inline SVG diagrams — that's instantly recognizable but tedious to reproduce by hand. This skill bottles the idiom into a single template + a small set of structural recipes, so any agent can produce a consistent-looking article in 2-3 hours of work instead of redoing CSS from scratch.\n\nThe design constraints (offline, single-file, zero dependencies, \u003c 300KB) come from the use case: long-form analytical content that needs to live in version control alongside code, get rendered straight from `file://`, and stay readable years later without bit-rot from broken CDNs or deprecated libraries.\n\n---\n\n## License\n\n[MIT](LICENSE) — use it freely in any project, commercial or personal, attribution appreciated but not required.\n\n---\n\n## Contributing\n\nPull requests welcome. Likely useful additions:\n\n- More color palette combinations\n- More SVG diagram patterns (e.g. tree / graph / matrix visualizations)\n- More content recipes (e.g. comparison table · changelog · FAQ)\n- Translation of `SKILL.md` body to other languages (the frontmatter `description` should stay English so it's picked up by English-trained agents)\n\nPlease keep changes consistent with the design philosophy: **no external dependencies**, **single-file output**, **system font stack**, **inline SVG only**.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmisakakuroko%2Fprinciple-deepdive-html-style","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmisakakuroko%2Fprinciple-deepdive-html-style","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmisakakuroko%2Fprinciple-deepdive-html-style/lists"}