skills.rest
posit-dev
posit-devOFFICIAL
Explore all skills by this author →
GitHub

positron-abstract-svg

Create abstract SVG illustrations of the Positron IDE for documentation and walkthroughs.

4.2k|179|Updated May 24, 2022
Search Tags:#svg#IDE#positron#Documentation#illustration#Walkthrough#codicons
One-click install
npx skills add https://github.com/posit-dev/positron --skill positron-abstract-svg
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: positron-abstract-svg
Source: https://github.com/posit-dev/positron/tree/main/.claude/skills/positron-abstract-svg
Command: npx skills add https://github.com/posit-dev/positron --skill positron-abstract-svg

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires fontTools, and includes references (resource) components.

What problem does it solve?

Producing consistent, on-brand abstract SVG illustrations of the Positron IDE for docs, walkthroughs, and onboarding is slow and error-prone without a shared palette, icon set, and component conventions.

Core Features & Use Cases

  • Curated palette and component patterns: Provides tested hex colors, fonts, layering rules, and copy-pasteable SVG snippets for tab bars, toolbars, code cells, variables panes, and AI chat panels.
  • Ready-made codicon paths: Ships a frozen set of toolbar and activity bar icon paths so new images match the existing walkthrough set.
  • Seti file icon extraction: Includes a fontTools-based script to pull real file-type glyphs out of the bundled seti.woff font.
  • Use Case: When asked to add a walkthrough image for a new notebook feature, gather a UI screenshot, compose the SVG from the pattern library, preview it, and save a clean static SVG consistent with the canonical examples.

Quick Start

Create an abstract SVG walkthrough image for the Positron notebook editor that matches the existing walkthrough image set.

Frequently Asked Questions about positron-abstract-svg

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

FAQPage Schema
How do I create an abstract SVG image for a Positron walkthrough?▼

Gather a screenshot of the actual UI, plan the layout, then compose the SVG using the component snippets in references/patterns.md and icon paths in references/codicons.md. Preview the render, iterate, and save a clean static SVG.

What colors should Positron walkthrough SVGs use?▼

Use the tested palette in the skill: #3A78B1 for real Positron chrome like the activity bar, #447099 for focal-point highlights, and the defined grays (#C8C8C8, #F4F4F4, #E0E0E0) for placeholders and panels. All colors must be hardcoded hex values.

Can these SVGs use CSS variables or JavaScript?▼

No. The images render as plain static SVGs in many contexts, so external CSS, CSS variables, and JavaScript will not work. All styling must be self-contained via hardcoded hex values or an inline style block inside the SVG.

How do I get the correct file type icon for a tab in the SVG?▼

Positron uses the Seti UI icon theme shipped only as a font. Extract the glyph outline from extensions/theme-seti/icons/seti.woff using the provided fontTools Python script, which converts the glyph to an SVG path scaled to a 16x16 box.

Why does my SVG look inconsistent with existing Positron walkthrough images?▼

Common causes include inventing custom grays instead of the palette values, using abstract shapes in the activity bar instead of real codicons, or copying style from non-canonical SVGs in the walkthrough media folder. Match the bundled references/examples/ set instead.

Related Skills

Explore More Design & Creative Skills→
dimagi-internaldimagi-internal
1

connect-baseline-screenshots

Capture per-version Connect UI navigation screenshots as indexed PNG assets with a manifest.

Official
Advanced
leonardoacostaleonardoacosta

svgl

Find and embed SVG brand logos from svgl.app in UI components.

Community
Intermediate
noontide-conoontide-co
35

tool-og-render

Render inline SVG to 1200x630 PNG for Open Graph meta tags.

Official
Intermediate
kvm9-devkvm9-dev

recreate-screenshot

Convert screenshots into pixel-perfect UI implementations by analyzing layout, colors, and typography.

Community
Advanced