pie-design-system
PIE Design System
PIE (Platform Ingredients for Everyone) is Just Eat Takeaway's design system. It provides 60+ production-ready components as Web Components (@justeattakeaway/pie-webc) with first-class React wrappers. This skill guides you to the right component, correct imports, proper token usage, and framework-specific setup — and cross-references Figma designs when needed.
Step 1: Identify the Right Component
Map the user's UI need to a PIE component name. Use this quick reference:
More from nkootstra/skills
compact-markdown
Compact, compress, or minify markdown files to use fewer tokens while preserving all information and meaning. Use this skill whenever the user wants to reduce the size of a markdown file, shrink a README, compress a SKILL.md or CLAUDE.md, minify documentation, or make any markdown more token-efficient. Trigger even if they just say "make this shorter" or "compress this" on a markdown file.
57code-complexity-audit
>-
51agents-md
Write, audit, and improve agent context files (AGENTS.md, CLAUDE.md) for AI coding agents. Use when creating or improving agent context for a codebase.
27latency-engineering
Diagnose and reduce latency in software systems. Use when dealing with slow APIs, tail latency, p99 spikes, caching, replication, partitioning, concurrency, async I/O, or any question about making systems faster.
25python-best-practices
>
24adversarial-review
>
23