Cometchat iOS Customization
cometchat/cometchat-skills
Brand and restyle the CometChat iOS UI Kit — theme colours, typography, per-component styles, localisation and sounds.
Design skills for Apple platform UI — Liquid Glass, animations, game feel (haptics, sound, celebrations), UI prototyping, UX writing, SF Symbols, and typography.
Install Design
$ npx skills add rshankras/claude-code-apple-skills --skill design -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install rshankras/claude-code-apple-skills design --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 .claude/skills/design && 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 "design" agent skill from https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/design into .claude/skills/design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design", 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/designType 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 design -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install rshankras/claude-code-apple-skills design --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 .agents/skills/design && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "design" agent skill from https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/design into .agents/skills/design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design", 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 design -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install rshankras/claude-code-apple-skills design --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 .cursor/skills/design && 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 "design" agent skill from https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/design into .cursor/skills/design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design", 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--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 design -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install rshankras/claude-code-apple-skills design --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 .gemini/skills/design && 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 "design" agent skill from https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/design into .gemini/skills/design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design", 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 designInstalls 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 design -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 .github/skills/design && 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 "design" agent skill from https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/design into .github/skills/design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design", 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 design -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 design --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 .opencode/skills/design && 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 "design" agent skill from https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/design into .opencode/skills/design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design", 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
design- GitHub stars
- 785
- Token cost
- ~1k tokens
- SKILL.md length
- 408 words
- Files
- 1
- Skills in repo
- 41
- Repo updated
- First seen
- Licence
- MIT
At a glance
Design skills for Apple platform UI — Liquid Glass, animations, game feel (haptics, sound, celebrations), UI prototyping, UX writing, SF Symbols, and typography.
- Works in 3 steps: Platform Consistency → Performance → Visual Hierarchy
- Implementing design language features
- SKILL.md covers When This Skill Activates, Available Skills, Key Principles and Reference Documentation
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Design is an agent skill from rshankras/claude-code-apple-skills. Design skills for Apple platform UI — Liquid Glass, animations, game feel (haptics, sound, celebrations), UI prototyping, UX writing, SF Symbols, and typography. Use when implementing design language features, adding juice/feedback, writing interface copy, or choosing type and iconography.
Its SKILL.md is about 1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design, covering iOS development, Prototyping and Typography. It works with iOS. 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
- Implementing design language features
- Adding juice/feedback
- Writing interface copy
- Choosing type and iconography
Example prompts
- “/design”
Requirements
- Pre-approved tools (allowed-tools): Read, Write, Edit, Glob, Grep, AskUserQuestion
Workflow steps
3 steps, taken from the step headings in SKILL.md.
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:
ReadWriteEditGlobGrepAskUserQuestion
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
Design loads about 1k tokens when it runs. Until then it costs about 74 tokens; SKILL.md has 408 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). 408 words, ~1,019 tokens.
Download SKILL.mdSave it as
.claude/skills/design/SKILL.md (or your agent's skills folder).- name
- design
- description
- Design skills for Apple platform UI — Liquid Glass, animations, game feel (haptics, sound, celebrations), UI prototyping, UX writing, SF Symbols, and typography. Use when implementing design language features, adding juice/feedback, writing interface copy, or choosing type and iconography.
- allowed-tools
- Read, Write, Edit, Glob, Grep, AskUserQuestion
- last_verified
- 2026-07-18
- review_by
- 2027-06-22
- os_version
- iOS 27 / macOS 27
Design Skills
Skills for implementing Apple's modern design systems across platforms.
When This Skill Activates
Use this skill when the user:
- Asks about Liquid Glass design
- Wants to implement modern Apple UI effects
- Needs guidance on visual design patterns
- Asks about materials, transparency, or blur effects
- Wants to create fluid animations
- Asks about spring, bounce, or snappy animations
- Wants PhaseAnimator or KeyframeAnimator help
- Needs view transitions, matched geometry, or hero transitions
- Wants SF Symbol effects (bounce, pulse, wiggle, breathe)
- Asks about animation completions or withAnimation
- Says the app feels flat or wants juice/game feel (celebrations, haptics, sound effects)
- Wants a feedback audit — do events reach the user on the right channels?
- Needs UX structure help: navigation clarity, discoverability, information architecture
- Is writing or reviewing interface copy, alerts, or feature names
- Asks about SF Symbols usage/authoring, fonts, Dynamic Type, or type hierarchy
Available Skills
liquid-glass/
Comprehensive Liquid Glass implementation for iOS 26+, macOS 26+.
- SwiftUI
.glassEffect()API - AppKit
NSGlassEffectView - GlassEffectContainer patterns
- Morphing transitions
- Interactive effects
- Button styles
animation-patterns/
SwiftUI animation patterns for iOS 13–18+.
- Spring configurations (3 API generations)
- PhaseAnimator and KeyframeAnimator (iOS 17+)
- View transitions, matched geometry, navigation transitions
- SF Symbol effects
- Animation completions, transactions, timing curves
game-feel/
Game feel ("juice") as a discipline — the event×channel feedback audit, haptic vocabulary design (Core Haptics service architecture), and sound-effect layers that coexist with music. Routes to animation-patterns for motion technique and generators/milestone-celebration for generated code.
ui-prototyping/
Explore divergent UI directions for a screen as named, runnable Swift #Preview variants — compare, remix, and tune before committing to one design.
Show full SKILL.md (152 more words)Show less
ux-writing/
Interface copy that works — voice/tone, the PACE framework, alert anatomy, feature naming, empty states, and the small-word edits that measurably improve UX.
sf-symbols/
SF Symbols end-to-end — choosing/configuring system symbols (rendering modes, variable color/draw), authoring custom symbols that interpolate across weights, and the animation preset vocabulary.
typography/
UI typography — text styles and Dynamic Type, the San Francisco family with its width axis, optical sizes, tracking vs kerning, and custom-font scaling obligations.
Key Principles
1. Platform Consistency
- Follow Apple Human Interface Guidelines
- Use system-provided APIs
- Respect user appearance preferences
2. Performance
- Use GlassEffectContainer for multiple effects
- Limit number of glass effects per view
- Consider GPU resources
3. Visual Hierarchy
- Glass effects create depth and layering
- Use tints to indicate prominence
- Combine with appropriate shadows
Reference Documentation
- Applying Liquid Glass to custom views (SwiftUI)
- NSGlassEffectView (AppKit)
- Local captured docs (optional): if
~/Downloads/docs/SwiftUI-Implementing-Liquid-Glass-Design.mdor~/Downloads/docs/AppKit-Implementing-Liquid-Glass-Design.mdexists, read it for extra detail; skip silently if absent.
© 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 of rshankras/claude-code-apple-skills.
Open the folder on GitHubat commit 9ffb831
Compare with similar skills
Design 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 |
|---|---|---|---|---|---|---|
| Design this skillrshankras/claude-code-apple-skills | 785 | — | ~1k | Automated safety check: Pass | MIT | |
| Cometchat iOS Customizationcometchat/cometchat-skills | 131 | — | ~1.1k | Automated safety check: Pass | MIT | |
| Apple Hig Designeraxiaoge2/Apple-Hig-Designer | 154 | — | ~3.2k | Automated safety check: Pass | MIT | |
| iOS Hig Design Guidedavepoon/buildwithclaude | 3.6k | — | ~735 | Automated safety check: Pass | MIT | |
| Frontend UI StandardsMaxHan7/frontend-ui-standards-skill | 106 | — | ~2.4k | Automated safety check: Pass | MIT | |
| Frontend Designavibebuilder/claude-prime | 120 | — | ~2.1k | Automated safety check: Pass | MIT |
Similar skills
Apple Hig Designer
axiaoge2/Apple-Hig-Designer
Design Apple-style iOS/macOS interfaces following Human Interface Guidelines.
iOS Hig Design Guide
davepoon/buildwithclaude
Build, update, and apply iOS design specifications using Apple Human Interface Guidelines (HIG) source data.
Frontend UI Standards
MaxHan7/frontend-ui-standards-skill
A skill your agent uses when implementing, refactoring, or reviewing frontend UI across SwiftUI, React, React Native, Flutter, web, or mobile apps.
Frontend Design
avibebuilder/claude-prime
Builds distinctive, production-grade UIs that avoid generic AI aesthetics.
Ipados Design Guidelines
ehmo/platform-design-skills
Apple Human Interface Guidelines for iPad. An agent skill from ehmo/platform-design-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 &…
Related
Works with
Categories
Questions about Design
What does Design do?
Design skills for Apple platform UI — Liquid Glass, animations, game feel (haptics, sound, celebrations), UI prototyping, UX writing, SF Symbols, and typography. Design is an agent skill from rshankras/claude-code-apple-skills. Design skills for Apple platform UI — Liquid Glass, animations, game feel (haptics, sound, celebrations), UI prototyping, UX writing, SF Symbols, and typography.
When should I use Design?
Design fits situations like: implementing design language features; adding juice/feedback; writing interface copy; choosing type and iconography.
How do I install Design in Claude Code?
Run `npx skills add rshankras/claude-code-apple-skills --skill design -a claude-code`. Or copy the skill folder (skills/design in rshankras/claude-code-apple-skills) into .claude/skills/design in your project. Claude Code loads it when a task matches its description.
How do I install Design in Codex?
Run `npx skills add rshankras/claude-code-apple-skills --skill design -a codex`. Or copy the skill folder (skills/design in rshankras/claude-code-apple-skills) into .agents/skills/design in your project. Codex loads it when a task matches its description.
Can I use Design 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 design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/design, .gemini/skills/design, .github/skills/design and .opencode/skills/design in your project.
What does Design need to run?
SKILL.md names no scripts, command-line tools or credentials: Design is instructions for the agent only. Its frontmatter pre-approves these tools: Read, Write, Edit, Glob, Grep, AskUserQuestion.
Does Design 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 Design 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 Design use?
Design 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 Design use?
About 1k tokens (SKILL.md is roughly 4.1k 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 Design?
Skills that share tags, products or a category with Design: Cometchat iOS Customization (cometchat/cometchat-skills, 131 stars), Apple Hig Designer (axiaoge2/Apple-Hig-Designer, 154 stars), iOS Hig Design Guide (davepoon/buildwithclaude, 3.6k stars) and Frontend UI Standards (MaxHan7/frontend-ui-standards-skill, 106 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Design?
rshankras (a GitHub user) maintains it in rshankras/claude-code-apple-skills, which has 785 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.