Agentic AI Resources

This page provides different resources for working with agentic AIs.

Skills

A skill.md is a structured markdown file used to extend the functionality of an AI agent. It allows the agent to perform repetitive tasks following instructions with special knowledge of a specific domain.

Contact us on the #help-designsystem channel if you have any questions about how to use these skills or if you want to request a new skill to be added to the list.

DO NOT use the find-skills skill to search and install skills. Instead, follow the instructions below for each skill.

Here are some of the skills provided by the PIE Design System team that can be used with agentic AIs:

PIE Design System skill (for engineers)

This skill provides AI agents with deep knowledge of PIE component APIs, design tokens, typography, icons, and integration guides to help build apps that adhere to PIE standards.

Installation:

npx skills add git@github.com:justeattakeaway/pie.git --skill pie-design-system

We recommend installing the PIE Design System skill at 'Project', rather than 'Global' level. Doing this means that the skill won't have to regenerate PIE documentation resources, when switching between applications locally.

After installing, ask your AI agent to "set up the PIE design system skill". This runs a bootstrap script that fetches documentation matching your installed PIE package versions.

PIE Design skill (for design outputs)

This skill provides AI agents with knowledge of PIE design assets, including Figma components, design tokens, and prototyping guidelines, to help create visually consistent and accessible designs.

How to use it:

Download the latest version of our pie-design-skill.md file on the #help-designsystem channel in the Agentic AI Resources tab. Upload the file to your AI prototyping tool and ask your AI agent to "use the PIE Design skill as source of truth for design system assets".

Snacks migration skill

This skill is specifically designed to help with the migration of Snacks components to the PIE Design System components and patterns.

Our team is actively working on this skill, updating it to cover more use cases and scenarios. If you have any specific questions or need assistance with the migration process, please don't hesitate to reach out to us on the #help-designsystem channel.

Please follow the instructions in the Snacks repo skill folder README file to use this skill.

Utility skills

These are skills that are not directly related to PIE but can be useful in a variety of contexts.

skill-reviewer

Rules and best-practice guidelines for reviewing an agent skill's SKILL.md, focused on required frontmatter validation and qualitative content review, with a checklist-style report output.

Installation:

npx skills add git@github.com:justeattakeaway/pie.git --skill skill-reviewer

Prototyping resources

Figma Make template

The PIE Figma Make template provides a streamlined, low-code environment for initial explorations.

Other prototyping tools

For prototyping tools that don't support using skills, you can use our guidelines.md file. It is specifically focused on how to leverage PIE assets and logic within advanced prototyping tools and custom code environments. These instructions ensure that your AI-driven components maintain visual and functional parity with the PIE Design System. You can download the latest version of our guidelines file on the #help-designsystem channel in the Agentic AI Resources tab.