メニュー
Component architecture and UI development patterns. Use when building or modifying user-facing interfaces.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/MQjehovah/agent --skill frontend-ui-engineeringコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
月度经营复盘。适用于"XX月经营情况 / 经营分析 / 经营报告 / 月度复盘"类任务。固化已验证可用的批量 SQL 查询集与报告模板，一次并行查完、直接出报告，禁止自由探索数据库。
产品经营分析。分析销售、采购、库存、成本、现金流、生产等业务数据并生成报告。已按数字中台真实数据库校准：明确标注哪些指标数据库能算、哪些无数据源不得编造，每个维度附可用 SQL。
严格 Prove-It 测试驱动开发模式。先写失败测试，证明它失败，再写代码，证明它通过，最后重构。
SOC 職業分類に基づく
SKILL.md を表示中
| name | frontend-ui-engineering |
| description | Component architecture and UI development patterns. Use when building or modifying user-facing interfaces. |
好的 UI 工程 = 可维护的组件架构 + 一致的设计系统 + 正确的状态管理 + 无障碍体验。组件是 UI 的原子单位，设计系统是确保一致性的契约。
构建新页面或新功能界面时
重构现有 UI 组件时
建立或扩建设计系统时
需要确保界面无障碍合规时
NOT for：纯后端功能（没有用户界面）
NOT for：自动化测试脚本的编写
| Rationalization | Reality |
|---|---|
| "这个样式就这一次，不抽 token 了" | 每一个硬编码值都是未来的技术债 |
| "用户不会用键盘操作" | 很多残障用户依赖键盘导航，而且键盘导航通常是 power user 的习惯 |
| "先把功能做出来，UI 重构再说" | 没有组件化的 UI 重构等于重写 |
| "色彩对比度差一点没关系" | 全球约 8% 的男性有色觉障碍，达不到 4.5:1 对比度他们看不清 |