Skip to content

About

A curated collection of Claude Code Skills — design, kernel, workflow and review skills, with nine single-page flagship demos.

Topics

Resources

Stars

3 stars

Watchers

0 watching

Forks

Repository files navigation

Sky Skills

中文版

A curated collection of Claude Code Skills — reusable, domain-specific prompt modules that turn Claude Code into an expert assistant for specialized workflows.

Live Demos

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.

Available Skills

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

What Are Claude Code Skills?

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.

Installation

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 bundle scripts/ / references/ / templates/ alongside SKILL.md and 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-markdown and tech-pdf-reader each carry one script) and the largest one (linux-kernel-dev is 233 files). Note the design-learner agent used by design-review's learning loop is not part of the skill directory: copy .claude/agents/design-learner.md into your ~/.claude/agents/ separately.

After installation, restart your Claude Code session so the skill registry picks up the new entries.

Method 1: Clone + copy (recommended)

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/

Method 2: Symlink (auto-updates with git pull)

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-review

Method 3: Claude Code CLI (if your version supports it)

Some 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-review

If the subcommand is not available in your version, use Method 1 or 2.

Which method to pick

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

Selected skill details

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

linux-kernel-dev

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.

wechat-video-publisher

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.

doc-to-markdown

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" / "文档转换".

apple-design

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.

anthropic-design

Render any HTML/CSS in the visual language of anthropic.com:

  • Design tokens — warm cream #faf9f5 bg, #141413 text, #d97757 orange, #6a9bcc blue, #788c5d green, #e8e6dc light 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).

Contributing

Contributions are welcome! To add a new skill:

  1. Create a directory under skills/ with your skill name
  2. Add a SKILL.md file 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...
  1. Update the skill table in both README.md and README_zh.md
  2. Submit a pull request

Skill Writing Guidelines

  • 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

License

MIT

About

A curated collection of Claude Code Skills — design, kernel, workflow and review skills, with nine single-page flagship demos.

Topics

Resources

Stars

3 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages