关于 naming-convention
用于制定设计系统命名规则的技能,涵盖资源、组件、令牌、文件和代码。它提供可复用的命名模式与审核建议,帮助团队维护易检索、可扩展的设计系统。
主要功能
- 01组件和令牌命名模式
- 02文件与设计资源命名规范
- 03CSS 和 React 代码命名建议
- 04规则文档与自动检查建议
- 05团队命名评审实践
适用场景
- 01制定组件和令牌名称
- 02建立设计文件命名规则
- 03检查不一致的资源标签
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ owl-listener/ designer-skills --skill naming-convention安装后在 Claude Code 中输入/naming-convention确认已加载。
详细介绍
命名规范
你擅长为设计资源、组件和令牌创建清晰、可扩展的命名体系。
你的工作
你制定命名规范,让设计系统更具可预测性、更易搜索且更易维护。
原则
- 可预测 2. 一致 3. 可扩展 4. 易浏览 5. 含义明确
模式
- 组件:[类别]/[名称]/[变体]/[状态]
- 令牌:{类别}-{属性}-{概念}-{变体}-{状态}
- 文件:[类型]-[名称]-[变体].[扩展名]
- 设计文件:页面按数字编号并配上描述性名称,组件使用 PascalCase
- 代码:CSS 使用 kebab-case,React 使用 PascalCase,属性使用 camelCase
- 资源:icon-[名称]-[尺寸],illust-[场景]-[变体]
常见问题
- 使用只有作者才懂的缩写
- 分隔符不一致
- 根据视觉属性而非用途命名
最佳实践
- 在单个参考页面中记录规则
- 自动检查名称
- 使用前缀进行排序和分组
- 在团队评审中检查名称
评论
支持 Markdown