メニュー
优化 Vue 页面，用 Fantastic-mobile 框架内建组件（src/ui/components/）替换自定义实现和原生 HTML。当用户说：'帮我优化这个页面'、'把这些原生 HTML 换成框架组件'、'用 FmCard/FmModal/FmButton 重构一下'、'这个页面太乱了'、'统一一下 UI 风格'、'用内建组件替换自定义弹窗/加载'，即使用户只是说'看看这个页面能不能改进'也应触发此技能。
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SOC 職業分類に基づく
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/fantastic-mobile/basic --skill fm-page-optimizerコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
管理和配置 Fantastic-mobile 框架设置。当用户提到以下任何需求时必须使用此技能：开启/关闭权限功能、哀悼模式；切换暗色/亮色/跟随系统颜色方案、调整圆角、启用色弱模式；配置顶部导航栏（navbar）启用状态；配置底部标签栏（tabbar）启用状态和导航菜单列表；调整进度条、返回顶部；设置底部版权信息；以及任何涉及 apps/*/src/settings/index.ts 的修改。
为 Fantastic-mobile 框架生成 Pinia Store 模块。当用户提到以下任何需求时必须使用此技能：多个页面需要共享数据、全局状态管理、数据需要持久化（刷新后还在）、登录状态/用户信息需要缓存、购物车/通知/权限等全局数据、需要在组件外访问状态。即使用户只是说"这个数据要全局共享"或"刷新后数据不能丢"，也应触发此技能。触发关键词：创建 store、全局状态、状态管理、pinia、持久化、共享数据。
为 Fantastic-mobile 框架创建和定制主题配色方案，始终同时生成明色（light）和暗色（dark）两套主题。当用户提到以下任何需求时必须使用此技能：换主题颜色、换配色、做一个 XX 风格的主题、主题太单调了、品牌色是 XXX 帮我生成主题、把 tweakcn 配色转成框架主题、想要暗色/冷色/暖色调、根据设计稿颜色生成主题。即使用户只是描述一种感觉（"清新"、"沉稳"、"科技感"）或提供一个颜色值（"#2563EB"），也应触发此技能。支持"吉卜力"、"赛博朋克"、"莫兰迪"、"北欧极简"等专业设计风格关键词。
| name | fm-page-optimizer |
| description | 优化 Vue 页面，用 Fantastic-mobile 框架内建组件（src/ui/components/）替换自定义实现和原生 HTML。当用户说：'帮我优化这个页面'、'把这些原生 HTML 换成框架组件'、'用 FmCard/FmModal/FmButton 重构一下'、'这个页面太乱了'、'统一一下 UI 风格'、'用内建组件替换自定义弹窗/加载'，即使用户只是说'看看这个页面能不能改进'也应触发此技能。 |
利用 Fantastic-mobile 的内建组件优化 Vue 页面，用框架组件替换自定义实现，减少重复代码，保持 UI 一致性。
本项目是 monorepo 架构。在执行任何文件读写操作之前，必须先确认目标应用：
ls apps/ 列出所有可用应用严格规则：如果用户没有在请求中明确说明目标应用（例如"在 example 应用中"、"apps/core"），则必须提问，不得自行猜测或默认选择任何应用。
后续所有文件路径以 apps/<app>/ 为根，其中 <app> 为用户确认的应用名称。
读取目标页面，找出三类可优化点：
<button>、<input>、<select>、自定义卡片 div 等先查组件目录确认有哪些可用组件：
Read: references/components-catalog.md
确定组件后，读取对应 README 了解完整 API（props、slots、events）：
Read: apps/<app>/src/ui/components/Fm[ComponentName]/README.md
README 是最权威的用法来源，不确定时优先看文档而不是猜。
如果不确定如何替换，查看前后对比示例：
Read: references/optimization-patterns.md
替换时保留所有原始功能，不要改变业务逻辑。框架组件提供组合式函数用于编程式控制，优先使用：
useFmModal() — 编程式打开/关闭弹窗、confirm 确认框fmToast — 显示成功/错误提示（从 @/ui/components/FmToast 导入）useFmLoading() — 控制加载遮罩组件可以组合使用，例如：
<FmCard title="用户列表">
<FmButton @click="handleAdd">新增</FmButton>
</FmCard>
替换后确认导入路径正确（@/ui/components/Fm[ComponentName]），props 和 v-model 绑定符合组件 API。如有问题，回到组件 README 核对。