Agent Skills
Learn how to use Agent Skills to give AI agents deep knowledge of the Serendie Design System.
Last updated 5/14/2026
What are Agent Skills
Agent Skills are a mechanism for giving AI agents specialized knowledge and the ability to perform specific tasks. While MCP servers provide tools, Agent Skills provide guidance on how to use them.
Like MCP, Agent Skills are evolving as an open specification, supported by major coding agents including Claude Code, Codex, Cursor, GitHub Copilot, and Gemini CLI. An ecosystem of skill marketplaces such as skills.sh is also emerging.
skills.sh - The Agent Skills Directory
Available Skills
The Serendie Design System provides the following skill:
- /serendie-overview — A skill that provides an overview of resources such as Serendie UI and Serendie Symbols, setup instructions, and best practices for working with design tokens. This is the first skill to trigger when instructing a coding agent to implement with Serendie UI.
We recommend also setting up the Serendie MCP Server, as it allows AI agents to retrieve more detailed resource information.
Setup
Claude Code
Claude Code supports installation as a Plugin. Since it bundles Agent Skills and MCP Server configuration together, and updates are applied automatically, we recommend installing as a Plugin for Claude Code.
Launch Claude Code and run the following commands in order:
/plugin marketplace add serendie/serendie
/plugin install serendie@serendie
/reload-plugins Codex, Cursor, GitHub Copilot, Gemini CLI, etc.
Using the Agent Skills management tool vercel-labs/skills, you can install Skills in a format compatible with various agents. Run the following command in your terminal:
npx skills add serendie/serendie Figma Make
As of May 2026, Figma Make requires you to upload Skill files individually.
Download the serendie-overview Skill file (Markdown) from GitHub and upload it to Figma Make following the instructions in the Figma Make help page.