skills.rest
justeattakeaway
justeattakeawayOFFICIAL
Explore all skills by this author →
WebsiteGitHub

pie-design-system

Provide PIE design system guidelines for components, design tokens, and integration.

40|21|Updated Jun 7, 2022
Search Tags:#design system#frontend development#ui components#web components#css tokens#just eat takeaway
One-click install
npx skills add https://github.com/justeattakeaway/pie --skill pie-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pie-design-system
Source: https://github.com/justeattakeaway/pie/tree/main/.agents/skills/pie-design-system
Command: npx skills add https://github.com/justeattakeaway/pie --skill pie-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

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.

Frequently Asked Questions about pie-design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use PIE design system web components in a frontend project?▼

To use PIE design system web components, integrate the provided web components into your frontend project and apply the associated CSS tokens for consistent UI development. This Skill provides detailed guidelines on component properties, slots, and events for proper integration.

What are design tokens and how do I apply them for UI components?▼

Design tokens are predefined variables for colors, spacing, and typography that ensure visual consistency across UI components. You apply them by referencing the PIE design system's CSS tokens during frontend development to maintain standardized styling.

How do I find the correct properties and events for a pie-button component?▼

You find the correct properties and events for a pie-button component by using this Skill to look up its specific component documentation. It provides comprehensive guidance on available props like variant or size, alongside detailed instructions on component customization and events.

Can I customize Just Eat Takeaway web components to fit my application's needs?▼

Yes, you can customize Just Eat Takeaway web components by following the integration and customization steps provided. The PIE design system facilitates this by offering detailed instructions on component customization, ensuring adherence to brand guidelines while fitting your project.

Does the PIE design system provide guidelines for typography and CSS tokens?▼

Yes, the PIE design system provides comprehensive guidelines for typography and CSS tokens. It ensures adherence to design standards through detailed instructions on how to leverage these tokens for colors and spacing in your UI components.

Related Skills

Explore More Software Engineering Skills→
veerababumanyamveerababumanyam

frontend-design

Generate production-grade frontend interfaces with design-system tokens and reusable components.

Community
Basic
ProjectEuropaProjectEuropa
4

frontend-design

Design and implement accessible Next.js, React, and TailwindCSS frontend interfaces with design-system workflows.

Community
Advanced
RaNDoM6913RaNDoM6913
1

design-system-reviewer

Analyze frontend components for design system token compliance and hardcoded values.

Community
Advanced
erikstmartinerikstmartin
16

tailwind-design-system

Implement a Tailwind v4 design system with semantic tokens and CVA components.

Community
Advanced