MrleeAdmin/.windsurf/skills/frontend-web-layout/SKILL.md

name, description, globs

name	description	globs
frontend-web-layout	Web 前台布局规范（Nuxt 4），布局文件组织与使用	frontend/web/app/layouts/**/*.vue

布局文件

布局	文件	说明
default	layouts/default.vue	默认布局（含 header/footer）
blank	layouts/blank.vue	空白布局
container	layouts/container.vue	容器布局
member	layouts/member.vue	会员中心布局

代码模板

<template>
  <div>
    <Header />
    <slot />
    <Footer />
  </div>
</template>

关键约定

• Nuxt 自动加载 layouts/ 目录下的布局文件
• 页面通过 definePageMeta({ layout: 'name' }) 指定布局
• 默认布局为 default.vue
• 布局中可使用 <slot /> 嵌入页面内容

检查清单

• 布局文件是否放在 layouts/ 目录
• 页面是否指定了正确的布局
• 布局中是否包含必要的公共元素