skills.rest
nechmads
nechmadsCOMMUNITY
Explore all skills by this author →
Website𝕏@nechmadsGitHub

visual-storyteller

Create visuals from conceptual briefs using SVG, HTML, CSS, and chart libraries.

Updated Feb 7, 2026
Search Tags:#presentations#graphics#SVG#infographics#data-visualization#visual-storytelling#storyboarding
One-click install
npx skills add https://github.com/nechmads/blogging-system --skill visual-storyteller-nechmads
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-storyteller
Source: https://github.com/nechmads/blogging-system/tree/main/.codex/skills/visual-storyteller
Command: npx skills add https://github.com/nechmads/blogging-system --skill visual-storyteller-nechmads

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill converts abstract ideas into clear visuals—graphics, icons, diagrams, and presentations—reducing design time and improving communication.

Core Features & Use Cases

  • Illustrations & Graphics: Generate SVG icons, simple illustrations, diagrams, or full hero images when image generation tools are available; otherwise provide SVG/HTML/CSS-based visuals.
  • Data Visualizations: Build charts and diagrams using code with libraries like D3.js, Chart.js, or Mermaid diagrams.
  • Presentations & Storyboards: Create slide decks with structured narratives, color systems, and consistent styling.
  • Diagrams & Infographics: Produce Mermaid or SVG diagrams, timelines, and info-graphics for easy communication.
  • Visual Research & Spec: Provide design briefs, mood boards, style guides, and reference collections.
  • Use-Case Example: Imagine designing a product launch, you quickly assemble a cohesive visual suite including a hero image, a data viz, and a slide deck.

Quick Start

Generate a 3-panel infographic describing the user onboarding journey for a mobile app, with a blue-green color palette and a consistent icon set.

Frequently Asked Questions about visual-storyteller

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

FAQPage Schema
How do I turn conceptual briefs into SVG graphics and infographics?▼

To turn conceptual briefs into SVG graphics and infographics, this skill automates visual creation by generating SVG/HTML/CSS outputs and diagrams for reports, product pitches, and marketing assets.

Can I use D3.js or Chart.js to build data visualizations from text descriptions?▼

Yes, you can build data visualizations using D3.js or Chart.js. This skill generates chart code and diagrams directly from your conceptual briefs to automate data visualization creation.

What is the best way to generate a presentation slide deck with a structured narrative?▼

The best way to generate a presentation slide deck is by providing a conceptual brief. This skill creates storyboards with structured narratives, color systems, and consistent styling for slide decks.

Does this visual storytelling approach support Mermaid diagrams for educational content?▼

Yes, this visual storytelling approach supports Mermaid diagrams. It produces Mermaid or SVG diagrams, timelines, and infographics to clearly communicate educational content and conceptual briefs.

Do I need an image generation tool to create hero images for a product pitch?▼

You do not strictly need an image generation tool to create hero images. This skill provides SVG/HTML/CSS-based visuals by default, but supports optional image-generation tool integration for full hero images.

How do I create a style guide and mood board for a visual storytelling project?▼

To create a style guide and mood board, this skill provides visual research and specification outputs. It generates design briefs, style guides, and reference collections from your conceptual briefs.

Related Skills

Explore More Design & Creative Skills→
frankxaifrankxai
31

Social Media Strategy

Generate platform-specific social media strategies for Twitter/X, LinkedIn, and Instagram.

Community
Basic
Tiao553Tiao553
8

visual-explainer

Generate interactive Mermaid diagrams and HTML data visualizations for technical documentation.

Community
Advanced
FlintmereFlintmere

image-direction

Generate inline JSX SVG icons, diagrams, and hero watermarks for Flintmere marketing assets.

Official
Intermediate
aws-samplesaws-samples
186

visual-design

Generate charts, posters, and infographics as PNG or PDF using Python libraries.

Official
Intermediate