Configure Channel
openclaw/openclaw
Configure and prove a chat channel with non-interactive one-liners; secrets only as SecretRefs.
SF Symbols end-to-end — choosing and configuring the 7,000+ system symbols (rendering modes, variable color/draw, gradients), authoring custom symbols that interpolate across weights, and the…
MITAuto-check passed
Install Sf Symbols
$ npx skills add rshankras/claude-code-apple-skills --skill sf-symbols -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install rshankras/claude-code-apple-skills sf-symbols --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/rshankras/claude-code-apple-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/design/sf-symbols .claude/skills/sf-symbols && rm -rf skills-srcUse ~/.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/
Install the "sf-symbols" agent skill from https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/design/sf-symbols into .claude/skills/sf-symbols/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sf-symbols", 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 install https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/design/sf-symbolsType 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.
$ npx skills add rshankras/claude-code-apple-skills --skill sf-symbols -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install rshankras/claude-code-apple-skills sf-symbols --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/rshankras/claude-code-apple-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/design/sf-symbols .agents/skills/sf-symbols && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "sf-symbols" agent skill from https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/design/sf-symbols into .agents/skills/sf-symbols/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sf-symbols", 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.
$ npx skills add rshankras/claude-code-apple-skills --skill sf-symbols -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install rshankras/claude-code-apple-skills sf-symbols --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/rshankras/claude-code-apple-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/design/sf-symbols .cursor/skills/sf-symbols && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "sf-symbols" agent skill from https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/design/sf-symbols into .cursor/skills/sf-symbols/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sf-symbols", 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 https://github.com/rshankras/claude-code-apple-skills.git --path skills/design/sf-symbols--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add rshankras/claude-code-apple-skills --skill sf-symbols -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install rshankras/claude-code-apple-skills sf-symbols --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/rshankras/claude-code-apple-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/design/sf-symbols .gemini/skills/sf-symbols && rm -rf skills-srcUse ~/.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/
Install the "sf-symbols" agent skill from https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/design/sf-symbols into .gemini/skills/sf-symbols/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sf-symbols", 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.
$ gh skill install rshankras/claude-code-apple-skills sf-symbolsInstalls 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).
$ npx skills add rshankras/claude-code-apple-skills --skill sf-symbols -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/rshankras/claude-code-apple-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/design/sf-symbols .github/skills/sf-symbols && rm -rf skills-srcUse ~/.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/
Install the "sf-symbols" agent skill from https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/design/sf-symbols into .github/skills/sf-symbols/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sf-symbols", 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.
$ npx skills add rshankras/claude-code-apple-skills --skill sf-symbols -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install rshankras/claude-code-apple-skills sf-symbols --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/rshankras/claude-code-apple-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/design/sf-symbols .opencode/skills/sf-symbols && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "sf-symbols" agent skill from https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/design/sf-symbols into .opencode/skills/sf-symbols/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sf-symbols", 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
sf-symbols- GitHub stars
- 787
- Token cost
- ~1.5k tokens
- SKILL.md length
- 675 words
- Files
- 1
- Skills in repo
- 41
- Repo updated
- First seen
- Licence
- MIT
At a glance
SF Symbols end-to-end — choosing and configuring the 7,000+ system symbols (rendering modes, variable color/draw, gradients), authoring custom symbols that interpolate across weights, and the…
- Works in 6 steps: Start from the closest system symbol… → Draw three sources: Ultralight-Small,… → Outline everything: convert live strokes… → …
- Picking iconography
- SKILL.md covers When This Skill Activates, Using system symbols, Animation vocabulary and Authoring custom symbols, plus 2 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Sf Symbols is an agent skill from rshankras/claude-code-apple-skills. SF Symbols end-to-end — choosing and configuring the 7,000+ system symbols (rendering modes, variable color/draw, gradients), authoring custom symbols that interpolate across weights, and the animation preset vocabulary. Use when picking iconography, building custom symbols, animating symbol state changes, or rendering values as symbols.
Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
The repository describes itself as: Claude Code skills for Apple platform development (iOS, macOS, iPadOS) — product validation, code generation, App Store optimization, and more. The licence is MIT.
When your agent uses it
- Picking iconography
- Building custom symbols
- Animating symbol state changes
- Rendering values as symbols
Example prompts
- “/sf-symbols”
Requirements
- Pre-approved tools (allowed-tools): Read, Write, Edit, Glob, Grep
Workflow steps
6 steps, taken from the first numbered list in SKILL.md.
- Start from the closest system symbol (prefer an unfilled base) — SF Symbols app →
- Draw three sources: Ultralight-Small, Regular-Small, Black-Small — the system
- Outline everything: convert live strokes to outlined paths once the design settles; no
- Annotate with unified annotation: layers in explicit z-order; system colors for
- Draw guide points (SF Symbols 7 templates) for Draw On/Off: every path needs a start
- Export the current template version for Xcode. Legacy note: 2.0 templates are
What it can do on your machine
Read from SKILL.md and the folder at commit 9ffb831. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves these tools, so the agent can use them without asking each time:
ReadWriteEditGlobGrep
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
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):
developer.apple.com
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
Sf Symbols loads about 1.5k tokens when it runs. Until then it costs about 88 tokens; SKILL.md has 675 words of instructions outside code blocks.
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
The full file from rshankras/claude-code-apple-skills at commit 9ffb831, republished under its MIT licence (© rshankras). 675 words, ~1,492 tokens.
Download SKILL.mdSave it as
.claude/skills/sf-symbols/SKILL.md (or your agent's skills folder).- name
- sf-symbols
- description
- SF Symbols end-to-end — choosing and configuring the 7,000+ system symbols (rendering modes, variable color/draw, gradients), authoring custom symbols that interpolate across weights, and the animation preset vocabulary. Use when picking iconography, building custom symbols, animating symbol state changes, or rendering values as symbols.
- allowed-tools
- Read, Write, Edit, Glob, Grep
- last_verified
- 2026-07-16
- review_by
- 2027-06-22
SF Symbols
Over 7,000 system symbols with free platform consistency, Dynamic Type alignment, and
accessibility — the default answer to "we need an icon." This skill covers using them well,
authoring custom ones that behave like system ones, and the animation vocabulary.
(Animation implementation patterns live in design/animation-patterns → symbol-effects.md;
this skill owns selection, authoring, and rendering.)
When This Skill Activates
- Choosing icons for tabs, toolbars, buttons, widgets ("should this be an SF Symbol?" — usually yes)
- A needed glyph doesn't exist → authoring a custom symbol
- Rendering a changing value (signal, progress, volume) as a symbol
- Symbol state changes that should animate (mute/unmute, play/pause)
Using system symbols
- Prefer symbols over custom art for tab/toolbar icons — recognizability across the platform
for free, and they scale with text styles (
imageScale, weights match adjacent text). - Keep platform-conventional symbols conventional: share, trash, search mean one thing each.
- Rendering modes: Monochrome · Hierarchical (one color, opacity-derived depth) · Palette (2–3 explicit colors) · Multicolor (intrinsic colors). Pick per context — hierarchical shines in toolbars; multicolor in content.
- Gradients (SF Symbols 7-era): a smooth linear gradient generated from one source color, available in all rendering modes — use where depth helps, keep flat in dense UI.
- Variable value: pass
variableValue(0–1) to render magnitude — signal bars, progress. Thresholds distribute evenly; 0% is the only "empty" state (a symbol reads "full" before 100%). Variable Draw (SF Symbols 7) renders the path at a percentage instead of activating layers — an alternative for progress/temperature; a symbol can carry both but renders one.
Animation vocabulary
Presets: Bounce · Pulse · Variable Color · Scale · Appear · Disappear · Replace · Draw On/Off (SF Symbols 7). Behavior classes: discrete (one-off), indefinite (until removed — always pair with removal logic), transition, content transition.
- Swap symbol states with
.contentTransition(.symbolEffect(.replace))— and prefer Magic Replace (preserves matching enclosures, uses Draw Off/On where supported) for state pairs like mute/unmute. - Draw On/Off playback: By Layer (default) · Whole Symbol · Individually. Symbols define their own drawing direction (wind draws left→right; symmetric symbols from center).
- Effects propagate down the view hierarchy —
.symbolEffectsRemoved()blocks them on subviews. - Full API patterns (SwiftUI
symbolEffect, UIKitaddSymbolEffect) indesign/animation-patterns/symbol-effects.md.
Show full SKILL.md (335 more words)Show less
Authoring custom symbols
The workflow that makes a custom glyph behave like a system one:
- Start from the closest system symbol (prefer an unfilled base) — SF Symbols app → Export Template. Never draw from a blank canvas.
- Draw three sources: Ultralight-Small, Regular-Small, Black-Small — the system interpolates all 27 variants (9 weights × 3 scales) from them. Get Regular-Small right first, then copy its paths and only move points — all sources must keep the same number and order of paths and points (move, never add/remove).
- Outline everything: convert live strokes to outlined paths once the design settles; no open paths (can't fill), no gradients or drop shadows baked in (they break multicolor/ hierarchical rendering) — flat fills only.
- Annotate with unified annotation: layers in explicit z-order; system colors for
multicolor (they adapt to dark mode/contrast); primary→tertiary groups drive hierarchical
and palette modes;
Erasepunches shapes out of layers behind;Hiddenexcludes a layer from a mode. For variable color, z-order = activation order (first-to-fill at bottom). - Draw guide points (SF Symbols 7 templates) for Draw On/Off: every path needs a start (open circle) and end (closed circle); corners marked with diamonds; annotate the Regular weight first (the only weight where guide points can be added/removed) and keep guide-point order identical across weights.
- Export the current template version for Xcode. Legacy note: 2.0 templates are monochrome-only (needed only for very old deployment targets); 3.0+ carries all rendering modes; 4.0+ carries variable color.
❌ Common failures: baking effects into art (breaks rendering modes) · mismatched path counts across sources (kills interpolation) · re-ordering paths after annotation (forces re-annotation) · shipping a filled base variant as the only variant.
Output Format
For icon reviews: Location | Current | Symbol exists? (name) | Mode/config | Action.
For custom-symbol requests: the 6-step authoring checklist above with per-step status.
References
- https://developer.apple.com/sf-symbols/ (the SF Symbols app)
- https://developer.apple.com/videos/play/wwdc2025/337/ (What's new in SF Symbols 7)
- https://developer.apple.com/videos/play/wwdc2021/10250/ (Create custom symbols)
- https://developer.apple.com/videos/play/wwdc2023/10258/ (Animate symbols)
- https://developer.apple.com/videos/play/wwdc2022/10158/ (Variable Color)
- https://developer.apple.com/design/human-interface-guidelines/sf-symbols
- Related skills:
design/animation-patterns(symbol-effects implementation),design/typography(SF font pairing),generators/app-icon-generator(app icons are NOT symbols)
© rshankras, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in skills/design/sf-symbols of rshankras/claude-code-apple-skills.
Open the folder on GitHubat commit 9ffb831
Compare with similar skills
Sf Symbols 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Sf Symbols this skillrshankras/claude-code-apple-skills | 787 | — | ~1.5k | Automated safety check: Pass | MIT | |
| Configure Channelopenclaw/openclaw | 392k | — | ~946 | Automated safety check: Pass | MIT | |
| ConfigurationBuilderIO/agent-native | 7.1k | — | ~2.1k | Automated safety check: Pass | None | |
| Configure Eccaffaan-m/ECC | 277k | 1 repos | ~2k | Automated safety check: Pass | MIT | |
| Configure Eccaffaan-m/ECC | 276k | — | ~1.3k | Automated safety check: Pass | MIT | |
| Configure Eccaffaan-m/ECC | 276k | — | ~1.1k | Automated safety check: Pass | MIT |
Similar skills
Configuration
BuilderIO/agent-native
Where a configuration value belongs — app config schema, agent-native.config.ts, or an environment variable — and how the layers resolve.
Configure Ecc
affaan-m/ECC
Run the conversational ECC setup wizard inside the current harness: inventory the install, collect scope (user/project/local) and hook mode (off/minimal/standard/strict) in Claude Code, use Codex's…
Configure Ecc
affaan-m/ECC
Claude Code、Codex、Kimi 内で ECC のインストール、更新、再設定を案内し、各ハーネスが実際に備えるプラグイン、スコープ、フック機能を守ります。
Configure Ecc
affaan-m/ECC
在 Claude Code、Codex 或 Kimi 内引导 ECC 安装、更新或重新配置，同时严格遵守各家工具真实的插件、范围和 Hook 能力。
Ssh Configuration
sickn33/agentic-awesome-skills
Configure SSH servers and clients securely. An agent skill from sickn33/agentic-awesome-skills.
More from rshankras/claude-code-apple-skills
All 41 skills in this repoAccessibility Generator
rshankras/claude-code-apple-skills
Generate accessibility infrastructure for VoiceOver, Dynamic Type, and accessibility features.
Animation Patterns
rshankras/claude-code-apple-skills
SwiftUI animation patterns including springs, transitions, PhaseAnimator, KeyframeAnimator, SF Symbol effects, scroll-driven effects, mesh gradients, text renderers, and shader effects.
App Description Writer
rshankras/claude-code-apple-skills
Generate compelling App Store descriptions that convert browsers into users.
App Icon Generator
rshankras/claude-code-apple-skills
Generates an app icon for macOS or iOS — a fast CoreGraphics placeholder and/or flat layered source art to finish in Icon Composer (the Liquid Glass / iOS 26+ standard).
App Namer
rshankras/claude-code-apple-skills
Turn an app idea into validated, App-Store-ready name candidates.
Bundles And Licensing
rshankras/claude-code-apple-skills
Revenue beyond the single-app price tag — own-app bundles, Family Sharing as a conversion lever, cross-developer bundles & suites, and institutional licensing via Group Purchases / Apple School &…
Questions about Sf Symbols
What does Sf Symbols do?
SF Symbols end-to-end — choosing and configuring the 7,000+ system symbols (rendering modes, variable color/draw, gradients), authoring custom symbols that interpolate across weights, and the…. Sf Symbols is an agent skill from rshankras/claude-code-apple-skills. SF Symbols end-to-end — choosing and configuring the 7,000+ system symbols (rendering modes, variable color/draw, gradients), authoring custom symbols that interpolate across weights, and the animation preset vocabulary.
When should I use Sf Symbols?
Sf Symbols fits situations like: picking iconography; building custom symbols; animating symbol state changes; rendering values as symbols.
How do I install Sf Symbols in Claude Code?
Run `npx skills add rshankras/claude-code-apple-skills --skill sf-symbols -a claude-code`. Or copy the skill folder (skills/design/sf-symbols in rshankras/claude-code-apple-skills) into .claude/skills/sf-symbols in your project. Claude Code loads it when a task matches its description.
How do I install Sf Symbols in Codex?
Run `npx skills add rshankras/claude-code-apple-skills --skill sf-symbols -a codex`. Or copy the skill folder (skills/design/sf-symbols in rshankras/claude-code-apple-skills) into .agents/skills/sf-symbols in your project. Codex loads it when a task matches its description.
Can I use Sf Symbols 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 rshankras/claude-code-apple-skills --skill sf-symbols -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/sf-symbols, .gemini/skills/sf-symbols, .github/skills/sf-symbols and .opencode/skills/sf-symbols in your project.
What does Sf Symbols need to run?
SKILL.md names no scripts, command-line tools or credentials: Sf Symbols is instructions for the agent only. Its frontmatter pre-approves these tools: Read, Write, Edit, Glob, Grep.
Does Sf Symbols access the network?
SKILL.md names 1 domain. As links in the text: developer.apple.com. This is read from the text; nothing was executed.
Is Sf Symbols 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 Sf Symbols use?
Sf Symbols 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 Sf Symbols use?
About 1.5k tokens (SKILL.md is roughly 6k 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 Sf Symbols?
Skills that share tags, products or a category with Sf Symbols: Configure Channel (openclaw/openclaw, 392k stars), Configuration (BuilderIO/agent-native, 7.1k stars), Configure Ecc (affaan-m/ECC, 277k stars) and Configure Ecc (affaan-m/ECC, 276k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Sf Symbols?
rshankras (a GitHub user) maintains it in rshankras/claude-code-apple-skills, which has 787 GitHub stars. The repository holds 41 skills in this directory. The repository was last updated on July 24, 2026.
Source: rshankras/claude-code-apple-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.