skills.rest
zizhenchen47-oss
zizhenchen47-ossCOMMUNITY
Explore all skills by this author →
GitHub

ljg-card

Render source content into PNG visuals via HTML/CSS templates and Playwright capture.

Updated Mar 29, 2026
Search Tags:#png#playwright#infographic#whiteboard#comic#sketchnote#visual rendering
One-click install
npx skills add https://github.com/zizhenchen47-oss/claude-skills --skill ljg-card-zizhenchen47-oss
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ljg-card
Source: https://github.com/zizhenchen47-oss/claude-skills/tree/main/ljg-card
Command: npx skills add https://github.com/zizhenchen47-oss/claude-skills --skill ljg-card-zizhenchen47-oss

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

ljg-card turns raw content into finished visual assets, so you can move from notes, articles, or pasted text to shareable PNGs without hand-designing each layout.

Core Features & Use Cases

  • Multiple visual modes: Render content as long-reading cards, infographics, multi-card posters, sketchnotes, comics, or whiteboard-style explanations.
  • Content-aware presentation: Choose a mode that matches the material, whether the goal is a readable summary, a dense comparison, or a more expressive visual story.
  • Deterministic export workflow: Use templates, references, and screenshot capture to produce consistent PNG output in a predictable location.
  • Use case: Convert a technical article into an infographic, a research note into a sketchnote, or a product explainer into a comic-style asset for sharing.

Quick Start

Ask the skill to turn the provided text, file, or URL into a PNG visual using the most appropriate ljg-card mode.

Frequently Asked Questions about ljg-card

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

FAQPage Schema
How do I convert articles into infographic PNG images?▼

Convert articles into infographic PNG images by rendering source content through template-based HTML/CSS modes. The tool applies multiple card-based visual styles to transform text into polished visual assets using deterministic screenshot capture with Playwright.

Can I generate sketchnotes and comics from plain text?▼

Generate sketchnotes and comics from plain text using content-aware visual rendering modes. The system selects appropriate multi-card or whiteboard-style templates to match the material and expressively visualize the source content.

What's the best way to create multi-card posters from long-form reading notes?▼

Create multi-card posters from long-form reading notes by applying card-based rendering modes to the source content. Template-based HTML/CSS rendering structures the material into readable summary layouts and exports them as consistent PNG output.

Does Playwright screenshot capture work for deterministic PNG export?▼

Playwright screenshot capture provides deterministic PNG export for rendered visual assets. It captures template-based HTML/CSS output in a predictable location, ensuring consistent visual rendering across different card modes.

Do I need frontmatter to render whiteboard-style explanation assets?▼

Frontmatter is required for discovery when rendering whiteboard-style explanation assets. The frontmatter-driven process identifies the appropriate content-aware presentation mode and applies template-based HTML/CSS rendering to produce the final PNG visuals.

What are the limitations of using HTML and CSS templates for visual rendering?▼

HTML and CSS templates for visual rendering are limited to card-based layouts like infographics, sketchnotes, and comics. Complex interactive animations or dynamic data visualizations fall outside the deterministic screenshot capture workflow's static PNG export scope.

Related Skills

Explore More Design & Creative Skills→
zhengfranzhengfran

ljg-card

Render user-provided content into PNG visuals using selectable layout molds.

Community
Intermediate
teodorboevteodorboev

visual

Generate and process visual assets for social media platforms.

Community
Advanced
pipixia-labspipixia-labs
38

motion-frames

Create CSS-based motion posters with inline animations for HyperFrames.

Official
Intermediate
dachentdachent
18

canvas-design-codex

Verify canvas, SVG, and WebGL rendering via screenshot analysis.

Community
Advanced