Skip to content
mcp/skillhub

Agent Skill

Tweaks skill

tweaksnexu-io/open-designdesign-templates/tweaks/SKILL.md

Wrap any HTML artifact with a side panel of live, parameterized controls — accent color, type scale, density, motion, theme — that rewrite CSS custom properties in real time and persist to localStorage. Lets the user explore variants of a design without re-prompting the agent. Use when the brief asks for "variants", "side-by-side options", "tweak this", "let me adjust", "live knobs", or "实时调参".

103kApache-2.0

always on

102 tokname + description

once used

2,732 tokSKILL.md body

bundled files

238 KB

repo stars

103kGitHub

Install the Tweaks skill

Skills CLI (Claude Code, Codex, Cursor and others)

npx skills add https://github.com/nexu-io/open-design --skill tweaks

Claude Code, by hand (all projects)

git clone --depth 1 https://github.com/nexu-io/open-design.git /tmp/open-design
mkdir -p ~/.claude/skills
cp -R /tmp/open-design/design-templates/tweaks ~/.claude/skills/tweaks

For one project only, copy the folder into .claude/skills/ in that project instead. The agent picks it up when a task matches its description.

What it costs your context

Agent Skills load in three steps. Tokens counted with the o200k tokenizer; your model's count will differ a little.

WhenWhat loadsCost
Every sessionName and description102 tok
When the agent uses itThe SKILL.md instructions2,732 tok
Only if opened2 bundled files (38 KB)varies

Until it is used, tweaks costs about 13× less than the median MCP server we measured (1,362 tokens on every turn). Installing all 150 skills from nexu-io/open-design would load 9,514 tokens of descriptions. Skills vs MCP study

Checks

Our checks found nothing to flag: it follows the Agent Skills specification's naming and size guidelines and doesn't pipe downloads into a shell.

Checked 2026-10-22 · method

What's inside

The headings of its SKILL.md. Read the full file on GitHub.

  • Tweaks Skill · 参数化变体面板
  • What you produce
  • When to use
  • When not to use
  • The 5 standard knobs
  • 1. --accent — Accent color
  • 2. --scale — Type scale (0.85 / 1.0 / 1.15)
  • 3. --density — Layout density (Tight / Normal / Roomy)
  • 4. --mode — Light / Dark
  • 5. --motion — Off / Subtle / Lively
  • Host integration contract (REQUIRED)
  • Protocol A — postMessage (recommended for agent-generated artifacts)
  • Protocol B — class-based (used by assets/wrap.html)
  • Anti-pattern
  • Implementation primitives
  • Workflow
  • Step 1 — Acquire the artifact
  • Step 2 — Decide which knobs apply
  • Step 3 — Lift hard-coded values into custom properties
  • Step 4 — Paste into the wrap
  • Step 5 — Test the loop
  • Output contract
  • Hard rules

More skills from nexu-io/open-design

All skills in this repo
  1. article-magazinenexu-io/open-design

    Huashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.

    103k30 tok idle · 207 in use
  2. aster-ateliernexu-io/open-design

    Use this template when the user wants an artistic creative-studio website with classical imagery, cobalt skies, elegant serif typography and cinematic scrolling.

    103k31 tok idle · 539 in use
  3. audio-jinglenexu-io/open-design

    Audio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.

    103k78 tok idle · 942 in use
  4. blog-postnexu-io/open-design

    A long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".

    103k57 tok idle · 570 in use
  5. build-testnexu-io/open-design

    Run the project's build / typecheck / lint / test commands and emit the build.passing + tests.passing signals devloop convergence reads.

    103k31 tok idle · 607 in use
  6. card-twitternexu-io/open-design

    Twitter quote or data card designed to pair with a post.

    103k15 tok idle · 151 in use
  7. card-xiaohongshunexu-io/open-design

    Xiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.

    103k24 tok idle · 266 in use
  8. clinical-case-reportnexu-io/open-design

    Structured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".

    103k73 tok idle · 1,806 in use