A skill is a set of instructions that guides Claude on how to perform a specific type of work. It can lead through interface design, build an interactive prototype, or evaluate animations in existing code. We present five useful examples for UI/UX and current installation methods on Mac, Windows, and in Claude Code. We also explain what can be done on mobile.
Status as of October 4, 2026. Claude is gradually changing its interface; section names may differ between accounts. The five skills below come from two public repositories but may not be factory visible in the catalog of every account.
Skill, Plugin, and Regular Prompt: What’s the Difference?
Prompt is a single command in a conversation. Skill is a saved package of instructions, usually a folder with a SKILL.md file, that Claude can load when it fits the task. A skill may contain additional scripts and materials. Plugin can bundle several skills and other functions. A skill alone does not automatically grant access to Figma, files, or the internet; this depends on the available tools and permissions in a given session.
Five Skills, Five Different Tasks
| Skill | Purpose | Good First Experiment |
|---|---|---|
| apple-design | Designing smooth web interactions: gestures, springs, interrupting animations, typography, motion limited by system settings. | Ask to maintain a sliding panel during dragging and interrupting the gesture. |
| web-artifacts-builder | Building complex interactive artifacts in Claude.ai with React, Tailwind, and shadcn/ui components. | Prototype a three-step form with real state and validation. |
| canvas-design | Static visual composition exported as PNG or PDF. | One-page poster for a feature launch. |
| improve-animations | Audit of motion in code and a plan for improvements. By default, it prepares recommendations instead of changing the product itself. | A list of the three most important animation changes in the app. |
| review-animations | Evaluation of already implemented animations, including timing, curves, performance, and accessibility. | Review of menu animations before publication. |
Do not install all just because they are on the list. web-artifacts-builder is specialized in Claude.ai artifacts; it is not an automatic way to deploy a production application. canvas-design is for static graphics, not for clickable prototypes. improve-animations and review-animations make sense primarily when you have an existing interface or code to evaluate.
How to Install a Skill in Claude on Mac or Windows
The simplest path in Claude leads through Customize → Skills. This is not a system installer for macOS or Windows. Log in to Claude in your browser or desktop app. Choose a skill from the available catalog or upload your own ZIP package. According to Anthropic's instructions, you add your own package through Customize → Skills → + → Create skill → Upload a skill, and then toggle the switch next to the skill.
- Open the skill's source page and read the
SKILL.md. Check if the package contains scripts and what they require. - Download the entire folder of the skill from the repository, not just a single file, if it contains additional resources.
- Zip the folder so that the skill folder is at the top of the archive, with
SKILL.mdinside. - Upload the ZIP in Claude, enable the skill, and test it on a small task.
On Mac, you can zip the folder via Finder → “Compress.” On Windows, use Explorer → “Send to → Compressed (zipped) folder.” The step in Claude is the same. Do not download an unknown archive from a random site when you can check the files in the source repository. A skill is an instruction for the assistant, and scripts from the package can perform operations on files.
What if the Skill is Part of a Plugin?
In Claude, open the plugin catalog and check what skills the selected plugin actually contains. After installation, you can see them under the “+” button or by typing /. Do not assume that the five skills listed above appear under the same names in every plugin. Confirm the name, version, and author of the package before installation.
Claude Code: Installation for Those Working with Code
In Claude Code, the personal skill folder is placed in ~/.claude/skills/skill-name/SKILL.md. The design skill can be placed in .claude/skills/ in the repository. On Windows, ~ refers to the user directory, usually C:\Users\YourName. The directory structure works similarly on both systems; the way to launch Claude Code is described in the official installation instructions.
~/.claude/skills/
apple-design/
SKILL.md
improve-animations/
SKILL.mdOpen the project with the command claude. You can naturally ask for a task or type /apple-design if the skill allows manual activation. Verify the result on a working interface. The skill may advise on timing and spring values, but it does not automatically see the application's behavior on all devices. Details on format and folders are in the Claude Code documentation.
Does it Work on Mobile?
Yes, the current Claude feature table lists skills and plugins for mobile devices. You can start or conduct a task in the Claude app on iOS or Android if the feature is available in your plan. It is more convenient to prepare and upload the ZIP on a computer or in a browser, and then use the enabled skill on your phone. Tasks requiring files on your computer or controlling the local browser may need the Claude Desktop app running and appropriate connections. Claude Code, as a local development tool, is installed on your computer.
Five Ready Commands to Test
Apple Design: “Design a sliding panel on mobile. Describe the behavior during dragging, interrupting the gesture, and with motion limitation enabled. Show the code and testing method.”
Web Artifacts Builder: “Build an interactive prototype for a three-step booking. The form should remember the selection and show validation, and at the end, a summary.”
Canvas Design: “Prepare a one-page PNG poster for the launch of a travel planning app. Provide two proposals for text hierarchy before exporting.”
Improve Animations: “Review the animations in this project and rank three fixes by impact. Do not change the code for now.”
Review Animations: “Evaluate the menu opening animation on desktop and mobile: timing, click response, interruption, performance, and prefers-reduced-motion.”
When a Skill Doesn’t Help
If the result is too general, provide a specific screen, device, constraints, and success criteria. If the skill does not activate, check if it is enabled and if its description matches the task. If an animation “looks nice” only on a powerful laptop, test it on a phone and with a keyboard. The final design decision rests with the team that knows the product's users.
New to Claude? Start with our guide to Claude and Claude Code. If you want to immediately build a specific effect in the interface, see scroll-driven animation.
Comments (0)
No comments yet. Be the first!