visual-card

Name: visual-card
Author: NatsuFox

62stars5forks

How to install visual-card?

natsufox/tapestry/visual-card

$npx -y skills add NatsuFox/Tapestry --skill visual-card

Installs into the current project.

Summary

Generate professional visual note cards (视觉笔记卡片/信息图) from knowledge base content as single-page HTML infographics with PNG export. Use when users want to create visual summaries, knowledge cards, infographics, or poster-style visualizations of topics from the knowledge base.

Files · 1

View on GitHub

SKILL.md

1	# Tapestry Visual Card
2
3	Generate professional visual note cards from knowledge base content: $ARGUMENTS
4
5	## When to use this skill
6
7	Use this skill when:
8	- A user wants to create a visual note card or infographic from KB content
9	- The user asks to "visualize", "create a card", "make an infographic", or "generate a visual summary"
10	- The user mentions 视觉笔记, 知识卡片, 信息图, or one-pager summary
11	- You need to present knowledge base content in a shareable, poster-style format
12	- The user wants to export KB content for social media or presentations
13
14	## Purpose
15
16	This skill transforms structured knowledge base content into beautiful, information-dense visual cards following an editorial magazine aesthetic. It produces:
17
18	1. A self-contained HTML file with embedded styles and export functionality
19	2. A high-quality PNG image (via Playwright rendering)
20
21	The cards follow a fixed layout structure optimized for readability and social sharing.
22
23	## Workflow
24
25	### Architecture: Agent-Driven Content Synthesis
26
27	This skill uses an Agent-driven approach where the Agent reads the template specification and autonomously decides how to map source content to template blocks.
28
29	Key principle: The template structure is fixed (7 display blocks), but content mapping is intelligent and adaptive.
30
31	### Step 1: Identify the Source Content
32
33	Resolve the target from the argument:
34	- If a specific chapter path is provided (e.g., "ai-and-development-tools/ai-agent-architecture.md"), use that chapter
35	- If a topic is provided (e.g., "ai-and-development-tools"), offer to generate cards for its chapters
36	- If no argument, list available topics and ask the user to choose
37
38	```bash
39	# List available topics
40	ls -d data/books/*/
41	```
42
43	### Step 2: Run the Context Preparation Script
44
45	```bash
46	python visual-card/_scripts/generate_card.py --chapter "<topic>/<chapter.md>"
47	```
48
49	This prints a JSON object with three keys:
50	- `source.content`: the raw chapter markdown
51	- `source.frontmatter`: parsed metadata (title, author, date, etc.)
52	- `template_specification`: full natural language spec of the 7 template blocks
53	- `instructions`: task description
54
55	### Step 3: Read the Template Specification
56
57	Read `visual-card/_templates/card_template_spec.md` to understand:
58	- What each of the 7 blocks is for
59	- Quality criteria for content selection
60	- Expected JSON output format with examples
61
62	### Step 4: Synthesize the Content Mapping (Agent Task)
63
64	Analyze the source content against the template spec and produce a synthesis JSON. Write it to a temp file:
65
66	```bash
67	# Write synthesis to temp file
68	cat > /tmp/card_synthesis.json << 'EOF'
69	{
70	"metadata": {
71	"chapter": "<chapter-name>",
72	"title_en": "<English title, 3-8 words>",
73	"title_cn": "<Chinese title>",
74	"topic_label": "<TOPIC LABEL IN CAPS>",
75	"source_label": "<SOURCE IN CAPS>",
76	"thesis": "<one sentence with <strong>keyword</strong> embedded>"
77	},
78	"framework": {
79	"formula": "<A × B × C format>",
80	"formula_subtext": "<what the formula means>",
81	"label": "<FRAMEWORK NAME>",
82	"components": [
83	{"letter": "A", "name": "Component Name", "description": "One-line description"}
84	]
85	},
86	"insights": [
87	{"number": "01", "title": "Insight Title", "description": "2-3 sentence insight description"}
88	],
89	"dark_panel": {
90	"icon": "⚡",
91	"section_title": "<Section Title>",
92	"block1": {"title": "<Block 1 Title>", "items": ["item 1", "item 2", "item 3"]},
93	"block2": {"title": "<Block 2 Title>", "items": ["item 1", "item 2", "item 3", "item 4"]},
94	"conclusion": {"label": "核心洞察", "text": "<conclusion text>", "highlight": "<highlighted phrase>"}
95	},
96	"closing_thought": {
97	"text": "<memorable closing insight>",
98	"attribution": "<author or source>"
99	}
100	}
101	EOF
102	```
103
104	Content decisions to make:
105	- Framework: Identify 2-6 core concepts that structure the topic (acronym or logical grouping)
106	- Insights: Select 3-5 most surprising, actionable, or paradigm-shifting points
107	- Dark panel: Narrative flow — overview → key mechanics → conclusion
108	- Thesis: A single provocative claim that captures the article's core argument
109	- Closing thought: A memorable synthesis that gives the reader something to carry away
110
111	### Step 5: Generate HTML/PNG from Synthesis
112
113	```bash
114	python visual-card/_scripts/generate_card_from_synthesis.py \
115	--synthesis /tmp/card_synthesis.json \
116	--chapter "<topic>/<chapter.md>"
117	```
118
119	This renders the synthesis into the HTML template and exports PNG via Playwright.
120
121	### Step 6: Present the Results
122
123	Report back with:
124	- The generated PNG path (primary deliverable)
125	-

People who liked this also viewed

6 picks

Type

visual-card

62stars5forks

View on GitHub

How to install visual-card?

natsufox/tapestry/visual-card

$npx -y skills add NatsuFox/Tapestry --skill visual-card

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Tapestry Visual Card
2
3	Generate professional visual note cards from knowledge base content: $ARGUMENTS
4
5	## When to use this skill
6
7	Use this skill when:
8	- A user wants to create a visual note card or infographic from KB content
9	- The user asks to "visualize", "create a card", "make an infographic", or "generate a visual summary"
10	- The user mentions 视觉笔记, 知识卡片, 信息图, or one-pager summary
11	- You need to present knowledge base content in a shareable, poster-style format
12	- The user wants to export KB content for social media or presentations
13
14	## Purpose
15
16	This skill transforms structured knowledge base content into beautiful, information-dense visual cards following an editorial magazine aesthetic. It produces:
17
18	1. A self-contained HTML file with embedded styles and export functionality
19	2. A high-quality PNG image (via Playwright rendering)
20
21	The cards follow a fixed layout structure optimized for readability and social sharing.
22
23	## Workflow
24
25	### Architecture: Agent-Driven Content Synthesis
26
27	This skill uses an Agent-driven approach where the Agent reads the template specification and autonomously decides how to map source content to template blocks.
28
29	Key principle: The template structure is fixed (7 display blocks), but content mapping is intelligent and adaptive.
30
31	### Step 1: Identify the Source Content
32
33	Resolve the target from the argument:
34	- If a specific chapter path is provided (e.g., "ai-and-development-tools/ai-agent-architecture.md"), use that chapter
35	- If a topic is provided (e.g., "ai-and-development-tools"), offer to generate cards for its chapters
36	- If no argument, list available topics and ask the user to choose
37
38	```bash
39	# List available topics
40	ls -d data/books/*/
41	```
42
43	### Step 2: Run the Context Preparation Script
44
45	```bash
46	python visual-card/_scripts/generate_card.py --chapter "<topic>/<chapter.md>"
47	```
48
49	This prints a JSON object with three keys:
50	- `source.content`: the raw chapter markdown
51	- `source.frontmatter`: parsed metadata (title, author, date, etc.)
52	- `template_specification`: full natural language spec of the 7 template blocks
53	- `instructions`: task description
54
55	### Step 3: Read the Template Specification
56
57	Read `visual-card/_templates/card_template_spec.md` to understand:
58	- What each of the 7 blocks is for
59	- Quality criteria for content selection
60	- Expected JSON output format with examples
61
62	### Step 4: Synthesize the Content Mapping (Agent Task)
63
64	Analyze the source content against the template spec and produce a synthesis JSON. Write it to a temp file:
65
66	```bash
67	# Write synthesis to temp file
68	cat > /tmp/card_synthesis.json << 'EOF'
69	{
70	"metadata": {
71	"chapter": "<chapter-name>",
72	"title_en": "<English title, 3-8 words>",
73	"title_cn": "<Chinese title>",
74	"topic_label": "<TOPIC LABEL IN CAPS>",
75	"source_label": "<SOURCE IN CAPS>",
76	"thesis": "<one sentence with <strong>keyword</strong> embedded>"
77	},
78	"framework": {
79	"formula": "<A × B × C format>",
80	"formula_subtext": "<what the formula means>",
81	"label": "<FRAMEWORK NAME>",
82	"components": [
83	{"letter": "A", "name": "Component Name", "description": "One-line description"}
84	]
85	},
86	"insights": [
87	{"number": "01", "title": "Insight Title", "description": "2-3 sentence insight description"}
88	],
89	"dark_panel": {
90	"icon": "⚡",
91	"section_title": "<Section Title>",
92	"block1": {"title": "<Block 1 Title>", "items": ["item 1", "item 2", "item 3"]},
93	"block2": {"title": "<Block 2 Title>", "items": ["item 1", "item 2", "item 3", "item 4"]},
94	"conclusion": {"label": "核心洞察", "text": "<conclusion text>", "highlight": "<highlighted phrase>"}
95	},
96	"closing_thought": {
97	"text": "<memorable closing insight>",
98	"attribution": "<author or source>"
99	}
100	}
101	EOF
102	```
103
104	Content decisions to make:
105	- Framework: Identify 2-6 core concepts that structure the topic (acronym or logical grouping)
106	- Insights: Select 3-5 most surprising, actionable, or paradigm-shifting points
107	- Dark panel: Narrative flow — overview → key mechanics → conclusion
108	- Thesis: A single provocative claim that captures the article's core argument
109	- Closing thought: A memorable synthesis that gives the reader something to carry away
110
111	### Step 5: Generate HTML/PNG from Synthesis
112
113	```bash
114	python visual-card/_scripts/generate_card_from_synthesis.py \
115	--synthesis /tmp/card_synthesis.json \
116	--chapter "<topic>/<chapter.md>"
117	```
118
119	This renders the synthesis into the HTML template and exports PNG via Playwright.
120
121	### Step 6: Present the Results
122
123	Report back with:
124	- The generated PNG path (primary deliverable)
125	-

People who liked this also viewed

6 picks

Type