用途：该技能为 Just Eat Takeaway 的 PIE 设计系统提供使用指南，适用于构建、修改或调试任何面向用户的 Web UI。
引导流程：每次使用先做引导。检查技能目录下是否存在 .versions 文件；若缺失，先确保安装三个核心包（@justeattakeaway/pie-webc、@justeattakeaway/pie-css、@justeattakeaway/pie-icons-webc），再以消费项目为工作目录运行 scripts/fetch-references.mjs；若存在，则将 .versions 中各项与项目实际安装版本比对，不一致则重跑脚本。设计令牌随 pie-css 作为依赖自带。
主要能力分区：首次集成、项目审查、字体排版、组件查询、框架与集成指南、组件注册与版本、事件、图标、工具类、间距工具类、设计令牌、组件定制。请求跨多个领域时需阅读所有相关小节。项目审查需对排版、组件、注册版本、事件、图标、令牌、定制逐项给出通过/不通过结论。
关键约定：始终使用 pie-css 的排版工具类而非自定义字体样式；查找组件读 components/ 下对应文档，关注属性、插槽、事件、用法示例与 CSS 变量/部件；框架以 package.json 判断，优先元框架（next 优于 react，nuxt 优于 vue），只展示一种框架示例；React 包装器用 className 而非 class。设计令牌仅用 alias 令牌，勿用 global 令牌，且只推荐 tokens/tokensMetadata.json 中真实存在的名称。定制组件先查属性，再用 CSS 变量与 CSS Parts，仍不满足则建议联系团队，未获批准前不要穿透 shadow DOM 样式。
限制：guides/ 内容随项目安装版本而异，缺失的指南对应工具类不可用，须改用令牌；不要编造图标名、令牌名或工具类名，错误名称会静默失效；组件注册冲突不应以 try/catch 或 customElements.get 掩盖。技能的完整文档依赖其自身目录中的参考文件与脚本，具体可用内容以实际安装版本为准。