Skip to main content

Playable skills: better results for building and design

Playable skills are ready-made guides that teach your AI assistant how Playable campaigns are put together. With the skills installed, the assistant makes fewer mistakes and follows good design practice.

Written by Asta Dybdal

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

  1. Download the skill files above.

  2. In Claude, go to Customize → Skills.

  3. Click +, then Create skill, then Upload a skill.

  4. Select one of the skill files and upload it. If the upload window doesn't accept the file, rename it so it ends in .zip instead of .skill and try again.

  5. Repeat for each skill.

  6. 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.

  1. Rename the file so it ends in .zip instead of .skill, and unzip it.

  2. Open the SKILL.md file inside with any text editor.

  3. 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.

Skill files

Did this answer your question?