关于 platform-frontend
platform-frontend 是一项为前端开发任务提供代码组织、状态管理和性能优化指导的技能。它强调按功能组织代码、优先使用本地状态,并依据实际测量决定是否优化。
主要功能
- 01优先使用本地状态
- 02按功能组织代码
- 03使用命名导出
- 04避免 barrel 文件
- 05先测量再做性能优化
适用场景
- 01规划 Web 应用的状态边界
- 02选择数据获取模式
- 03组织前端代码结构
- 04评估是否需要性能优化
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ ravnhq/ ai-toolkit --skill platform-frontend安装后在 Claude Code 中输入/platform-frontend确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
rules/_sections.mdcomponent-composition.mdcomponent-single-responsibility.mdcomponent-use-link.mddata-loading-states.mdorg-no-barrel-files.mdstate-server-vs-client.md详细介绍
原则
- 从本地状态开始——仅在需要共享时才提升状态
- 按功能而非类型组织代码
- 使用命名导出,以便更好地重构和搜索
- 切勿使用汇总文件(
index.ts重新导出)——它们会破坏摇树优化并拖慢构建 - 先衡量再进行记忆化——不要优化运行速度并不慢的部分
规则
详细模式请参阅规则索引。
示例
正向触发
用户:“为这个 Web 应用选择状态边界和数据获取模式。”
预期行为:使用 platform-frontend 指南,遵循其工作流,并提供可执行的输出。
不触发
用户:“编写一个 Swift actor,实现线程安全的缓存访问。”
预期行为:不要优先使用 platform-frontend;选择更相关的技能,或不使用技能直接处理。
故障排除
技能未触发
- 错误:未按预期选择该技能。
- 原因:请求措辞与描述中的触发条件不够匹配。
- 解决方案:使用描述中的明确领域/任务关键词重新表述,然后重试。
指南与其他技能冲突
- 错误:同一任务中的多项技能指令相互冲突。
- 原因:已加载技能的适用范围重叠。
- 解决方案:说明当前步骤以哪项技能为准,并优先应用其工作流。
输出过于笼统
- 错误:结果缺少具体、可执行的细节。
- 原因:任务输入未提供上下文、约束或目标格式。
- 解决方案:补充具体约束(环境、范围、格式、成功标准),然后重新运行。
工作流
- 判断请求是否明确符合
platform-frontend的适用范围和触发条件。 - 应用技能规则及引用的指南,生成具体结果。
- 根据约束检查输出质量;若仍有不足,使用明确假设再完善一次。
评论
支持 Markdown