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.

Ir para a instalação

Repositório: fabioc-aloha/Alex_Skill_Mall
Última atividade na origem: 28 de julho de 2026 às 18:28
Idioma detectado do SKILL.md: inglês
Estrelas: 4
Forks: 1

Opções de instalação

Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.

Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.

Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.

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

O comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.

Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.

Revise os arquivos de origem

Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.

Explorador de arquivos

3 arquivos

SKILL.md

Instruções da origem · Visualização somente leitura

Voltar à pesquisa Voltar à instalação

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

Ver todas deste repositório

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

Informações da origem

Opções de instalação

Revise os arquivos de origem

Mais deste repositório

Mais deste repositório

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