Agent skill

Sdf Art

Generate sdf-js code from a natural-language scene description.

Custom licenceAuto-check passedFrontend & Design

Install Sdf Art

skills CLI

$ npx skills add shaun8149/sdf-js --skill sdf-art -a claude-code

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

GitHub CLI

$ gh skill install shaun8149/sdf-js sdf-art --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/shaun8149/sdf-js.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/sdf-art .claude/skills/sdf-art && 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/

Paste into Claude Code

Install the "sdf-art" agent skill from https://github.com/shaun8149/sdf-js/tree/main/.claude/skills/sdf-art into .claude/skills/sdf-art/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sdf-art", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/shaun8149/sdf-js/tree/main/.claude/skills/sdf-art

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add shaun8149/sdf-js --skill sdf-art -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install shaun8149/sdf-js sdf-art --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/shaun8149/sdf-js.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/sdf-art .agents/skills/sdf-art && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "sdf-art" agent skill from https://github.com/shaun8149/sdf-js/tree/main/.claude/skills/sdf-art into .agents/skills/sdf-art/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sdf-art", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add shaun8149/sdf-js --skill sdf-art -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install shaun8149/sdf-js sdf-art --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/shaun8149/sdf-js.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/sdf-art .cursor/skills/sdf-art && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "sdf-art" agent skill from https://github.com/shaun8149/sdf-js/tree/main/.claude/skills/sdf-art into .cursor/skills/sdf-art/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sdf-art", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/shaun8149/sdf-js.git --path .claude/skills/sdf-art

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add shaun8149/sdf-js --skill sdf-art -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install shaun8149/sdf-js sdf-art --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/shaun8149/sdf-js.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/sdf-art .gemini/skills/sdf-art && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "sdf-art" agent skill from https://github.com/shaun8149/sdf-js/tree/main/.claude/skills/sdf-art into .gemini/skills/sdf-art/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sdf-art", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install shaun8149/sdf-js sdf-art

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add shaun8149/sdf-js --skill sdf-art -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/shaun8149/sdf-js.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/sdf-art .github/skills/sdf-art && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "sdf-art" agent skill from https://github.com/shaun8149/sdf-js/tree/main/.claude/skills/sdf-art into .github/skills/sdf-art/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sdf-art", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add shaun8149/sdf-js --skill sdf-art -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install shaun8149/sdf-js sdf-art --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/shaun8149/sdf-js.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/sdf-art .opencode/skills/sdf-art && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "sdf-art" agent skill from https://github.com/shaun8149/sdf-js/tree/main/.claude/skills/sdf-art into .opencode/skills/sdf-art/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sdf-art", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: sdf-art
GitHub stars: 421
Token cost: ~9.7k tokens
SKILL.md length: 4,325 words
Files: 8
Skills in repo: 1
Repo updated: Sep 19, 2026
First seen: Oct 7, 2026
Licence: Custom licence

At a glance

Generate sdf-js code from a natural-language scene description.

Works in 8 steps: Outline via dilate → Parametric builders → Decoration clipped to silhouette → …
The user asks to draw / paint / make / illustrate a subject (e.g
SKILL.md covers 2D Primitives, 3D Primitives（仅在 3D mode / 需要…, Booleans and Transforms (chainable methods), plus 8 more sections
Runs JavaScript scripts from its folder

What it does

Sdf Art is an agent skill from shaun8149/sdf-js. Generate sdf-js code from a natural-language scene description. Trigger when the user asks to "draw / paint / make / illustrate" a subject (e.g. "画一棵树", "draw a cathedral", "make me a butterfly", "画 Matisse 风格的舞者"). Outputs a complete runnable JavaScript module using sdf-js's chainable SDF API + render.silhouette. The library lives at sdf-js/ in this repo; the user runs the output by saving as sdf-js/examples/sdf/<name.js + a matching HTML page.

Its SKILL.md is about 9.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 8 other files (for example `examples/boat.js`, `examples/butterfly.js` and `examples/cathedral.js`).

It sits in Frontend & Design, covering HTML artifacts. It works with JavaScript. The repository describes itself as: Chainable JS SDF library + 基于 SDF 的离散结构生成器层 (form × generator decoupling). Port & extension of fogleman/sdf.

When your agent uses it

The user asks to draw / paint / make / illustrate a subject (e.g
Tasks that involve HTML artifacts

Example prompts

“draw / paint / make / illustrate”
“draw a cathedral”
“make me a butterfly”
“/sdf-art”

Requirements

Node.js

Workflow steps

8 steps, taken from the step headings in SKILL.md.

Outline via dilate
Parametric builders
Decoration clipped to silhouette
Face profile via x-ordered smooth-union
Named palette constants
Line art via shell + intersection (different visual register)
Hatching density = photographic levels (intensity → dsep via curve)
Domain warping = aesthetic-direction switch (input-space transform)

What it can do on your machine

Read from SKILL.md and the folder at commit 1c6c23b. 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 script files (JavaScript), which the agent can run.
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
- iquilezles.org
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

Sdf Art loads about 9.7k tokens when it runs. Until then it costs about 116 tokens; SKILL.md has 4,325 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~116
When it runs · the whole SKILL.md, loaded when a task matches: ~9.7k

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); files beside SKILL.md are not scanned.

SKILL.md

Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 4,325 words (~9,653 tokens).

“You're generating SDF code for Atlas, an LLM-native illustration platform built on top of sdf-js. The mental model that anchors the whole system, useful for generative-art-tradition users (Processing / p5.js / Pasma / Tyler Hobbs / BOB):”

— opening of SKILL.md by shaun8149, Custom licence

name: sdf-art

Outline of SKILL.md

Context — what you're contributing to
Role
OUTPUT TARGET: Editorial illustration, not icons
Coordinate Conventions
Typical Scales (CRITICAL — calibrate to these)
Library API
2D Primitives
Decorative & precision primitives (Tier 2/3)
Tier 4 / legacy compat（Wave 1A）
3D Primitives（仅在 3D mode / 需要 SDF3 时用）
基础（Wave 1B）
Platonic solids + 装饰 (Wave 2)
3D artistic ops (Wave 2)
2D → 3D 升维（chainable methods）
3D rendering convention
Booleans
Transforms (chainable methods)
⚠️ Renderer ≠ input format（架构原则，必须理解）
怎么决定 SDF 维度（看 prompt 内容，不看 render mode）
Render mode hint 的真正含义
⚠️ Background pattern 是第三个正交轴（再次提醒不影响 LLM 输出）
Pattern 视觉 register 概览（FYI，方便回答 user 关于 pattern 选择的提问）
2D → 3D 升维（chainable methods）
什么时候默认用 3D（即使 prompt 没"3D"字样）
Idioms (learned from experience — apply when fit)
1. Outline via dilate
2. Parametric builders
3. Decoration clipped to silhouette
4. Face profile via x-ordered smooth-union
5. Named palette constants

Read the full SKILL.md on GitHub

Files

SKILL.md and 7 other files in .claude/skills/sdf-art of shaun8149/sdf-js.

SKILL.md
examples/boat.js
examples/butterfly.js
examples/cathedral.js
examples/dance.js
examples/hatman.js
examples/seurat.js
examples/tree.js

Open the folder on GitHubat commit 1c6c23b

Compare with similar skills

Sdf Art 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.

Sdf Art compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Sdf Art this skillshaun8149/sdf-js	421	—	~9.7k	Automated safety check: Pass	Custom licence	21 days ago
Checking A Pageawss1i/assay	104	1 repos	~712	Automated safety check: Pass	MIT	today
Web Design EngineerConardLi/garden-skills	13k	—	~8.8k	Automated safety check: Pass	MIT	3 mo ago
HTML DesignNimaChu/html-design	101	—	~2.7k	Automated safety check: Pass	None	1 mo ago
Scroll World Landing Pageoso95/scroll-world	9.9k	1 repos	~12k	Automated safety check: Notes	MIT	2 mo ago
SVG Hand-Drawn Animation Previewshaom/svg-hand-drawn-skill	264	—	~1.3k	Automated safety check: Pass	None	6 mo ago

Similar skills

Checking A Page
awss1i/assay
Check that a web page you wrote or changed actually works, by opening it in a browser and driving every control on it.
104 GitHub starsUsed in 1 repo~712 tokens
Frontend & DesignAuto-check passed
Web Design Engineer
ConardLi/garden-skills
Builds polished browser-rendered HTML, CSS, JavaScript and React pages, dashboards, prototypes and slide decks, aiming for a stunning rather than merely functional result.
13k GitHub stars~8.8k tokensUpdated 3 mo ago
Frontend & DesignAuto-check passed
HTML Design
NimaChu/html-design
Create, redesign, repair, validate, preview, and package lightweight standalone HTML deliverables.
101 GitHub stars~2.7k tokensUpdated 1 mo ago
Media & CreativeAuto-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
SVG Hand-Drawn Animation Preview
shaom/svg-hand-drawn-skill
Turns an SVG file or URL into a hand-drawn animation: a standalone preview.html plus a reusable player.js that draws paths first and fills afterward.
264 GitHub stars~1.3k tokensUpdated 6 mo ago
Frontend & DesignAuto-check passed
Self-Contained HTML Pages
SourceWeft/SourceWeft
Builds and revises polished offline HTML reports, landing pages, infographics and interactive visualizations as a single file, with viewport QA before delivery.
187 GitHub stars~817 tokensUpdated today
Frontend & DesignAuto-check passed

Works with

JavaScript

Questions about Sdf Art

What does Sdf Art do?

Generate sdf-js code from a natural-language scene description. Sdf Art is an agent skill from shaun8149/sdf-js. Generate sdf-js code from a natural-language scene description.

When should I use Sdf Art?

Sdf Art fits situations like: the user asks to draw / paint / make / illustrate a subject (e.g; tasks that involve HTML artifacts.

How do I install Sdf Art in Claude Code?

Run `npx skills add shaun8149/sdf-js --skill sdf-art -a claude-code`. Or copy the skill folder (.claude/skills/sdf-art in shaun8149/sdf-js) into .claude/skills/sdf-art in your project. Claude Code loads it when a task matches its description.

How do I install Sdf Art in Codex?

Run `npx skills add shaun8149/sdf-js --skill sdf-art -a codex`. Or copy the skill folder (.claude/skills/sdf-art in shaun8149/sdf-js) into .agents/skills/sdf-art in your project. Codex loads it when a task matches its description.

Can I use Sdf Art 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 shaun8149/sdf-js --skill sdf-art -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/sdf-art, .gemini/skills/sdf-art, .github/skills/sdf-art and .opencode/skills/sdf-art in your project.

What does Sdf Art need to run?

Going by SKILL.md and its folder, Sdf Art needs JavaScript for the scripts in its folder. Our summary lists: Node.js.

Does Sdf Art access the network?

SKILL.md names 1 domain. As links in the text: iquilezles.org. This is read from the text; nothing was executed.

Is Sdf Art 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. Review the folder before installing.

What licence does Sdf Art use?

Sdf Art has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.

How many tokens does Sdf Art use?

About 9.7k tokens (SKILL.md is roughly 39k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Sdf Art?

Skills that share tags, products or a category with Sdf Art: Checking A Page (awss1i/assay, 104 stars), Web Design Engineer (ConardLi/garden-skills, 13k stars), HTML Design (NimaChu/html-design, 101 stars) and Scroll World Landing Page (oso95/scroll-world, 9.9k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Sdf Art?

shaun8149 (a GitHub user) maintains it in shaun8149/sdf-js, which has 421 GitHub stars. The repository was last updated on September 19, 2026.

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

Install Sdf Art

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Files

Compare with similar skills

Similar skills

Checking A Page

Web Design Engineer

HTML Design

Scroll World Landing Page

SVG Hand-Drawn Animation Preview

Self-Contained HTML Pages

Related

Questions about Sdf Art