Run the command
It adds the Icons8 plugin and downloads the tools
10 open-source Claude skills for UI design
Looking for awesome Claude skills? We built 10 open-source agent skills for frontend design. They handle UI polish, typography and assets.
claude plugin marketplace add icons8/agent-skills &&claude plugin install icons8@icons8Then run /mcp and sign in through the browser
New to AI agents? Start with the guide
How to add skills to Claude Code
Get the Icons8 plugin from the Claude skills marketplace. One command adds the tools to your Claude Code skills.
Let the router work
The icons8-design skill finds the right skill for your task
Keep your style
The agent writes your asset choices to a local file
Run this in your terminal
claude plugin marketplace add icons8/agent-skills &&claude plugin install icons8@icons8Claude skills examples in our library
Our Claude skills GitHub repository holds 10 tools. Each claude-skill targets a specific part of your frontend practice.
Icons8
Holds one icon pack per project, locked in icons8.json
ouch
Holds one illustration style per project, locked in ouch.json
icons8-design
The front door router that sends a design pass to the right skill
asset-check
Spots emoji standing in for icons and finds sections with no picture
ux-check
Checks empty, loading and error states, forms and the accessibility floor
ux-writing
Reviews the writing on your buttons, labels, errors and empty states
ui-polish
Adjusts alignment, radii, shadows, contrast and focus states
motion
Decides if something should animate, checking easing and duration
illustration-animator
Turns a folder of SVG illustrations in one style into looped Lottie and MP4 animations
design-tokens
Manages your palette, spacing, type scale, dark mode and drift
Claude commands vs skills
A prompt is a one-off request. A skill is a repeatable design format saved to a directory.
Progressive disclosure
Claude loads only the name and description at start. The full instructions load only when the agent uses the tool.
Project memory
When you install tools from a repo, the agent learns the standard. You stop repeating the same visual rules.
Focused action
Agents do not need a massive prompt. They pick one rule to check at a time.
The complete guide to building skills for Claude
The Anthropic Claude skills feature relies on text files. Here is how the Claude code skills system custom workflows operate.
Create the folder structure
Make a directory for your tool. Save it in ~/.claude/skills/ for all your projects, or commit it to the project.
Write the SKILL.md file
Every tool needs this file. It uses YAML frontmatter for the name and description, and Markdown for the rules.
Keep it short
The open specification recommends keeping instructions under 500 lines. Break large rules into smaller tools.
What are Claude skills?
A Claude skill is a folder with a SKILL.md. The file has YAML frontmatter for the name and description, and Markdown instructions. Instead of retyping prompts, you keep the rules in that folder and the agent uses them when asked.
The agent reads the YAML metadata when it starts. When your request matches the description, it loads the full Markdown file. This progressive disclosure saves context window space.
To create Claude skills, make a folder named after your tool. Inside it, create a SKILL.md file. Write your name and description in the YAML frontmatter, then write the actual instructions in Markdown. This answers how to create skills in Claude for any workflow.
Run npx skills add remotion-dev/skills to install their skills for video work. They are published by Remotion on GitHub, and the skills repo shows no license file. The docs name Claude Code, Codex, Kimi Code and Cursor.
# One command installs the repository