Linear Style Illustration

Dark "Linear/AI-OS" style technical diagrams — near-black background, cyan × purple × lilac duotone, JetBrains Mono uppercase labels, pill-shaped SVG nodes, glowing hub/kernel layer. Use when the user wants a "Linear 风格 diagram", a dark tech/architecture diagram, a product flow / state machine / layered-stack / hub-and-spoke diagram for a deck or landing page, or references screenshots that look like a dark AI product OS deck. Outputs a self-contained HTML file with inline SVG, ready to drop into a slide deck or export as PNG. Keywords: Linear style diagram, dark tech diagram, kernel diagram,

9 stars 1 forksImages, Video & Audio

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add yanliudesign/linear-style-illustration --skill linear-style-illustration

Manual install

git clone --depth 1 https://github.com/yanliudesign/linear-style-illustration.git /tmp/linear-style-illustration
mkdir -p ~/.claude/skills
cp -r /tmp/linear-style-illustration/. ~/.claude/skills/linear-style-illustration

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Linear-Style Illustration (dark Linear/AI-OS style technical diagrams)

## What this is

A reusable visual system for **dark, technical, "AI operating system" style diagrams** — the kind used across `future-of-linear-v3.html` in this workspace. Not a general chart library — a specific, opinionated aesthetic:

- Near-black stage (`#06070a`), soft blurred color "orbs" in the background, faint grid, vignette.
- Pill / rounded-rect nodes with thin colored strokes and low-opacity fills — never solid filled boxes.
- **JetBrains Mono**, uppercase, wide letter-spacing (`0.14em`–`0.32em`) for labels/tags/state-names.
- **Inter Tight** (or `Carlito`/system sans as fallback) bold for the actual node text.
- Exactly one accent per diagram "state": **cyan** `#6ce0d6` = primary/success/current/AI-output, **purple** `#7b7fff` = human/decision/secondary, **lilac** `#b58bff` = tertiary/organizational, **warn orange** `#f0b464` = caution/gate/pause. Neutral nodes stay white-ish at low opacity.
- Arrows are thin (`1.4–1.8px`), color-matched to what they're leaving, often dashed for "loop back" / feedback paths.

Read `references/style-tokens.md` for the exact copy-pasteable CSS/defs, and `references/patterns.md` for 7 ready-to-adapt diagram archetypes (hub-and-spoke, layered stack, fan-in funnel, state machine, flywheel/cycle, waterfall steps, horizontal pill-chain).

## Workflow

Read the full skill on GitHub

Details

Skill name: linear-style-illustration
Repository: yanliudesign/linear-style-illustration
License: MIT
Repo updated: 30 July 2026

FAQ

What does the Linear Style Illustration skill do?

How do I install the Linear Style Illustration skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add yanliudesign/linear-style-illustration --skill linear-style-illustration. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Linear Style Illustration popular?

It lives in yanliudesign/linear-style-illustration, which has 9 GitHub stars and 1 forks.

Related skills

Media Analysis

kajisho5/media-analysis-skill

Measure deterministic facts about a media file (container, streams, video/audio format, silence, loudness, integrity, scene cuts, timing) with local ffprobe/ffmpeg and return a structured Observation. Use when a task needs to *know* something about a video or audio file before deciding anything: duration, resolution, fps, CFR/VFR, codecs, channel layout, where the silence is, how loud it is (LUFS / true peak), whether it decodes cleanly, where hard cuts are. Do not use it to edit, convert, normalise or export media (that is ffmpeg-skill) or to interpret the numbers (that is the agent). Python

Images, Video & Audio

Imperium Brain

ceoimperiumprojects/imperium-brain

The Ultimate Startup OS for Claude Code. Routes to 18 domain skills across startup ops, competitive research, and content creation. Use when the user mentions anything related to: startups, strategy, fundraising, marketing, sales, product, finance, legal, engineering, competitive research, ecosystem mapping, LinkedIn posts, carousels, presentations, slides, brand identity, tone of voice, SOPs, runbooks, video creation, API discovery, images, visual media, stock photos, or any business/startup/content topic.

Images, Video & Audio

Reeljet

Xabilimon1/reeljet

Use when the user wants to create a short promo or demo video (Reels/TikTok/Shorts/landing hero) for an app, web, or SaaS from their own screen recordings and screenshots. Orchestrates creative direction, Higgsfield-generated motion/b-roll, local music, and deterministic ffmpeg assembly into master 16:9 + 9:16. Trigger: /reeljet.

Images, Video & Audio

Youtube Publisher

smixs/youtube-publisher

End-to-end video publishing pipeline: download from Google Drive, upload to YouTube, transcribe audio via Deepgram or Fireworks Whisper, generate title/description/timestamps, clean up temp files. Use when: "залей на YouTube", "опубликуй видео", "upload to YouTube", "видео из Drive на YouTube", "meet recording to YouTube", "транскрибируй и залей", "publish video", "upload recording". NOT for: video editing, adding intros/effects, non-Drive video sources, YouTube channel management, or live streaming.

Images, Video & Audio

Talking Head Editor

griffinwooldridge/talking-head-editor

Edit raw talking-head footage into a finished video with Claude. Tight cuts that never clip a word, studio-clean voice, reframing and punch-ins, word-timed captions, and cinematic motion graphics written as code, all rendered frame-exact with ffmpeg and HyperFrames. Use when someone hands you a raw recording (camera file, optional separate mic) and asks to "edit this video", "cut my talking head", "add motion graphics", "clean up the audio" or "make this look edited".

Images, Video & Audio

Whiteboard Explainer

brandonvant/claude-skill-whiteboard-explainer

Build VideoScribe-quality whiteboard explainer videos in HyperFrames — the photo-hand mask-reveal architecture with per-element isolated artwork, Whisper word-timestamp sync, and hard QA gates that prevent the classic failure modes (elements cut off or overlapping, draws out of sync with the voiceover, graphics visible before the hand reveals them, low-detail art). Use whenever the user asks for a whiteboard / hand-drawn / sketch-style / "drawn by a hand" explainer video. This skill governs MECHANICS only — visual style (fonts, palette, art direction, music) is designed fresh per project and m

Images, Video & Audio

Browse the most popular Claude skills, all images, video & audio skills, or write your own with the skills generator.