mcpField
P
platform-frontend

platform-frontend

github.com/ravnhq开发1640 次安装21 周前更新
代码仓库

关于 platform-frontend

platform-frontend 是一项为前端开发任务提供代码组织、状态管理和性能优化指导的技能。它强调按功能组织代码、优先使用本地状态,并依据实际测量决定是否优化。

主要功能

  1. 01优先使用本地状态
  2. 02按功能组织代码
  3. 03使用命名导出
  4. 04避免 barrel 文件
  5. 05先测量再做性能优化

适用场景

  1. 01规划 Web 应用的状态边界
  2. 02选择数据获取模式
  3. 03组织前端代码结构
  4. 04评估是否需要性能优化

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/ravnhq/ai-toolkit --skill platform-frontend

安装后在 Claude Code 中输入/platform-frontend确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

rules/
_sections.md
component-composition.md
component-single-responsibility.md
component-use-link.md
data-loading-states.md
org-no-barrel-files.md
state-server-vs-client.md

详细介绍

原则

  • 从本地状态开始——仅在需要共享时才提升状态
  • 按功能而非类型组织代码
  • 使用命名导出,以便更好地重构和搜索
  • 切勿使用汇总文件(index.ts 重新导出)——它们会破坏摇树优化并拖慢构建
  • 先衡量再进行记忆化——不要优化运行速度并不慢的部分

规则

详细模式请参阅规则索引。

示例

正向触发

用户:“为这个 Web 应用选择状态边界和数据获取模式。”

预期行为:使用 platform-frontend 指南,遵循其工作流,并提供可执行的输出。

不触发

用户:“编写一个 Swift actor,实现线程安全的缓存访问。”

预期行为:不要优先使用 platform-frontend;选择更相关的技能,或不使用技能直接处理。

故障排除

技能未触发
  • 错误:未按预期选择该技能。
  • 原因:请求措辞与描述中的触发条件不够匹配。
  • 解决方案:使用描述中的明确领域/任务关键词重新表述,然后重试。
指南与其他技能冲突
  • 错误:同一任务中的多项技能指令相互冲突。
  • 原因:已加载技能的适用范围重叠。
  • 解决方案:说明当前步骤以哪项技能为准,并优先应用其工作流。
输出过于笼统
  • 错误:结果缺少具体、可执行的细节。
  • 原因:任务输入未提供上下文、约束或目标格式。
  • 解决方案:补充具体约束(环境、范围、格式、成功标准),然后重新运行。

工作流

  1. 判断请求是否明确符合 platform-frontend 的适用范围和触发条件。
  2. 应用技能规则及引用的指南,生成具体结果。
  3. 根据约束检查输出质量;若仍有不足,使用明确假设再完善一次。

评论

支持 Markdown