Replace documentation illustrations with retikz-generated narrative diagrams.
npx skills add https://github.com/Pionpill/retikz --skill docs-figure-draw
Please help me install this Agent Skill. Skill: docs-figure-draw Source: https://github.com/Pionpill/retikz/tree/main/.agents/skills/docs-figure-draw Command: npx skills add https://github.com/Pionpill/retikz --skill docs-figure-draw
Eliminates inconsistent and low-signal documentation illustrations by replacing ASCII, Mermaid, screenshots, or external drawings with retikz-generated, text-centric figure diagrams.
Update the target documentation page by adding a retikz figure with its corresponding .demo.tsx and render it with the ComponentPreview set to hideCode.
High-intent search queries and answers about installing and using this skill.
Documentation diagrams are generated using retikz to replace ASCII or screenshots with narrative, text-centric figures. This enforces consistent conventions like stroke="none" default nodes and responsive width for architecture and flow visualization.
To structure MDX pages for diagram generation, add a retikz figure alongside its corresponding .demo.tsx file and render it via ComponentPreview set to hideCode. This workflow standardizes demo files and MDX page layouts.
Yes, it replaces Mermaid diagrams and screenshots with retikz narrative diagrams in React component documentation. It targets scenarios where clarity and consistency matter more than showing source code.
Configure flowchart generation by using ID-based Draw connections with correct arrow semantics for data vs tool/call relationships and y-axis-down coordinates. This enforces proper directional logic and responsive layout sizing.
Avoid text-centric diagrams for concept illustration when your documentation requires showing exact source code rather than narrative explanations. This method prioritizes visual clarity and consistent conventions over code representation.
PionpillStandardize Retikz component documentation with a six-section structure and API table format.
PionpillGenerate retikz blog MDX content with strict structure and ComponentPreview.
idealjsCreate Next.js MDX/TSX component demo pages with variants and visual regression tests.
xloxn69Generate Mermaid and ASCII diagrams from natural language descriptions.
