Skills
.Work. You
Rest

pie-design-system

Official

PIE Design System Usage

Software Engineering#design system#frontend development#ui components#web components#css tokens#just eat takeaway
Authorjusteattakeaway
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides guidance and resources for effectively using the PIE (Principles for Interfaces and Experiences) design system by Just Eat Takeaway, ensuring consistent and high-quality UI development.

Core Features & Use Cases

  • Component Guidance: Detailed information on using individual PIE components, including properties, slots, and events.
  • Design Token Management: Instructions on how to leverage PIE's design tokens for colors, spacing, and typography.
  • Integration & Customization: Steps for integrating PIE into new projects and customizing components.
  • Use Case: A developer needs to add a new button to a web application that adheres to Just Eat Takeaway's brand guidelines. They would use this Skill to find the correct pie-button component, understand its available props (like variant or size), and apply the appropriate design tokens for colors and spacing.

Quick Start

Use the pie-design-system skill to look up the properties for the pie-button component.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: pie-design-system
Download link: https://github.com/justeattakeaway/pie/archive/main.zip#pie-design-system

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.