Serendie Design System

AboutGet StartedAIFoundationsComponents
© Mitsubishi Electric Corporation

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.