mcpField
D
design

design

github.com/cognitedata设计与 UI341 次安装
代码仓库

关于 design

用于在 Dune 或 React 界面开发中落实 Cognite Aura 设计系统的技能,涵盖组件、布局、文案、状态和无障碍设计,并指向分主题参考文件与 Storybook 示例。

主要功能

  1. 01Aura 组件与令牌指引
  2. 02获批页面布局模式
  3. 03面向用户的文案指引
  4. 04表单与异步状态处理
  5. 05无障碍实现指导
  6. 06Storybook 参考链接

适用场景

  1. 01创建或迁移交互界面
  2. 02选择组件、样式与布局
  3. 03编写界面文案并处理表单状态
  4. 04添加键盘与屏幕阅读器支持

安装

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

$npx skills add https://github.com/cognitedata/dune-skills --skill design

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

包含的文件

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

building-pages.md
handling-states.md
picking-components.md
storybook-links.md
writing-copy.md

详细介绍

角色

端到端应用 Cognite Aura 设计系统:选择并组合合适的基础组件,确保使用语义化令牌和 Tailwind,使用已批准的布局构建页面,撰写清晰的面向用户的文案,并实现可靠的验证、加载、错误、确认和无障碍行为。优先使用 Aura,而非自定义 UI;使用 Storybook 查看属性、变体和实时示例。

详细规则见下方文件——实施前请阅读相关文件。

在以下情况下,请参考此技能:

  • 创建或迁移交互式 UI、表单、表格、导航或数据展示
  • 编写或修改样式、颜色、间距或排版
  • 选择组件、令牌或布局模式
  • 创建或重构页面和响应式布局
  • 编写或编辑任何面向用户的文本
  • 构建表单、处理 API 响应、异步操作、确认或动态内容
  • 实现无障碍功能(键盘、焦点、标题、ARIA、替代文本)
  • 在 Dune 或 React 应用中正确应用 Aura
如果你要……打开
选择或实现组件,或应用样式和令牌picking-components.md
构建页面结构或选择布局模式building-pages.md
编写任何面向用户的文本writing-copy.md
处理表单、加载、错误、确认或页面级无障碍handling-states.md
查找基础组件或组件的 Storybook URLstorybook-links.md

如需查看 Storybook URL 的权威列表,请始终将 ./storybook-links.md 与此技能配合使用。

评论

支持 Markdown