Skip to content

A Fun Way to Learn with Kitty-Explain Skill for Agents

Custom skills in declarative agents are now in public preview 🎉

Kitty explain

I hope you joined The Microsoft 365 Copilot Agent's Playbook | Microsoft Reactor Livecast. If not, it's not too late to catch up, because this article walks you through the demo from the episode 1. Let's explore how the Kitty Explain skill brings a playful, visual twist to learning with agents.

🐱 Kitty Explain Skill

Kitty Explain is a skill that generates a "Kitty Explain" meme-style cat visual explainer that makes complex ideas feel more approachable.

📺 Watch the demo on YouTube

In this demo, the skill is used with the Simple Learn agent, which uses Microsoft Learn documentation to summarize complex topics and explain them in simple language.

Because skills are reusable packages of instructions and resources, you can also use the Kitty Explain skill with other agents whenever it suits the use case. Let's say I have another agent called Explain-to-Me, who explains content from a given URL. This skill works well with the agent.

skill

kitty-explain skill contains a SKILL.md file (instructions in plain markdown, with YAML metadata up top) plus reference folder with cat meme images to be references.

📂 kitty-explain
    ├── 📄 SKILL.md
    └── 📂 references
      ├── 📄 kitty01.png
      ├── 📄 kitty02.png
      └── 📄 ...

💪 How to use the skill in an agent

The skill source code is located in another GitHub repo (so you probably want to open in a new browser tab!):

Basically, all you need to do is just dumping this kitty-explain folder into your agent, and add a few lines to the agent's instruction.

🎨 Add Skill to an agent built with Agent Builder (No-Code)

First, compress the entire kitty-explain folder that include SKILL.md and references to create kitty-explain.zip.

  1. Go to https://m365.cloud.microsoft/ and from the left menu, click Agents and create a new agent.
  2. Choose your agent or create a simple agent that summarizes a given content.
  3. In the agent instruction, include a "Use skill" instruction (See below)
  4. Add a sample prompt under Suggested prompts: Title: "Kitty Explain visual" and Message should be something similar to "Explain [content] by cats.". Make this fit to what the agent does.
  5. Under Skills, upload a zipped kitty-explain skill.
  6. Voilà! Test your agent now!

⚙️ Add Skill to an agent built with M365 Agents Toolkit - Sneak Peak

The feature to add skills will be available in the toolkit when the feature goes GA. So stay tuned!

Here I'm not walking you through how to build a declarative agent using M365 Agents Toolkit, and assuming you know how to built one already!

Make sure you have the latest M365 Agent Toolkit, and create an agent that summarizes given documents, articles, or URLs, and gives clear explanations of the content.

Place the kitty-explain folder that includes SKILL.md and references folder in your declarative agent package.

📂 your-agent
   ├── ai-plugin.json
   ├── color.png
   ├── declarativeAgent.json
   ├── instruction.txt
   ├── manifest.json
   ├── outline.png
   └── 📂 skills/
       └── 📂 kitty-explain/
           ├── 📄 SKILL.md
           └── 📂 references/

In the unified manifest.json, specify the skill path:

"agentSkills": [
    {
      "folder": "skills/kitty-explain"
    }
  ],

In declarativeAgent.json, it's a good idea to add some custom converastion starter. For example,

"conversation_starters": [
    {
      "text": "Explain [concept] in simple language",
      "title": "Explain the technology"
    },
    {
      "text": "Explain [concept] by cats",
      "title": "Kitty Explain visual"
    }
  ],

Then, add the "Use Skill" instruction (see below) in instruction.txt.

📜 "Use Skill" instruction example

You should add this instruction to your agent's instruction.

Either the Agent Builder instruction field, or in the instruction.text if you're using M365 Agents Toolkit, add this extra instruction to have the agent use the skill:

# Use Skills

- **Always run the `kitty-explain` skill** when the user asks for a Kitty Explain visual, says "Explain [...] by cats", "explain by cats", "kitty explain", "explained by cats", "kitten talk", "by cats", or any time asks to use cats, cat-meme, or requests a cat-themed sketchnote/image.
- After running `kitty-explain`, return the skill output as the primary response. Do not replace it with a text-only explanation.
- If the user doesn't ask to explain it with cats, use the guidance above directly.

Modify your agent instruction to make it compatible with the skill if you need.

🥜 Go nuts with skills!

Try creating your own skills! Maybe you can just swap cats to your headshot photos 😆

I hope this gave you a better understanding of how skills work and inspired you to create your own skills for declarative agents.

🐈

📓 Learn More