skills.rest
asanexample
asanexampleOFFICIAL
Explore all skills by this author →
GitHub

learning-portal-diagrams

Process and place SVG diagrams in learning portals with real-Chrome verification.

1|Updated Mar 20, 2025
Search Tags:#document automation#platform integration#diagram management#SVG diagrams#learning portal
One-click install
npx skills add https://github.com/asanexample/platform --skill learning-portal-diagrams
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: learning-portal-diagrams
Source: https://github.com/asanexample/platform/tree/main/.claude/skills/learning-portal-diagrams
Command: npx skills add https://github.com/asanexample/platform --skill learning-portal-diagrams

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires theme-svg.mjs, Claude Design, and includes scripts (resource) and assets (resource) components.

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.

Frequently Asked Questions about learning-portal-diagrams

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

FAQPage Schema
How do I manage SVG diagram rendering and placement for learning portals in Backstage and Astro?▼

To process SVG diagrams, you apply a pipeline that handles theme application, space-collapse fixes, and accent-bar corner corrections, before placing the output into the target .md document.

Does this SVG diagram processing pipeline support dark theming and linting?▼

Yes, the SVG diagram processing pipeline supports dark theming and includes malformed linting checks to ensure visual consistency and structural integrity across documentation platforms.

Can I use real-Chrome to verify SVG text overflow before placing diagrams in documentation?▼

Yes, real-Chrome preview is used to verify accurate rendering and check for text overflow against a real-Chrome environment before finalizing SVG diagram placement in documentation.

What's the best way to automate SVG diagram placement into markdown documentation?▼

You can automate SVG diagram placement using build automation scripts that process the diagram from its image directory and integrate it into the target .md document.

Do I need theme-svg.mjs and Claude Design contracts to process learning portal SVG diagrams?▼

Yes, processing learning portal SVG diagrams requires theme-svg.mjs and Claude Design contracts, alongside a real-Chrome environment, to execute the multi-step processing and verification pipeline.

Why does my SVG diagram space collapse or have accent-bar corner issues in Backstage?▼

SVG diagram space collapse and accent-bar corner issues occur during cross-platform rendering, requiring a dedicated processing pipeline to apply fixes and ensure proper visual rendering in Backstage.

Related Skills

Explore More Software Engineering Skills→
ResearAIResearAI
3.3k

baseline

Standardize a reference object for quest evaluation with plan and checklist requirements.

Community
Advanced
XyHalcyonXyHalcyon

architecture-diagram

Generate dark-themed SVG architecture diagrams and convert them to HTML files.

Community
Intermediate
cybersadercybersader
5

docs-site

Build and configure the Crosswalker documentation site using Astro Starlight.

Community
Advanced
AissenLiuAissenLiu

architecture-diagram

Generate dark-themed architecture diagrams as standalone HTML with inline SVG.

Community
Advanced