A curated collection of Claude Code Skills — reusable, domain-specific prompt modules that turn Claude Code into an expert assistant for specialized workflows.
Each of the eleven design skills has its own flagship demo under demos/: eleven looks, each shown on the kind of content it is made for. Two skills outside the design family have demos too: hardware-3d renders instead of laying out, and explain-ladder explains one topic at all four rungs.
-
graphite-design — pencil on warm paper. The hero illustration came from an image model; the diagram on its whiteboard is drawn live by code on top of it. With a 37-figure gallery, assets (wallpapers, vertical video covers, character pose sheets, film stills, stickers) and a 33-second sample reel exported frame by frame.
-
hardware-3d demo — one data word from a DRAM cell to a CPU register, in five stations. Hand-written WebGL2 in a single file: PBR + baked studio softboxes + SSAO, and 200 accumulated samples for real soft shadows and real depth of field. The flow layer draws the path inside the die — logic blocks on the silicon, elevated copper rails above — and advances by clock ticks you can pause and single-step
-
explain-ladder demo — one topic at all four rungs: a real STE rewrite with the checker's output, a call chain as prose and as an ASCII figure, a live throwaway page (25 SKILL.md files checked at a fixed commit, rebuildable byte for byte), and a video that only appears after you say yes
-
apple-design demo — sky-skills in apple.com's crisp voice
-
anthropic-design — only the palette is fixed: a contrast lab, a diagram chooser, five objective checks · the sky-skills story in this voice
-
ember-design demo — handcraft editorial warmth (cream + chocolate + gold)
-
sage-design demo — quiet Nordic minimalism (cream + sage green + deep indigo)
-
glass-design demo — Apple liquid-glass / aurora glassmorphism (deep navy + cyan + frosted panels, dark/light dual theme)
-
atelier-design demo — warm-glass product UI (peach/rose wallpaper + one frosted app shell + gradient orbs); the only skill that draws an application, and it actually clicks
-
eclat-design demo — product-launch keynote on a matte cinematic stage (near-black #040406 + bone #f6f3ec + one cool-blue flare)
-
lectern-design demo — boardroom review deck (paper #f5f6f8 + navy ink #16203a, KPI cards and a decisions table)
-
primer-design demo — ELI5 picture explainer (paper white + violet #7a5cd6 + marker yellow); thick-outline illustrations, analogy cards and jargon→plain-words chips explain what an Agent Skill is to a reader who has never heard of one
-
anthropic diagram gallery — 87 hand-crafted SVG diagrams (registers, SoC blocks, waveforms, schedulers, physical data paths, address spaces, cross-sections, exploded views, pinouts, log-scale rulers, four animated …)
-
anthropic hardware data path — three figures on how pixel data physically moves: the display path with no GPU, where the data goes once a GPU is added, and how a discrete card with its own VRAM really does copy across PCIe
-
panel bring-up — four figures on what is inside a display module, how its flex is wired, the order its supplies must come up in, and which command to run at each block when it stays dark
-
how a chip is assembled — a zoom chain across three orders of magnitude, a process drawn as one part six times, and an exploded view that says what can still come apart
-
explainer in anthropic colours — a tool's intro page that teaches by showing: a hero that animates the mechanism, evidence blocks (real command output, counted checks, refused tickets), and explainers you can click; the whetstone home page with only its palette swapped
-
how one bit is held — a ladder that opens every symbol before using it, a triptych that keeps one geometry and moves only the colour, and a rule that fits ten decades on one axis
-
how a figure gets read — five figures about the reader rather than the subject: three ways to show an inside, moving the highlight instead of the drawing, an interactive stepper, a railroad diagram, and a card that survives being screenshotted
-
where the time goes — two figures that argue rather than report: width with a unit on a sampled profile, and the wait against utilisation with its knee drawn in
-
apple diagram gallery — 32 of the same diagram types in apple.com's clean geometric style
-
explainer in apple style — the same intro page as the anthropic explainer, in apple.com's palette: one blue accent, grey hierarchy, system sans headlines
-
ember diagram gallery — 8 of the same diagram types in warm browns with a single gold focus
-
sage diagram gallery — 8 of the same diagram types in sage green + indigo ink
-
glass diagram gallery — 25 of the same diagram types as frosted panels on the aurora field (theme-proof SVG ink)
-
explainer in liquid glass — the same intro page as frosted panels over an aurora, cyan as the only foreground accent (dark only)
-
eclat lookbook — 8 cinematic keynote compositions (spotlit product, lineup, spec reveal, the moment, pricing, in-the-box, benchmarks, detail)
-
lectern board pack — 8 boardroom panels: line / bar / donut / composition / cohort charts, a roadmap timeline, a KPI block and a decisions table
-
primer picture gallery — 25 thick-outline illustrations from the three primers plus the demo (a book's index, one takeout trip, a sealed envelope …), each answering exactly one question
-
primer technical set — nine hardware / kernel explainers, one question each: a register, one SPI transfer, an SoC, two chips whose house numbers never merge, why layered protocols have no sideways wire, why one chunk of RAM ends up with two house numbers, an IP core's insides, a character's path from
write()to a UART pin, and halving
To preview locally: python3 -m http.server 8000 from the repo root, then open the URLs.
In development:
kernel-review— a Linux kernel / BSP patch reviewer built on masoncl/review-prompts (the review rules used by sashiko). Requirements, design, implementation plans, current status and next steps: docs/superpowers/ROADMAP.md.
| Skill | Language | Description |
|---|---|---|
| linux-kernel-dev | EN | Linux kernel & driver development — coding standards, module/driver/chardev templates, Kconfig, Makefile, device tree bindings, debugging tools, concurrency patterns, kernel API reference |
| wechat-video-publisher | ZH | WeChat article & video production pipeline — edge-tts narration, Playwright frame-by-frame recording, ffmpeg subtitle burning, WeChat-compatible inline-style HTML article templates |
| doc-to-markdown | EN/ZH | Document-to-Markdown converter — batch PDF/DOCX to clean Markdown with extracted images, table conversion, EMF/WMF handling, CJK support |
| md-to-pdf | EN/ZH | Markdown-to-PDF converter with full Chinese support, bookmarks, and page numbers via PyMuPDF Story HTML rendering |
| tech-pdf-reader | ZH | Reading technical PDFs — datasheets, schematics, protocol specs, where the answer sits in a timing diagram or a pin table rather than in the text layer. Locate the section by keyword, render the page so the figure is actually visible, extract embedded images when rendering fails. Its core discipline is separating "the tool failed" from "the file is damaged" — identical symptoms, opposite fixes. scripts/pdf_probe.py reports text layer / embedded-image count / /Contents per page, walks the object graph to tell a recoverable broken reference from content that is simply gone, and reads the Page N of M footer to catch truncated copies. A hardware parameter off by one digit is a hardware problem, so an unreadable page is reported as unreadable — never filled in from plausibility |
| datasheet-reading | EN/ZH | Fact lookup in engineering PDFs — a register's bit definition, a timing minimum, a pin's power source, whether a part is fitted (NC), or whether the document mentions X at all. Locate the page, read the table or figure, and quote it with page + table number so the answer can be re-checked. Its hard rule is that "I could not extract it" is never reported as "the document does not say it" |
| hardware-3d | ZH | Photoreal hardware / chip explainer pages — one HTML file, hand-written WebGL2, zero external dependencies. PBR + a procedurally baked studio-softbox environment + SSAO + true rounded-box geometry; the photographic look comes from accumulation — park the camera and every frame re-jitters the sub-pixel offset (Gaussian σ≈0.32px), the aperture disk, the softbox area and the AO kernel, so 200 samples later the soft shadows and depth of field are real rather than blurred. Tilt-shift keeps a whole board sharp corner to corner. The second layer is the harder one: data flow you can read — a 64-bit word is a row of lit and dark cells, a bus is 64 parallel wires rather than one line, and the path is drawn inside the die (logic blocks on the silicon, elevated copper rails above them — what the metal layers actually are). Everything advances by clock ticks with pause / single-step / speed, so the reader counts the latency themselves. Four runnable checks gate it (self-contained / pipeline / anti-neon realism / frame time) — see the demo |
| explain-ladder | ZH | Pick the form before you write: text < diagram < page < video (after Karpathy, 2026-10-02). Text follows about 80% of ASD-STE100 — one idea per sentence, name who acts, one name per thing, short sentences — in Chinese as well as English; "用 STE 讲" switches it on for the session and "停止" switches it off. check_ste.py flags long sentences, Chinese weak verbs, English passives, two actions in one step, and diagrams wider than 80 columns (a CJK character counts as two). Relations get a diagram first; formal figures come from the design skills' libraries. The third rung is a throwaway single-file page: page_kit.py builds it from real files (every number computed by build.py, sources listed with sha256, no external resources), and check_page.py rebuilds it and compares bytes, so a hand-edited number fails. Video is off by default: the model proposes it in one line and waits for a yes; record_page.cjs records an animated page to webm and checks that it plays and that the picture actually moves |
| kernel-explain | ZH | How to explain a Linux kernel subsystem: big picture first, details last. Holds the approach only, no kernel facts: every fact is looked up in the tree the user names, at the time of explaining. Before writing, pick the tree, version and architecture, then list a beginner's questions in dependency order. Seven layers: the one tension the subsystem resolves; a map of what the hardware does on its own, what kernel code does, and how the two meet (tables and registers software fills for the hardware to read, exceptions the hardware raises when it cannot go on); the most common path walked end to end with one running example; the branches, each pinned to a step; an evolution chain where every link has a naive design, its problem with a number, the fix and its cost; details and file:line last; a 30-second and a 2-minute spoken version. Each layer says where in the code its material comes from (why_this_code.sh for design intent, show_guard_chain.py for branch conditions, ftrace for the real path). check_explain.py checks the structure of a Markdown or HTML write-up (E1–E9, with must-fail self-tests) |
| apple-design | EN/ZH | apple.com palette and restraint, free layout (reworked 2026-10-07, same approach as anthropic-design). Fixed: white / #F5F5F7 alternating, #1D1D1F text, #0066CC as the single accent, hierarchy by grey and whitespace, WCAG-checked text variants. Layout, type and motion are the model's call. Diagram library (33 SVGs, gallery) and an explainer.html example of the three "make it understood" patterns. Checks: design-review/scripts/check_objective.mjs; the MUST pipeline is optional. |
| anthropic-design | EN/ZH | anthropic.com palette, free layout (reworked 2026-10-07). Only the colours are fixed — warm cream (#faf9f5), orange (#d97757), low-saturation blue / olive / gold as semantic hues, ink text — with WCAG-checked text variants (deep orange for small text, ink on orange buttons, lighter status colours inside dark terminals). Layout, type, motion and component markup are the model's call. Ships a diagram library (78 ready SVGs, diagram-craft, gallery) and three "make it understood" patterns shown in explainer.html: a hero that animates the mechanism, evidence blocks, and explainers the reader can click. design-review/scripts/check_objective.mjs (shared with apple / glass) checks only objective defects — JS errors, contrast, real horizontal scroll, diagram text size on phones, content with reduced motion. The old MUST pipeline (planner contract, self-diff, critic score) is now optional. |
| ember-design | EN/ZH | Render HTML/CSS in a handcraft-editorial aesthetic — cream (#fff2df) + chocolate (#312520) + brown CTA (#492d22) + gold accent (#c49464), Fraunces display serif + Inter body. For artisan brands, boutique hotels, literary journals. Adds diagram-craft (2026-06): warm-brown structure + single-gold-focus diagram rules + 8 SVG diagram templates — see the 8-figure gallery |
| sage-design | EN/ZH | Render HTML/CSS in a quiet Nordic-minimal aesthetic — rice-paper cream (#f8faec) + sage green accent (#97B077) + deep indigo ink (#393C54), Instrument Serif display + Inter body + JetBrains Mono. For reading apps, botanical studios, modern journals, quiet tech brands. Adds diagram-craft (2026-06): green-focus + indigo-ink diagram rules + 8 SVG diagram templates — see the 8-figure gallery |
| glass-design | EN/ZH | Liquid-glass material and palette, free layout (reworked 2026-10-07, same approach as anthropic-design). Fixed: deep-navy canvas, at most three aurora blobs behind content, three tiers of frosted panels, cyan as the only foreground accent, cyan buttons with dark ink; a light theme and toggle are now recommended rather than required. Diagram library (25 SVGs) and a dark explainer.html example. Checks: design-review/scripts/check_objective.mjs --themes=dark,light, plus the three physics checks for the liquid cursor. |
| eclat-design | ZH | Render HTML/CSS as a product-launch keynote — near-black matte canvas (#040406), bone type (#f6f3ec), full-bleed display headlines, spotlight + floor reflection, a single cool-blue flare (#bcd2ff), product hero and a full-screen "the moment" beat. Cinematic and dark, restrained like a launch hall with the lights down. Don't use it for glassmorphism (that's glass-design), boardroom decks (lectern-design) or bright consumer-minimal marketing (apple-design) — see the 8-composition lookbook |
| lectern-design | ZH | Render HTML/CSS as a boardroom review deck — paper-white canvas (#f5f6f8), serif headings, deep navy ink (#16203a), low-saturation navy charts (#1d3a6e), structured agenda / sections, KPI cards, a decisions-and-actions table and status pills. Internal, business-facing, data-first: credible without shouting, like a board review that respects the reader's time — see the 8-panel board pack |
| atelier-design | EN/ZH | Render HTML/CSS as product UI, not a page — a warm peach-and-rose mesh wallpaper with ONE frosted application shell floating on it (#E8AE86 / #E39BA8 stops on a #E9C3A8 ground, --atl-shell-bg 0.32 → rail 0.46 composited → data card 0.80 → table 0.94, blur(42px) saturate(1.45)), gradient orb icons (coral #F5854F → rose #DD4F92), round-cap bars over neutral tracks, and exactly one near-black anchor card per screen. Plus Jakarta Sans throughout. Its JavaScript is half the deliverable: rails route, tabs switch, accordions fold, result rows expand, tables sort, switches flip, KPIs count up — all attribute-driven (data-route / data-tab / data-sort / data-count-to …), all freezable for deterministic screenshots. Dual theme (light canonical, warm-espresso dark). Ships 6 canonical screens — dashboard / booking / detail / settings / signin / console, plus a 13-figure gallery whose last four are in-app diagrams — a clickable topology, a pipeline carrying state, a permission graph and a flow canvas (references/diagram-craft.md §7). Don't use it for landing pages (there is no hero tier — an application has no hero), dark aurora glass (glass-design), or anything that gets printed (backdrop-filter does not enter the print pipeline) |
| primer-design | EN/ZH | ELI5 picture explainers — thick-outline illustrations, analogy cards, jargon→plain-words chips; makes any topic legible to a complete beginner |
| relief-design | EN/ZH | Technical diagrams in neumorphism — depth IS the legend: raised is a thing that exists, sunken is a place you cannot reach, a condition, or a channel cut into the surface. Seven skins (warm cream / neutral grey / matte black / ink / mist / clay / sage) selected by data-theme, all measured clean at 4.5:1 in both gate passes. Ships 8 canonical pages — controls (four textures including one deliberate near-miss, plus buttons / switch / slider / input / segmented) / diagram (pipeline · tree · before-after · call layers · struct fields) / hardware (state machine · timing · register bitfield · IP block diagram · memory map · data path · clock tree) / platform (boot chain · partition layout · interrupt-number translation · pin multiplexing · power domains) / code (call stack and three variants · call graph · architecture · execution contexts · sequence diagram · pointer chain) / debug (why probe never ran · who holds what · refcount lifetime · the race window · reading an oops · the missed wakeup) / struct (memory layout with its padding holes · embed vs point vs link · the private-pointer round trip · device-tree property to struct field — every figure ships the source it explains beside it) / git (branches and merges · clone topology · where a fix travelled · ahead versus behind), plus a flagship demo and a 49-figure index tracing one touch from the glass to the application. Two contrast gates are both required because they see different things: check_skin_contrast.py reads text on GRADIENT fills, which axe cannot compute at all, and axe-audit.mjs --theme=<skin> reads every DOM element, which the script does not scan. Don't use it for aurora glass (glass-design), app UI (atelier-design), or beginner picture explainers (primer-design) |
| graphite-design | EN/ZH | Graphite pencil on warm paper — the look of the ai-doc paper explainers. Five things are fixed (warm paper, a warm-grey graphite line that wobbles and overshoots, a few back-and-forth coloured pencils, hand lettering in LXGW WenKai, and drawing stroke by stroke in story order — ink first, colour after); layout, cast and motion are free. assets/sketch.js draws seeded hand-made lines and pencil fills on a timeline; props.js adds a robot, people, objects, diagram nodes and a code card. 37 figures (32 animated): cast · scenes · cinematic · block/architecture · flowcharts · code in plain words · maths and algorithms · charts · marks · learns your taste — including Fourier series, Lagrange interpolation and multipliers, an LRU cache, a call stack, the CFS scheduler and the read() path through the kernel. Big scenes, film stills and wallpapers come from an image model (codex -m gpt-6-astra; prompts and picks recorded in references/image-prompts.md), diagrams from code — the showcase puts both side by side. scripts/export.mjs exports any page or figure frame by frame to MP4 / GIF / PNG (33-second sample reel); scripts/taste.mjs keeps a per-person taste log (picks, words, reviewer findings) and tunes the next drawing to it. Don't use it for neumorphic diagrams (relief-design) or beginner picture books (primer-design) |
| design-taste | EN/ZH | Taste learning shared by every design style — records picks, words, kept / deleted figures, reviewer notes and reference pictures in one local log; estimates each knob as a weighted mean you can check by hand, per scene group; words like "labels too small" carry to other styles at half weight; measures empty space and colour from a picture you like; a small seal on each drawing explains why it looks that way. A style plugs in with one taste-profile.js (graphite so far). |
| design-review | EN/ZH | Independent evaluator for the 11 design skills — gate-chain validation (verify.py structural + visual-audit.mjs Playwright-rendered + axe-audit.mjs accessibility conformance (axe-core; color-contrast blocking, and as of 2026-08-27 the whole corpus measures clean in both themes — see known-bugs §6.6) + screenshot.mjs + opt-in pixel-gate.mjs visual regression (pixelmatch, thresholds probe-calibrated) + critic.mjs LLM taste review) plus a repo-internal known-bug catalogue. Also ships multi-critic.mjs (4 specialist reviewers with fixed weights), a learning loop that turns critic catches into new gate rules via the design-learner agent, and the bin/design-review CLI (the default gate run, plus --plan / --audit / --distill modes). Inspired by Anthropic's harness design for long-running apps: generator and evaluator are separate skills so the reviewer doesn't inherit the generator's assumptions. See the full 9-component harness roadmap (rendered in five of the eleven voices) |
| gated-dual-clone | EN/ZH | Dual-repo git workflow bootstrapper (2-clone default · optional 3-clone with a reproducibility gate). For projects where the upstream branch is protected (MR / PR only) and builds are heavy / pollute the tree. One command creates a gateway repo (push source) and a satellite repo (fetch-only build tree) — the build tree is physically unable to reach the remote. Three safety gates verified post-setup: protocol wall, explicit push-URL disable, pre-push hook. Add --clean-verify-dir for a 3rd clone on cold disk + a stamp-match pre-push gate that refuses to push anything a from-scratch full build hasn't OK'd. Full design spec + anthropic demo |
| gated-dual-clone-audit | EN/ZH | Independent evaluator paired with gated-dual-clone. Imports nothing from the generator — only reads the output topology and re-verifies the safety gates. Four tiers: structural (filesystem / hook / hardlink, 8 gates) → configuration (git config, 8 gates) → behavioural (safe --dry-run + direct hook invocation, 3 gates) → taste (LLM critic subagent, advisory). Pass --clean-verify-dir to auto-add 4 more gates (S9-S11 + C9 + B4) for 3-clone topologies. Run on demand, as a pre-push hook, or as a cron drift check. --json output feeds learning-loop for drift codification. Same generator / evaluator split as design-review |
| doc-review-loop | ZH | Two-agent review loop for serious decision documents. A writer agent drafts the doc with code/data evidence; a reviewer agent then plays a strict no-context PM, challenges every claim, and returns issues bucketed A (blocker) / B (must-fix) / C (nice-to-have). The main thread feeds reviewer findings back to writer for v2, repeats up to 3 rounds. Each round's diff and reviewer questions are logged to <doc>.review.log. Trigger: ship-gate decisions, cross-team alignment docs, complex change justifications, "change vs. don't" rationales. Don't trigger for short READMEs, single-page memos, or personal notes — overhead doesn't pay off |
| design-planner | ZH | Brief→sprint-contract planner for the 11 design skills — expands a vague one-line brief into page-type + audience + section plan + hard quotas (diagram density / bilingual / brand) before any HTML is written, wrapping bin/design-review --plan. Unknown page-types borrow the nearest canonical structure and are stamped LOW-CONFIDENCE |
| design-evolve | EN | Self-improvement loop (harness component 09) — the harness proposing better generator rules, templates and techniques, then keeping only the ones that measurably score higher. Each round: diagnose the weakest critic axis → propose one change → regenerate → score with the frozen evaluator → keep only if it strictly beats the locked baseline and no held-out canonical regressed, else git revert. The evaluator stays frozen so the generator cannot win by moving the target |
| skills-sync | ZH | Manual check-and-update for skills repos. Detects whether the remote is ahead, lists what changed (commit subjects), and — only after you confirm — runs git pull --ff-only and adds symlinks for any newly arrived skills. Never updates on its own; local modifications or a diverged branch abort the pull and are reported as-is |
Claude Code Skills are Markdown files (SKILL.md) that provide Claude Code with domain expertise, coding conventions, templates, and workflow instructions. When installed, they are automatically activated based on trigger conditions — no manual invocation needed.
For example, when you start editing a kernel module, the linux-kernel-dev skill automatically kicks in with kernel coding standards, driver templates, and API references.
Two install scopes. Copying into a project's
.claude/skills/makes a skill available in that repository only; copying into~/.claude/skills/makes it available in every repository on your machine. The commands below use the user-level~/.claude/skills/— swap the destination for project-level installs. Full bilingual walkthrough: docs/INSTALL.html.Heads up — two kinds of skills in this repo. Only four are a lone
SKILL.md:skills-sync,design-planner,design-evolve,wechat-video-publisher. The other twenty-one bundlescripts//references//templates/alongsideSKILL.mdand must be installed as the whole directory — a single-file copy leaves the skill unable to run its scripts. That includes the small-looking ones (md-to-pdf,doc-to-markdownandtech-pdf-readereach carry one script) and the largest one (linux-kernel-devis 233 files). Note thedesign-learneragent used bydesign-review's learning loop is not part of the skill directory: copy.claude/agents/design-learner.mdinto your~/.claude/agents/separately.After installation, restart your Claude Code session so the skill registry picks up the new entries.
git clone https://github.com/TbusOS/sky-skills.git
# Single-file skill
cp sky-skills/skills/skills-sync/SKILL.md \
~/.claude/skills/skills-sync.md
# Multi-file skill — copy the whole directory
cp -r sky-skills/skills/linux-kernel-dev ~/.claude/skills/
cp -r sky-skills/skills/gated-dual-clone ~/.claude/skills/
cp -r sky-skills/skills/gated-dual-clone-audit ~/.claude/skills/
cp -r sky-skills/skills/design-review ~/.claude/skills/git clone https://github.com/TbusOS/sky-skills.git
cd sky-skills
# Single-file skill
ln -s "$(pwd)/skills/skills-sync/SKILL.md" \
~/.claude/skills/skills-sync.md
# Multi-file skill — symlink the whole directory
ln -s "$(pwd)/skills/linux-kernel-dev" ~/.claude/skills/linux-kernel-dev
ln -s "$(pwd)/skills/gated-dual-clone" ~/.claude/skills/gated-dual-clone
ln -s "$(pwd)/skills/gated-dual-clone-audit" ~/.claude/skills/gated-dual-clone-audit
ln -s "$(pwd)/skills/design-review" ~/.claude/skills/design-reviewSome Claude Code versions ship a claude install subcommand that handles both shapes:
claude install github:TbusOS/sky-skills/skills/linux-kernel-dev
claude install github:TbusOS/sky-skills/skills/design-reviewIf the subcommand is not available in your version, use Method 1 or 2.
| Method | Pros | Cons |
|---|---|---|
| 1 · Copy | No tool dependency · portable | Upstream updates need re-copy |
| 2 · Symlink | git pull upstream = your skills update too |
Relies on the clone staying put on disk |
| 3 · CLI | Least typing · handles shape automatically | Depends on claude install being available in your CLI version |
Five skills are detailed below. For the rest, each skill's own SKILL.md is the reference:
md-to-pdf ·
tech-pdf-reader ·
ember-design ·
sage-design ·
design-review ·
gated-dual-clone ·
gated-dual-clone-audit ·
doc-review-loop ·
design-planner
A comprehensive Linux kernel development assistant that covers:
- Coding style — tabs, K&R braces, naming conventions, checkpatch.pl compliance
- Templates — kernel module, platform driver, character device, Makefile, Kconfig
- Device tree — YAML binding schema, DTS node examples
- Memory management — kmalloc/kzalloc, devm_* managed APIs, GFP flags
- Concurrency — mutex, spinlock, RCU, completion, wait queues
- Debugging — printk/dev_*, ftrace, kprobe, perf, crash/kdump
- Kernel API reference — memory, I/O, interrupts, timing, workqueues
- Upstream workflow — commit message format, git format-patch, get_maintainer.pl
Auto-triggers when: working on kernel modules, device drivers, kernel subsystems, Kconfig, Makefile, device tree files, or C code using kernel APIs.
An end-to-end pipeline for creating narrated video tutorials and WeChat articles from interactive HTML animations:
- Narration — edge-tts with Microsoft Xiaoxiao voice, automatic timing generation
- Frame-by-frame recording — Playwright-based precise 30fps capture (not screen recording)
- Subtitle burning — SRT generation from scripts + ffmpeg libass rendering
- WeChat articles — full inline-style HTML templates (WeChat strips
<style>tags and CSS classes) - Screenshots — automated per-step screenshots for article illustrations
Auto-triggers when: creating narrated videos from HTML animations, adding subtitles, or writing WeChat-compatible articles.
Convert PDF and DOCX files to clean, well-formatted Markdown with images extracted and organized:
- PDF conversion — text extraction with heading detection, embedded image extraction, scanned PDF fallback (full-page 2x PNG export)
- DOCX conversion — preserves heading/list/code styles, extracts PNG/JPEG images, handles EMF/WMF diagrams via LibreOffice or PIL
- Table extraction — PDF tables via PyMuPDF's find_tables, DOCX tables to markdown format
- Image management — organized into per-document subdirectories, named by section (
sec{NN}_{seq}_{desc}.png), tiny decorative images auto-filtered - Batch processing — convert single files or entire directories in one pass
- Post-processing guidance — workflow for reviewing, renaming, and curating extracted images
Auto-triggers when: converting documents to markdown, extracting content from PDFs/DOCX files, batch-converting a folder of documents, or any request involving "convert to markdown" / "转成markdown" / "文档转换".
Render any HTML/CSS in the visual language of apple.com:
- Design tokens — full CSS custom-property palette, SF Pro type scale, 4px spacing grid, 12/18px radii, subtle shadows,
cubic-bezier(0.25, 1, 0.5, 1)easing - Layouts — alternating white/pale-gray/black sections, centered hero, 5-col product lineup, 3-col docs, newsroom card grid, event page
- Components — 27 ready-to-use
.apple-*classes: sticky blurred nav, 5-col footer, filled-only-for-buy buttons, inputs, option cards, segmented controls, tabs, carousel, video with ASL badge, badges, pull quotes, details, info/warning/success/danger admonitions, breadcrumbs, search overlay - Templates — 9 drop-in HTML files (landing, article, docs, slide-deck, stat-callout, nav-footer, form, product-configurator, specs-page)
- Diagrams — 32 hand-crafted SVG templates (flow / architecture / hierarchy / timeline / sequence / register-bitfield / soc-block / hw-timing-waveform / sched-timeline / build-pipeline / function-flowchart / algorithm-ringbuffer / deployment / state-machine / call-graph / runtime-timeline / frame-pipeline …) matching Apple's clean geometric style — browse them all in the 31-figure gallery
- Delivery — plain
.apple.css(no build), plus Tailwind preset
Auto-triggers when: the user says "apple 风格" / "apple style" / "苹果官网风格" / "like apple.com", or asks for a landing page / slide / doc / diagram / configurator matching Apple's web look. Does not trigger for: native iOS/macOS UI (use an Apple HIG skill instead) or generic "beautiful page" asks.
Render any HTML/CSS in the visual language of anthropic.com:
- Design tokens — warm cream
#faf9f5bg,#141413text,#d97757orange,#6a9bccblue,#788c5dgreen,#e8e6dclight gray divider - Typography — Poppins headings + Lora serif body (distinct vs Apple's sans-serif body), JetBrains Mono code
- Layouts — editorial card grids, long-form 720px single column, research paper with inline charts, product overview, pricing cards, enterprise with logo wall
- Components — 27
.anth-*classes including filled-pill orange buttons, italic Lora pull quotes with customer logos, low-saturation data charts, customer quote carousel with counter, pricing card (highlight with orange border), logo wall with grayscale hover - Templates — 9 drop-in HTML files (landing, article, docs, slide-deck, pricing, data-report, enterprise, product-overview, nav-footer)
- Diagrams — 65 SVG templates with orange/blue/green category coloring and diamond decision gates, including kernel-grade types (register-bitfield / soc-block / hw-timing-waveform / sched-timeline / protocol-stack / address-map / soc-dataflow / gpu-dataflow / vram-dataflow / platform-block / address-spaces / copy-vs-share / dataflow-animated / page-flip / gpu-memory-flow / vram-copy-flow / arm64-display-path / display-controller-inside / dsi-panel-inside / bus-tenants) plus two component sheets (
glyphs.svg,glyphs-memory.svg) — browse them all in the 60-figure gallery - Delivery — plain
.anthropic.css+fonts.css(imports Poppins/Lora/JetBrains Mono from Google Fonts), plus Tailwind preset
Auto-triggers when: the user says "anthropic 风格" / "anthropic style" / "claude 官网风格" / "Anthropic 品牌", or asks for editorial long-form, research articles, pricing cards, or a filled-button-with-warmth feel.
Does not trigger for: generic "beautiful page" asks (use frontend-design) or Apple aesthetic (use apple-design).
Contributions are welcome! To add a new skill:
- Create a directory under
skills/with your skill name - Add a
SKILL.mdfile with proper frontmatter:
---
name: your-skill-name
description: "Brief description. TRIGGER when: ... DO NOT TRIGGER when: ..."
---
# Your Skill Title
Skill content with guidelines, templates, and references...- Update the skill table in both
README.mdandREADME_zh.md - Submit a pull request
- Include clear trigger conditions in the description frontmatter
- Provide code templates that can be directly used
- Add API references and quick-lookup tables
- Keep content actionable — guidelines Claude can follow, not just documentation
- Target 200–600 lines for optimal skill loading
MIT