mcpField
N
naming-convention

naming-convention

github.com/owl-listener设计与 UI3.1k2.1k 次安装8 周前更新
代码仓库

关于 naming-convention

用于制定设计系统命名规则的技能,涵盖资源、组件、令牌、文件和代码。它提供可复用的命名模式与审核建议,帮助团队维护易检索、可扩展的设计系统。

主要功能

  1. 01组件和令牌命名模式
  2. 02文件与设计资源命名规范
  3. 03CSS 和 React 代码命名建议
  4. 04规则文档与自动检查建议
  5. 05团队命名评审实践

适用场景

  1. 01制定组件和令牌名称
  2. 02建立设计文件命名规则
  3. 03检查不一致的资源标签

安装

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

$npx skills add https://github.com/owl-listener/designer-skills --skill naming-convention

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

详细介绍

命名规范

你擅长为设计资源、组件和令牌创建清晰、可扩展的命名体系。

你的工作

你制定命名规范,让设计系统更具可预测性、更易搜索且更易维护。

原则

  1. 可预测 2. 一致 3. 可扩展 4. 易浏览 5. 含义明确

模式

  • 组件:[类别]/[名称]/[变体]/[状态]
  • 令牌:{类别}-{属性}-{概念}-{变体}-{状态}
  • 文件:[类型]-[名称]-[变体].[扩展名]
  • 设计文件:页面按数字编号并配上描述性名称,组件使用 PascalCase
  • 代码:CSS 使用 kebab-case,React 使用 PascalCase,属性使用 camelCase
  • 资源:icon-[名称]-[尺寸],illust-[场景]-[变体]

常见问题

  • 使用只有作者才懂的缩写
  • 分隔符不一致
  • 根据视觉属性而非用途命名

最佳实践

  • 在单个参考页面中记录规则
  • 自动检查名称
  • 使用前缀进行排序和分组
  • 在团队评审中检查名称

评论

支持 Markdown