Quasar Foundation 是一个针对 Vue 3 的 Quasar 设计技能，主要解决应用框架层面的搭建问题：让智能体在需要页头、页脚、响应式侧边抽屉、页面容器、移动端手势等场景时，按既定边界使用 Quasar 组件，而不是用原生 div 加 CSS 重新实现。
用途与定位 该技能适用于定义应用脚手架结构，包括页头、页脚、响应式侧边抽屉与页面容器；适用于触屏优先的移动布局，例如下拉刷新、可滑动标签页、底部操作表；也适用于配置多平台目标构建，如 quasar build -m capacitor 和 quasar build -m tauri。
组件职责范围 资料明确限定 Quasar 仅用于以下原语：布局框架使用 <q-layout>、<q-page-container>、<q-page>，可自动处理视口计算与原生安全区；侧边导航使用 <q-drawer>，内置触摸滑动、响应式断点和迷你模式切换；应用栏使用 <q-header>、<q-footer>、<q-toolbar>，提供粘性定位与阴影处理；移动操作使用 <q-bottom-sheet>、<q-fab>、<q-pull-to-refresh>，使用针对硬件优化的触摸监听。表格、树、选择器、菜单等数据类组件不属于该技能，应改用 PrimeVue 相关技能。
使用方式 安装命令为 npm install quasar @quasar/extras，以及 npm install -D @quasar/vite-plugin。资料提到 Vite 与 main.js 的加载顺序属于混合方案，Quasar 核心 CSS 先加载，且不应让 Quasar 组件替换 PrimeVue 数据组件。使用时应采用 <script setup> 与上述原语，不要用原生 div 粘性定位重建外壳。品牌色来自 --q-primary，由设计令牌桥接到 PrimeVue，不应再以十六进制设置第二套 Quasar 调色板。外壳完成后可再加载动效技能处理进入与按压反馈。若连接了 Quasar MCP 服务器，应先在其上确认组件属性，而不是自行臆造。
限制与边界 该技能不负责数据网格、复杂选择器与菜单，不负责颜色体系与动效实现。资料提示：若单独打开该技能，应先加载 @vue-design-system。任务完成后可按资料提供的脚本建议下一步技能，该脚本位于 .agents/skills/heyeddi/scripts/suggest_next_skill.py，实际执行需结合项目环境。资料未提供版本要求、收费方式、性能指标或具体效果说明，相关事实暂未提供。