القائمة
Extract design tokens from any live website using the Dembrandt CLI, and save them in W3C Design Tokens (DTCG) format. Use when you need to inspect or borrow a site's design system.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Scan Claude Code JSONL session transcript files for behavioral patterns — loops, errors, expensive turns, trial-and-error signatures. Returns structured findings for the improvement-analyst agent.
Run a Criterion benchmark on a Rust DSP crate and assert against a checked-in baseline. Establishes whether the implementation fits the real-time budget and catches performance regressions — the Rust equivalent of `perf stat` against the audio buffer time.
Regenerate a C header from a Rust crate via cbindgen and diff it against the committed header. Fails if the generated output differs — catches "Rust signature changed but the C header was not regenerated" before it reaches the C side.
Run `cargo +nightly miri test` against a Rust DSP crate to detect undefined behaviour the compiler missed — out-of-bounds access, use-after-free, uninitialised memory reads, invalid pointer arithmetic. Miri is the cheapest sound UB detector for Rust; this skill wraps it with the right isolation flags for audio DSP crates.
Audit a Rust DSP crate for real-time-safety violations — verifies `#![no_std]`, no `alloc` dependency, `panic = "abort"`, runs targeted clippy lints, greps for banned constructs in the hot path, and scans the compiled LLVM-IR for allocator symbols. Designed to be run on any Rust DSP crate before merge.
Opinionated wasm-pack wrapper that builds a Rust crate to wasm32-unknown-unknown with project-pinned flags (SIMD, LTO, panic=abort), applies a wasm-opt post-pass, and auto-invokes wasm-module-inspect on the result. Single entry point so the agent never reaches for raw wasm-pack and forgets a flag.
| name | dembrandt |
| description | Extract design tokens from any live website using the Dembrandt CLI, and save them in W3C Design Tokens (DTCG) format. Use when you need to inspect or borrow a site's design system. |
| allowed-tools | Bash, Read |
| argument-hint | [url] |
Extract a website's design tokens (colors, typography, spacing, shadows, borders, components) into W3C DTCG-format .tokens.json using the Dembrandt CLI.
The target URL is in $ARGUMENTS. If no URL is provided, ask the user for one before proceeding.
which dembrandt || echo "not installed"
If not installed, use npx dembrandt in place of dembrandt in all commands below (no install required).
Default command — outputs W3C DTCG tokens to output/<domain>/<timestamp>.tokens.json:
dembrandt <url> --dtcg --save-output
Adjust flags based on the site:
| Situation | Flag to add |
|---|---|
| JS-heavy SPA or slow site | --slow |
| Cloudflare / bot-detection issues | --browser=firefox (install first: npx playwright install firefox) |
| Need dark mode tokens | --dark-mode |
| Mobile viewport (390×844) | --mobile |
Example for a resilient extraction:
dembrandt stripe.com --dtcg --save-output --browser=firefox --slow
Dembrandt writes to output/<domain>/ by default. After extraction, move the files to the project's canonical design token location.
Derive a kebab-case short name from the site's domain (e.g. stripe.com → stripe, fonts.google.com → google-fonts) and run:
SITE_SLUG="<web_site_shortname_kebab>"
DEST="project-docs/project-documentation/design-tokens/$SITE_SLUG"
mkdir -p "$DEST"
mv output/<domain>/* "$DEST/"
Confirm the files are in place:
ls "$DEST"
Report the final file paths and summarize what token categories were extracted (colors, typography, spacing, shadows, borders, components, etc.).
If the task requires integrating extracted tokens into the project:
design-vision.md to note the reference site and any borrowed tokens