image-direction

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

Updated Apr 18, 2026
One-click install
npx skills add https://github.com/Flintmere/flintmere --skill image-direction
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: image-direction
Source: https://github.com/Flintmere/flintmere/tree/main/.claude/skills/image-direction
Command: npx skills add https://github.com/Flintmere/flintmere --skill image-direction

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Flintmere marketing teams often need cohesive vector imagery that matches the Ledger aesthetic, but rely on limited asset templates or external image pipelines. This skill provides inline SVG generation and structured prompts to produce consistent icons, diagrams, and blog-header visuals without calling image APIs or editing source files.

Core Features & Use Cases

  • SVG-first assets: inline JSX/SVG for icons, diagrams, and watermarks that stay within the component tree.
  • Prompt-mode entries: ready-to-render prompts for photoreal blog headers via the Runware pipeline.
  • Brand cohesion & accessibility: enforces fixed palette, composition rules, and alt text for accessibility.

Quick Start

Generate a cohesive set of inline SVG icons and a photoreal blog-header prompt library that match the Ledger aesthetic.

Frequently Asked Questions about image-direction

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

FAQPage Schema
How do I generate inline SVG icons for marketing assets without external image APIs?

You can generate inline SVG icons by producing JSX SVG sources directly within your component tree, avoiding external image API calls. This approach outputs ready-to-use inline SVG code for icons, diagrams, and watermarks that maintain brand cohesion without editing source files.

What are photoreal prompts and when do I need them for blog headers?

Photoreal prompts are structured text entries designed for rendering realistic blog header visuals via pipelines like Runware. You need them when inline SVGs are insufficient for photographic marketing imagery, allowing you to generate cohesive, ready-to-render prompt-library entries.

Can I create brand-consistent diagrams and watermarks using SVG without editing source files?

Yes, you can create brand-consistent diagrams and watermarks by generating inline JSX SVG sources that enforce a fixed palette and composition rules. This process satisfies constraints requiring no edits to source files, keeping vector assets within the component tree.

How do I ensure accessibility when generating SVG icons and marketing imagery?

You ensure accessibility by enforcing alt text and fixed composition rules during SVG and prompt generation. This process outputs inline SVGs and photoreal prompts that adhere to accessibility standards while maintaining a cohesive brand aesthetic across marketing campaigns.

What's the best way to maintain a cohesive aesthetic across icons, diagrams, and blog headers?

The best way to maintain a cohesive aesthetic is to use a unified generation process that enforces a fixed palette and composition rules across all assets. This outputs inline SVGs for icons and diagrams, plus structured prompts for photoreal blog headers.

Are there limitations to generating marketing imagery with inline SVGs and structured prompts?

Limitations include the inability to make image API calls or edit source files directly. The process is constrained to outputting either inline JSX SVG sources for vector assets or prompt-library entries for external photoreal rendering pipelines.