delivery-svg-markdown

Render data dashboards as static SVG panels embeddable in Markdown. Uses D3.js v7 mental model for scales, shapes, and axes. No runtime JS; output is pure SVG with inline styles for GitHub compatibility.

Aller à l'installation

Dépôt: fabioc-aloha/Alex_Skill_Mall
Dernière activité de la source: 28 juillet 2026 à 18:28
Langue détectée de SKILL.md: anglais
Étoiles: 4
Forks: 1

Options d'installation

Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.

npx skills add https://github.com/fabioc-aloha/Alex_Skill_Mall --skill delivery-svg-markdown

La commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.

Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.

Vérifiez les fichiers source

Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.

Explorateur de fichiers

3 fichiers

SKILL.md

Instructions source · Aperçu en lecture seule

Retour à la recherche Retour à l’installation

compile-brain

Create or improve a Markdown instruction, skill, prompt, or agent from an explicitly selected file or user-identified text. Use when a user asks to optimize an existing brain artifact or create one for consistent future execution.

2026-09-03

markdown-mermaid

Clear documentation through visual excellence

2026-09-01

assess-brain

Assess active Markdown brain files in a local AI agent project or plugin source without changing it. Use before modifying a brain or reviewing declared instructions, skills, prompts, agents, bundled Markdown resources, and research documentation.

2026-08-30

Tout voir dans ce dépôt

type	skill
lifecycle	stable
inheritance	inheritable
name	delivery-svg-markdown
description	Render data dashboards as static SVG panels embeddable in Markdown. Uses D3.js v7 mental model for scales, shapes, and axes. No runtime JS; output is pure SVG with inline styles for GitHub compatibility.
tier	standard
applyTo	*/svg,/markdowndashboard,*/visual,/chartrender
currency	2026-05-04T00:00:00.000Z
lastReviewed	2026-05-04T00:00:00.000Z

Delivery: SVG in Markdown

Render dashboards as static SVG panels that embed directly in Markdown files. The output works in GitHub READMEs, VS Code preview, and any browser. No JavaScript runtime, no external CSS, no build step.

This is the mid-tier delivery format: richer than ASCII (color, curves, precise positioning), simpler than HTML (no interactivity, no CDN). The agent uses D3.js concepts (scales, shape generators, axes) as a mental model for producing SVG markup, but the output is raw SVG text, not a running D3 program.

When to Use

Dashboards that live in GitHub repos (README, wiki, docs)
Reports rendered in VS Code Markdown preview
Static visual artifacts that need color, precise layout, or curves
Anywhere SVG is supported but JavaScript is not (email clients with SVG support, static sites)

When NOT to Use

Interactive filtering, drill-through, or tooltips needed (use delivery-html-dashboard)
Terminal-only consumers with no graphical display (use delivery-ascii-dashboard)
PowerPoint or PDF required (use delivery-slides or delivery-pdf-report)
The audience is non-technical and expects branded corporate visuals (use HTML or Power BI)

Module 1: SVG Foundations

Coordinate System

SVG uses a top-left origin with y increasing downward. All positioning uses the viewBox attribute for responsive scaling.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"
     width="800" height="600" font-family="system-ui, -apple-system, sans-serif">

Constant	Default	Rationale
Dashboard width	800px	Fits GitHub's max content width (~888px) with margin
Panel height	200-300px	Comfortable for a single chart
Margin (top)	40px	Room for title

Feature	Allowed?	Alternative
Inline `style` attributes	Yes	Use these exclusively
`<style>` blocks	No (stripped)	Inline styles instead
External CSS	No	Inline styles
JavaScript	No (stripped)	Not applicable (static)
`<foreignObject>`	No (stripped)	Use `<text>` elements
`xlink:href` for images	Partial	Avoid; use inline paths
Gradients (`<linearGradient>`)	Yes	Keep `<defs>` simple
Filters (`<filter>`)	Limited	Avoid complex filters
`clip-path`	Yes	Works for chart area clipping
Web fonts	No	Use system font stack

Role	Hex	Usage
Background	`#1E1E2E`	Dashboard background
Panel background	`#2A2A3E`	Chart panel fill
Text primary	`#E0E0E0`	Titles, values
Text secondary	`#999999`	Axis labels, captions
Grid lines	`#3A3A4E`	Background grid
Border	`#3A3A4E`	Panel borders
Accent 1	`#4A90D9`	Primary data series (blue)
Accent 2	`#50C878`	Secondary series (green)
Accent 3	`#FFB347`	Tertiary series (orange)
Accent 4	`#FF6B6B`	Quaternary / alert (red)
Accent 5	`#BB86FC`	Quinary series (purple)
Positive	`#50C878`	Up, growth, good
Negative	`#FF6B6B`	Down, decline, bad
Neutral	`#999999`	Unchanged, baseline

Role	Hex	Usage
Background	`#FFFFFF`	Dashboard background
Panel background	`#F8F9FA`	Chart panel fill
Text primary	`#212529`	Titles, values
Text secondary	`#6C757D`	Axis labels, captions
Grid lines	`#E9ECEF`	Background grid
Border	`#DEE2E6`	Panel borders
Accent 1	`#2563EB`	Primary data series (blue)
Accent 2	`#16A34A`	Secondary series (green)
Accent 3	`#D97706`	Tertiary series (orange)
Accent 4	`#DC2626`	Quaternary / alert (red)
Accent 5	`#7C3AED`	Quinary series (purple)

Layout	Columns	Panel width	Use when
Single	1	800px	One hero chart, or detailed view
Two-column	2	384px (16px gap)	Comparison, two related charts
Three-column	3	252px (22px gap)	KPI strip, multiple small charts

Element	Height	Spacing after
Title bar	50px	16px
KPI strip	90px	24px
Chart panel	200-300px	24px
Footer	40px	0

Anti-pattern	Fix
Using `<style>` blocks	GitHub strips them. Use inline `style` or direct attributes
Using `<foreignObject>` for text	GitHub strips it. Use `<text>` with `<tspan>` for wrapping
Hardcoding pixel positions without scale math	Compute from data domain and range. Charts should rescale with data
More than 5 colors in one chart	Split into panels or use a highlight-vs-context pattern
Tiny text (< 10px)	Minimum 11px for labels, 12px for axis text
Missing `xmlns` attribute	Required for standalone SVG files
Using `em`/`rem` units	Use `px` only. SVG doesn't inherit document font size
Complex gradients or filters	GitHub may strip or misrender. Keep `<defs>` simple
Relying on hover/animation	No interactivity in static SVG. Design for static consumption
Setting width/height without viewBox	Always include viewBox for responsive scaling

Check	Criteria
GitHub-safe	No `<style>`, no `<script>`, no `<foreignObject>`, has `xmlns`
Readable	All text >= 11px, contrast ratio >= 3:1 against background
Correct data	Spot-check 2-3 values: bar height / position matches data
Responsive	`viewBox` present, width/height match, scales properly
Color accessible	Not relying on color alone (use labels or patterns)
File size	< 100KB for typical dashboards (pure SVG is compact)
Clean markup	No unnecessary whitespace, no commented-out elements

delivery-svg-markdown

Informations de source

Options d'installation

Vérifiez les fichiers source

Plus depuis ce dépôt

Plus depuis ce dépôt

Delivery: SVG in Markdown

When to Use

When NOT to Use

Module 1: SVG Foundations

Coordinate System

Delivery: SVG in Markdown

When to Use

When NOT to Use

Module 1: SVG Foundations

Coordinate System

GitHub Compatibility Rules

Inline Style Pattern

Module 2: D3.js Mental Model

Scales (D3-scale concepts)

Shape Generators (D3-shape concepts)

Axis Generation

Module 3: Color Palettes

Dark-Slate Theme (default)

Light Theme

Color Assignment Rules

Module 4: Chart Primitives

KPI Strip

Horizontal Bar Chart

Vertical Bar Chart

Line Chart

Area Chart

Pie / Donut Chart

Sparkline

Module 5: Layout System

Grid Layouts

Dashboard Structure

Vertical Spacing

Module 6: Construction Process

Step 1: Compute Layout

Step 2: Compute Scales

Step 3: Generate SVG Elements

Step 4: Assemble Document

Step 5: Embed in Markdown

Module 7: Anti-Patterns

Module 8: Validation Checklist

Cross-References