skills.rest
Mattyreed1
Mattyreed1COMMUNITY
Explore all skills by this author →
GitHub

content-visuals

Generate technical diagrams and infographics from content briefs.

1|Updated Jun 16, 2026
Search Tags:#branding#visuals#infographics#diagrams#d2#content-creation
One-click install
npx skills add https://github.com/Mattyreed1/fractal-agent-skills --skill content-visuals
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: content-visuals
Source: https://github.com/Mattyreed1/fractal-agent-skills/tree/main/content-visuals
Command: npx skills add https://github.com/Mattyreed1/fractal-agent-skills --skill content-visuals

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the bottleneck of manual visual creation by automating the generation of technical diagrams and infographics that align with specific brand guidelines and content briefs.

Core Features & Use Cases

  • Automated Diagramming: Generates architecture diagrams and knowledge graph visualizations using D2 or browser-based rendering.
  • Brand Consistency: Enforces strict visual constraints like avoiding pyramids or concentric circles while ensuring data-flow arrows and circular nodes are used correctly.
  • Workflow Integration: Seamlessly integrates into the content pipeline by pulling requirements from Notion briefs and posting results directly to Discord threads.

Quick Start

Use the content-visuals skill to generate the architecture diagrams for the approved script in the current project directory.

Frequently Asked Questions about content-visuals

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate on-brand technical diagram generation for content workflows?▼

Automating technical diagram generation involves interpreting brief-based visual requirements within a multi-stage content pipeline to produce brand-compliant architecture flows and knowledge graphs. This enforces strict visual constraints like specific node shapes and data-flow arrows.

Can I generate infographics using HTML and CSS instead of D2?▼

Yes, you can generate infographics using browser-based tools for HTML and CSS rendering. This operates alongside D2 graph rendering, providing alternative methods for producing visual assets within your content workflows.

Do I need D2 to render architecture diagrams and knowledge graphs?▼

Yes, D2 is required for rendering architecture diagrams and knowledge graph visualizations. The system relies on D2 for graph rendering while using browser-based tools specifically for HTML/CSS infographic generation.

How do I enforce brand consistency when automating visual content creation?▼

Enforcing brand consistency requires applying strict visual constraints during generation, such as avoiding pyramids or concentric circles while ensuring data-flow arrows and circular nodes are used correctly. This maintains compliance across all generated assets.

What are the limitations of automating infographic generation within a content pipeline?▼

Limitations include strict adherence to enforced visual constraints, meaning the system avoids specific shapes like pyramids or concentric circles. Additionally, producing architecture diagrams requires D2, while infographics rely on browser-based HTML/CSS rendering.

Related Skills

Explore More Design & Creative Skills→
fnf-ax-teamfnf-ax-team
1

sergio-tacchini-silhouette-revolution-hedi-slimane

Generate brand-specific fashion photography briefs with silhouette, mood, and color constraints.

Official
Basic
zivtechzivtech

graphic-design-critic

Audit graphic assets for brand consistency and production readiness.

Official
Advanced
invowkinvowk

d2-diagrams

Generate D2 diagrams with Tala layouts and validation pipelines.

Official
Advanced
axtonliuaxtonliu
536

smart-illustrator

Generate contextual illustrations and infographics for articles, presentations, and social media covers.

Community
Advanced