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