New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Nextclaw Skin Studio

by Peiiii in Peiiii/nextclaw

A skill your agent uses when a user wants to browse, apply, inspect, create, refine, switch, or remove a NextClaw skin; wants a personal skin with arbitrary CSS, JavaScript, images, SVG, DOM…

MITAuto-check passed

Install Nextclaw Skin Studio

skills CLI
$ npx skills add Peiiii/nextclaw --skill nextclaw-skin-studio -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install Peiiii/nextclaw nextclaw-skin-studio --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/Peiiii/nextclaw.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/nextclaw-skin-studio .claude/skills/nextclaw-skin-studio && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
nextclaw-skin-studio
GitHub stars
260
Token cost
~1.8k tokens
SKILL.md length
877 words
Files
15 (incl. scripts, references, assets)
Skills in repo
70
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when a user wants to browse, apply, inspect, create, refine, switch, or remove a NextClaw skin; wants a personal skin with arbitrary CSS, JavaScript, images, SVG, DOM…

  • Works in 7 steps: Show the built-in catalog when the user… → Inspect the target instance without… → Apply the selected built-in skin → …
  • A user wants to browse
  • SKILL.md covers Safety boundary, Workflow, Authoring and repair workflow and Built-in skins
  • Runs JavaScript scripts from its folder; calls node

What it does

Nextclaw Skin Studio is an agent skill from Peiiii/nextclaw. Use when a user wants to browse, apply, inspect, create, refine, switch, or remove a NextClaw skin; wants a personal skin with arbitrary CSS, JavaScript, images, SVG, DOM changes, motion, or component-level effects; asks for 易烊千玺/Jackson Yee, 桥本有菜, 迪丽热巴, 初音未来, KUN, Jinx, ENFP, or Gothic Void Crusade; or says a skin looks wrong or incomplete anywhere in the product.

Its SKILL.md is about 1.8k tokens, which your agent loads only when the skill is triggered. The skill folder holds 18 other files, including scripts, reference files and assets (for example `agents/openai.yaml`, `assets/concept-decoration-styles.js` and `assets/concept-navigation-styles.js`).

It works with JavaScript. The repository describes itself as: A human-centered long-term AI partner—not a task-centered assistant. The licence is MIT.

When your agent uses it

  • A user wants to browse
  • Remove a NextClaw skin
  • Wants a personal skin with arbitrary CSS
  • Component-level effects

Example prompts

  • “/nextclaw-skin-studio”

Requirements

  • Node.js

Workflow steps

7 steps, taken from the first numbered list in SKILL.md.

  1. Show the built-in catalog when the user has not selected a skin
  2. Inspect the target instance without changing it
  3. Apply the selected built-in skin
  4. For a small token/image variant, create a one-off custom skin. Colors must be six-digit hex values; PNG, JPEG, and WebP images must be…
  5. For an authored or repeatedly refined skin, create a durable personal project outside the installed Skill, preferably under…
  6. Run status again, then tell the user to refresh the browser or desktop view.
  7. Restore the default UI only when requested

What it can do on your machine

Read from SKILL.md and the folder at commit 2c9e06e. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 2 files in scripts/ (JavaScript), which the agent can run.

    Shell commands in SKILL.md call:

    • node

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Nextclaw Skin Studio loads about 1.8k tokens when it runs, and up to ~5.1k if it reads all its reference files. Until then it costs about 97 tokens; SKILL.md has 877 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~97
When it runs · the whole SKILL.md, loaded when a task matches
~1.8k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~5.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from Peiiii/nextclaw at commit 2c9e06e, republished under its MIT licence (© Peiiii). 877 words, ~1,818 tokens.

Download SKILL.mdSave it as .claude/skills/nextclaw-skin-studio/SKILL.md (or your agent's skills folder). This skill also uses 14 other files; get the full folder from GitHub.
name
nextclaw-skin-studio
description
Use when a user wants to browse, apply, inspect, create, refine, switch, or remove a NextClaw skin; wants a personal skin with arbitrary CSS, JavaScript, images, SVG, DOM changes, motion, or component-level effects; asks for 易烊千玺/Jackson Yee, 桥本有菜, 迪丽热巴, 初音未来, KUN, Jinx, ENFP, or Gothic Void Crusade; or says a skin looks wrong or incomplete anywhere in the product.

NextClaw Skin Studio

Use scripts/skin.mjs from this skill directory. It owns one unsupported ui-inject.js file and does not add a skin system to the NextClaw product core.

The shared renderer is an external design-system runtime, not a wallpaper switcher. It applies tokens, semantic surfaces, component states, page-aware recipes, and independent decorations across the app shell, real conversations, skill marketplace, settings, forms, overlays, code blocks, process rows, and loading states.

When the request is to create, refine, review, or repair a skin, you must read skin-authoring-and-repair-guide.md completely before editing. It explains the user-owned project, unrestricted effect boundary, source ownership, real-data preview, and visual iteration method. Do not infer those rules from this overview.

Safety boundary

  • Installing this Skill changes nothing by itself. Treat apply, custom, apply-project, and remove as instance writes; run them only after the user asks to change the instance. create-project writes only the explicitly selected project directory.
  • Before the first write, state that a skin is same-origin JavaScript with full page access and no official compatibility, security, or reliability guarantee.
  • Require a NextClaw build that exposes the experimental /api/ui-inject.js hook. If a correct file has no visible effect after refresh, ask the user to update NextClaw; do not patch application bundles.
  • Never overwrite or remove a file owned by another tool. The script enforces this boundary.
  • Applying an included skin downloads one pinned image from the upstream Codex Dream Skin repository, verifies its SHA-256 digest, and embeds it into ui-inject.js. It never downloads or executes remote JavaScript. A missing download or digest mismatch is a hard failure; do not substitute another image.
  • A personal project's skin.js is arbitrary, unsandboxed, same-origin JavaScript with full page access. Skin Studio exposes no JavaScript API and does not make this code safe. Inspect the project source, explain the risk, and apply only code the user trusts.
  • Several upstream gallery entries depict public figures or protected characters. Before applying one, say that the upstream image is third-party material, is not covered by the upstream MIT software license, and remains the user's responsibility. Do not imply endorsement by the depicted person or rights holder.
  • All browsers connected to the same NextClaw home use the same active skin. Refresh the page after a change; do not restart NextClaw.
  • When the user asks to preview local real data, use the real NextClaw home and isolate only the development process run state. Do not copy a small subset of sessions into a temporary home and present it as a real-data preview.

Workflow

  1. Show the built-in catalog when the user has not selected a skin:

    bash
    node scripts/skin.mjs list

  2. Inspect the target instance without changing it:

    bash
    node scripts/skin.mjs status

  3. Apply the selected built-in skin:

    bash
    node scripts/skin.mjs apply jackson-yee

  4. For a small token/image variant, create a one-off custom skin. Colors must be six-digit hex values; PNG, JPEG, and WebP images must be local and at most 5 MB:

    bash
    node scripts/skin.mjs custom --name "My Aurora" --base gothic-void-crusade --accent "#22d3ee" --secondary "#a78bfa" --image /absolute/path/hero.png

  5. For an authored or repeatedly refined skin, create a durable personal project outside the installed Skill, preferably under $NEXTCLAW_HOME/skins/:

    bash
    node scripts/skin.mjs create-project "$NEXTCLAW_HOME/skins/my-skin" --name "My Skin" --base jackson-yee

    Edit its skin.json, arbitrary skin.css, arbitrary skin.js, and local assets. There is no project JavaScript API or component allowlist. Apply the project with:

    bash
    node scripts/skin.mjs apply-project "$NEXTCLAW_HOME/skins/my-skin"

  6. Run status again, then tell the user to refresh the browser or desktop view.

  7. Restore the default UI only when requested:

    bash
    node scripts/skin.mjs remove
Show full SKILL.md (339 more words)Show less

Authoring and repair workflow

  • Treat feedback such as “the message card is wrong”, “the sidebar hover has two layers”, “tool output is still default”, or “the input panel does not match” as a request to repair the exact real surface, not as a request for a new wallpaper.
  • Keep one stable preview URL and use representative real data. Inspect the actual surface, then freely change the personal project's CSS, JavaScript, DOM decoration, SVG, imagery, layout, or motion as the effect requires.
  • Re-run apply-project for the same project after each source edit. Never patch generated $NEXTCLAW_HOME/ui-inject.js, the installed Skill, or an application bundle for a personal refinement.
  • Verify the reported effect in the real interaction, related states, wide/narrow layouts, scrolling, focus, and at least one complete motion cycle before saying the repair is complete.

For an instance using a non-default home, append --home /absolute/path to every command. If the upstream repository is already cloned or network access is unavailable, append --source-dir /absolute/path/to/Codex-Dream-Skin; the same pinned SHA-256 checks still apply. Read third-party-notices.md when discussing provenance or image rights.

Built-in skins

  • jackson-yee: 易烊千玺 / Jackson Yee light portrait concept.
  • arina-hashimoto: 桥本有菜 / Arina Hashimoto rose portrait preset.
  • dilraba-violet: 迪丽热巴 / Dilraba violet portrait concept.
  • miku-cyan: Hatsune Miku cyan-and-pink character concept.
  • kun-noir: KUN black-and-gold stage portrait concept.
  • jinx-pop: Jinx pink-and-blue comic character concept.
  • enfp-spark: bright ENFP illustrated character concept.
  • people-ai-red: red-and-white People AI concept.
  • god-of-wealth: cream, red, and gold God of Wealth concept.
  • pink-custom: the upstream pink customization concept.
  • gothic-void-crusade: the upstream Gothic Void Crusade background preset.

concept-preview entries come from the upstream gallery's full-window visual concepts, while preset-background entries are upstream pure backgrounds. Skin Studio extracts the source image's palette, material, portrait crop, and decorative language, then applies them to real interactive NextClaw components. It does not display the concept screenshot's fake controls or text as a background UI.

status, apply, custom, apply-project, and remove report the resulting state as JSON. occupied means another tool owns the injection and no write is allowed. The released Abyssal Compass predecessor is recognized only for migration or removal.

© Peiiii, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 14 other files (scripts, references, assets) in skills/nextclaw-skin-studio of Peiiii/nextclaw.

  • SKILL.md
  • agents/openai.yaml
  • assets/concept-decoration-styles.js
  • assets/concept-navigation-styles.js
  • assets/content-styles.js
  • assets/control-styles.js
  • assets/foundation-styles.js
  • assets/navigation-styles.js
  • assets/renderer.js
  • assets/skins.json
  • marketplace.json
  • references/skin-authoring-and-repair-guide.md
  • references/third-party-notices.md
  • scripts/skin-project.mjs
  • scripts/skin.mjs

Open the folder on GitHubat commit 2c9e06e

Compare with similar skills

Nextclaw Skin Studio next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Nextclaw Skin Studio compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Nextclaw Skin Studio this skillPeiiii/nextclaw260—~1.8kAutomated safety check: PassMIT
Code Review ChecklistshareAI-lab/learn-claude-code78k4 repos~1.1kAutomated safety check: PassMIT
Tailwindcss Developmentanonaddy/anonaddy4.9k10 repos~865Automated safety check: PassMIT
Figma use_figma Plugin API Ruleswarpdotdev/warp65k4 repos~4.4kAutomated safety check: PassAGPL-3.0
JavaScript Concept Fact Checkerleonardomso/33-js-concepts67k1 repos~5kAutomated safety check: PassMIT
GSAP Core Animationgreensock/gsap-skills16k3 repos~3.7kAutomated safety check: PassMIT

Similar skills

  • Code Review Checklist

    shareAI-lab/learn-claude-code

    Reviews code against a five-part checklist covering security, correctness, performance, maintainability and testing, and reports findings in a fixed format.

    78k GitHub starsUsed in 4 repos~1.1k tokens
    DevelopmentAuto-check passed

  • Tailwindcss Development

    anonaddy/anonaddy

    Always invoke when the user's message includes 'tailwind' in any form.

    4.9k GitHub starsUsed in 10 repos~865 tokens
    Frontend & DesignAuto-check passed

  • Figma use_figma Plugin API Rules

    warpdotdev/warp

    Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.

    65k GitHub starsUsed in 4 repos~4.4k tokens
    Frontend & DesignAuto-check passed

  • JavaScript Concept Fact Checker

    leonardomso/33-js-concepts

    Verifies the technical accuracy of JavaScript concept pages by checking code examples, MDN and ECMAScript claims and external links through a five-phase method.

    67k GitHub starsUsed in 1 repo~5k tokens
    Writing & ContentAuto-check passed

  • GSAP Core Animation

    greensock/gsap-skills

    Covers the GSAP core API for tweens, easing, staggers, defaults and matchMedia, and when to choose GSAP over CSS animations or other JavaScript animation libraries.

    16k GitHub starsUsed in 3 repos~3.7k tokens
    Frontend & DesignAuto-check passed

  • Scroll World Landing Page

    oso95/scroll-world

    Builds a scroll-driven landing page where a pre-rendered camera flies through connected AI-generated scenes, using Higgsfield for stills and video clips.

    9.9k GitHub starsUsed in 1 repo~12k tokens
    Frontend & DesignAuto-check: notes

More from Peiiii/nextclaw

All 70 skills in this repo

  • Development Task Telemetry

    Peiiii/nextclaw

    A skill your agent uses when a development task needs visible phase tracing, task-level or phase-level Token measurement, model/effort comparison, or a deterministic usage report or local dashboard…

    260 GitHub stars~802 tokensUpdated yesterday
    Auto-check passed

  • Nextclaw Product Visual Assets

    Peiiii/nextclaw

    当 NextClaw 产品更新后需要生成、替换、挑毛病或检查官网、GitHub README、用户文档或社交传播中的真实截图、AI 宣传视觉、整页 HTML 宣传预览、社区二维码等对外视觉资产时使用；也用于“更新截图”“重新截一批图”“做宣传页”“生成 campaign 页面”“视觉审稿”“五星挑刺法”或发布前检查视觉资产。普通站点布局开发或只写文章不触发。

    260 GitHub stars~801 tokensUpdated yesterday
    Auto-check passed

  • UI UX Pro Max

    Peiiii/nextclaw

    A skill your agent uses when the user wants professional UI/UX design guidance, design-system generation, UX review, or stack-specific frontend guidance through a bundled local UI/UX Pro Max dataset…

    260 GitHub stars~2k tokensUpdated yesterday
    Auto-check passed

  • Impeccable

    Peiiii/nextclaw

    A skill your agent uses when the user wants distinctive, production-grade frontend design, anti-generic AI aesthetics, UX critique, technical UI audits, or final polish through bundled Impeccable…

    260 GitHub stars~2.5k tokensUpdated yesterday
    Auto-check passed

  • Nextclaw Skill Resource Hub

    Peiiii/nextclaw

    Curate NextClaw skill resources, including OpenClaw and community sources.

    260 GitHub stars~479 tokensUpdated yesterday
    Auto-check passed

  • Mmx CLI

    Peiiii/nextclaw

    Use mmx to generate text, images, video, speech, and music via the MiniMax AI platform.

    260 GitHub starsUsed in 3 repos~2.7k tokens
    Auto-check passed

Works with

Questions about Nextclaw Skin Studio

What does Nextclaw Skin Studio do?

A skill your agent uses when a user wants to browse, apply, inspect, create, refine, switch, or remove a NextClaw skin; wants a personal skin with arbitrary CSS, JavaScript, images, SVG, DOM…. Nextclaw Skin Studio is an agent skill from Peiiii/nextclaw. Use when a user wants to browse, apply, inspect, create, refine, switch, or remove a NextClaw skin; wants a personal skin with arbitrary CSS, JavaScript, images, SVG, DOM changes, motion, or component-level effects; asks for 易烊千玺/Jackson Yee, 桥本有菜, 迪丽热巴, 初音未来, KUN, Jinx, ENFP, or Gothic Void Crusade; or says a skin looks wrong or incomplete anywhere in the product.

When should I use Nextclaw Skin Studio?

Nextclaw Skin Studio fits situations like: A user wants to browse; remove a NextClaw skin; wants a personal skin with arbitrary CSS; component-level effects.

How do I install Nextclaw Skin Studio in Claude Code?

Run `npx skills add Peiiii/nextclaw --skill nextclaw-skin-studio -a claude-code`. Or copy the skill folder (skills/nextclaw-skin-studio in Peiiii/nextclaw) into .claude/skills/nextclaw-skin-studio in your project. Claude Code loads it when a task matches its description.

How do I install Nextclaw Skin Studio in Codex?

Run `npx skills add Peiiii/nextclaw --skill nextclaw-skin-studio -a codex`. Or copy the skill folder (skills/nextclaw-skin-studio in Peiiii/nextclaw) into .agents/skills/nextclaw-skin-studio in your project. Codex loads it when a task matches its description.

Can I use Nextclaw Skin Studio in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Peiiii/nextclaw --skill nextclaw-skin-studio -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/nextclaw-skin-studio, .gemini/skills/nextclaw-skin-studio, .github/skills/nextclaw-skin-studio and .opencode/skills/nextclaw-skin-studio in your project.

What does Nextclaw Skin Studio need to run?

Going by SKILL.md and its folder, Nextclaw Skin Studio needs JavaScript for the scripts in its folder and the command-line tools its instructions call (node). Our summary lists: Node.js.

Does Nextclaw Skin Studio access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Nextclaw Skin Studio safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Nextclaw Skin Studio use?

Nextclaw Skin Studio is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Nextclaw Skin Studio use?

About 1.8k tokens (SKILL.md is roughly 7.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 3.2k tokens, read only when the agent opens those files.

What are the alternatives to Nextclaw Skin Studio?

Skills that share tags, products or a category with Nextclaw Skin Studio: Code Review Checklist (shareAI-lab/learn-claude-code, 78k stars), Tailwindcss Development (anonaddy/anonaddy, 4.9k stars), Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars) and JavaScript Concept Fact Checker (leonardomso/33-js-concepts, 67k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Nextclaw Skin Studio?

Peiiii (a GitHub user) maintains it in Peiiii/nextclaw, which has 260 GitHub stars. The repository holds 70 skills in this directory. The repository was last updated on October 10, 2026.

Source: Peiiii/nextclaw on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.