What is a skill?
A skill is a small file with instructions for the AI assistant. It's a bit like a handbook the assistant keeps on its shelf: it doesn't read it all the time, only when your request needs it. When you ask "tidy up the spacing on my welcome page", the assistant picks up the spacing skill, reads it, and follows it.
You don't need to open, read or edit the files. You install them once, and the assistant uses them automatically.
Skills are optional. Playable MCP works without them, but for building pages and design work they make a clear difference.
Which AI tools support skills?
Skills work in Claude: on claude.ai, in the Claude desktop app and in Claude Code.
Other AI tools, such as ChatGPT, can't install skills. You can still use the guidance, though: see Use the skills in other AI tools below.
The Playable skills
We recommend installing all seven. They only load when they're relevant, so having them all doesn't slow anything down.
Skill | What it does | Use it when you ask to… |
Playable Pages | Explains how pages, sections and popovers work, which pages must come before the game, and warns before deleting a page that holds the registration form or the game. | add, restructure, reorder or delete pages and sections |
Playable Add-ons | Knows every setting of the content blocks the assistant can use (headline, text, image, button, countdown, registration form and more), including button click actions and mobile-specific settings. | add a button, text, heading, image or countdown, or style the form |
Playable Styling | Styles a campaign in the right order: campaign-wide theme first, then sections, rows and columns, and individual blocks only for exceptions. Covers colors, backgrounds, overlays, fonts, buttons and color schemes. | change colors, fonts, backgrounds or the overall look |
Playable Media | Checks file types and size limits before uploading, suggests a folder, and follows good practice for logos and transparent images. It also notices images you've shared in the chat and offers to upload them. | upload or find images, logos or fonts |
Playable Spacing | Applies one spacing scale across the whole campaign, keeps side padding identical on every page, and sets margins so blocks don't fall back to Playable's default spacing. | adjust padding, margins or content width while building |
Playable Grid Spacing Review | Audits a finished design: checks all spacing against an 8-pixel grid and against the same kind of pages elsewhere in the campaign. It reports issues as High, Medium or Low, and only fixes them after you approve. | check, review or clean up the spacing of an existing campaign |
Playable Transitions | Adds enter animations to content blocks with sensible defaults: a gentle fade-in, a short stagger, and no more than 3–4 animations per page. | add or review animations |
Spacing or Grid Spacing Review? Use Playable Spacing while you're building. Use Playable Grid Spacing Review afterwards, when you want a report of what's off before anything changes.
Download the skills
You'll find the skills available for download here.
Install the skills in Claude (claude.ai and the desktop app)
Before you start
Skills need Claude's code execution to be turned on.
Free, Pro and Max plans: go to Settings → Capabilities and make sure Code execution and file creation is on.
Team and Enterprise plans: an owner of your Claude organization must turn on Skills and Cloud code execution and file creation under Organization settings → Plugins & skills (on the Policy tab).
Install
Download the skill files above.
In Claude, go to Customize → Skills.
Click +, then Create skill, then Upload a skill.
Select one of the skill files and upload it. If the upload window doesn't accept the file, rename it so it ends in
.zipinstead of.skilland try again.Repeat for each skill.
Check that each skill is switched on in your skills list.
Skills you add on claude.ai are also available in the Claude desktop app when you're signed in with the same account.
For Team and Enterprise owners: you can install the skills once for your whole organization under Organization settings → Plugins & skills. They then appear for every member automatically, so nobody has to upload them.
Install the skills in Claude Code
Unzip each skill file into the skills folder in your home directory, so you end up with, for example, ~/.claude/skills/playable-pages/SKILL.md. Restart Claude Code, and the skills are picked up automatically.
Use the skills in other AI tools
Each skill file is an ordinary zip file with a text file inside.
Rename the file so it ends in
.zipinstead of.skill, and unzip it.Open the
SKILL.mdfile inside with any text editor.Copy its content into your chat, or into the instructions of a project, so the assistant can follow it.
Use a skill
You don't have to do anything special. When your request matches a skill, Claude loads it by itself. You'll usually see a short note in the chat that it's using the skill.
If you want to be sure a particular skill is used, mention it:
Use the Playable Grid Spacing Review skill to check Store Opening Wheel.
Updating the skills
When we improve a skill, we'll publish a new version here. To update, delete the old skill from your skills list and upload the new file.
