メニュー
前端开发 / Frontend development. Builds pages and components from project scaffold. Use when the project is initialized and the user wants to build the UI.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/lennney/gate-all-skills --skill gate-frontendコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
"AI 审查 / AI code review. 用户说"帮我审查代码"、"review 一下"、"看看这段有没有问题"时加载。在后台检查 bug、安全、性能、代码风格，然后告诉用户结果。"
"AI 编码 / AI coding. 用户说"帮我写个组件"、"实现这个功能"、"写个 API 路由"时加载。先问清需求，在后台实现，完成后自动调 /ai-code-review 审查。"
"AI 调试 / AI debugging. 用户说"帮我 debug"、"报错了"、"这个 bug 怎么修"、"抛异常了"时加载。让用户描述问题，你在后台分析根因并修复。"
SOC 職業分類に基づく
| name | gate-frontend |
| description | 前端开发 / Frontend development. Builds pages and components from project scaffold. Use when the project is initialized and the user wants to build the UI. |
| trigger | 项目已初始化，需要开发前端 |
| input | 项目脚手架 |
| output | 前端页面和组件 |
| next | gate-seo |
| dependencies | gate-init |
问用户："首页你想放什么？"
等用户描述完，你在后台建页面。每完成一部分用大白话解释：
建页面时： "我建了一个首页，结构是：大标题区（展示你的产品名和一句话介绍）→ 功能介绍区 → 底部引导区。这样用户从上往下看，自然会被引导去行动。"
写组件时： "每个功能块我拆成了独立组件，以后想换位置或者改样式，改一个地方就行，不会影响其他地方。"
上样式时： "用的 Tailwind 做样式，手机和电脑上显示效果都 OK，自动适配。"
加动效时： "加了滚动渐入效果，用户往下翻的时候内容会平滑出现，不会那么生硬。"
每做完一页让用户预览确认。全做完了说："页面都好了，下一步配搜索引擎，这样用户能在 Google 搜到你的网站。" → /gate-seo