learning-portal-diagrams
OfficialEfficiently manage SVG diagrams for learning portal rendering in Backstage and Astro/Starlight.
Software Engineering#document automation#platform integration#diagram management#SVG diagrams#learning portal
Authorasanexample
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill addresses the need for streamlined SVG diagram management and placement within the learning portal, optimizing both rendering across platforms and manual adjustment.
Core Features & Use Cases
- SVG Diagram Processing: Handles theme application, space-collapse fix, malformed linting, accent-bar corner fix, and dark theming.
- Real-Chrome Preview: Ensures accurate rendering and text overflow checking against real-Chrome environments.
- Placement & Build Automation: Automates diagram placement and integration into documentation with build automation scripts.
- Wide-Poster Handling: Supports creation of wide posters for full-screen viewing with a click-through to full-resolution SVG.
- Use Case: For developers needing to integrate high-quality diagrams into documentation across platforms, ensuring both visual consistency and accessibility.
Quick Start
Use the learning-portal-diagrams skill to process the SVG diagram located at 'docs/learn/<module>/images/<name>.svg' and place it into the '.md' document where needed.
Dependency Matrix
Required Modules
theme-svg.mjsClaude Design
Components
scriptsassets
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: learning-portal-diagrams Download link: https://github.com/asanexample/platform/archive/main.zip#learning-portal-diagrams Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 620,000+ vetted skills library on demand.