How to install design
npx skills add https://github.com/cognitedata/builder-skills --skill designFull instructions (SKILL.md)
Source of truth, from cognitedata/builder-skills.
name: design description: Simplified Aura guidance for selecting primitives, keeping token usage consistent, and applying reliable layout/copy/state patterns in Flows and Fusion apps. allowed-tools: Read, Glob, Grep, Edit, Write
Role
Use Aura as the default UI system for customer-facing product work. Prefer decision-level guidance over exhaustive rules:
- choose the right primitive first,
- apply semantic tokens (no raw values),
- keep layouts and UX states consistent,
- write concise, action-oriented copy.
Use Storybook for component APIs and exact props. Use this skill for "what to choose and when."
Aura Design Guidlines can be found at: ./node_modules/@cognite/aura/DESIGN.md
Consult this skill whenever you are:
- Creating or migrating interactive UI, forms, tables, navigation, or data display
- Writing or modifying styles, colors, spacing, or typography
- Choosing components, tokens, or layout patterns
- Creating or restructuring pages and responsive layouts
- Writing or editing any user-facing text
- Building forms, handling API responses, async actions, confirmations, or dynamic content
- Implementing accessibility (keyboard, focus, headings, ARIA, alt text)
- Applying Aura correctly in a Flows or React app
| If you are… | Open |
|---|---|
| Choosing primitives and deciding what to use when | primitive-usage.md |
| Where to look for Storybook, docs, and Figma (router) | picking-components.md |
| Structuring a page or choosing a layout pattern | building-pages.md |
| Writing any user-facing text | Content guidelines in ./node_modules/@cognite/aura/DESIGN.md |
| Forms, loading, errors, confirmations, or page-level accessibility | handling-states.md |
| Looking up Storybook URLs for foundations or components | storybook-links.md |
Operating principles
- Use Aura primitives before custom UI.
- Follow foundations through semantic tokens and Aura defaults; do not hardcode raw values.
- If a primitive almost fits, do not override visuals to force it; check variants/props first, then document the gap.
- Keep behavior predictable and accessible: keyboard support, visible focus, and clear feedback for loading/success/error.
- Use
storybook-links.mdfor canonical component/foundation URLs. - Use publicly reachable links — Aura design system docs (Mintlify), Fusion preview Storybook, and Figma as documented in
primitive-usage.mdandpicking-components.md.
Related skills
More from cognitedata/builder-skills and the wider catalog.
skill-creator
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch for Claude Code or Cursor, update or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
code-quality
MUST be used whenever reviewing a Flows app for code quality, maintainability, or clean code issues — before a PR review, after a feature is complete, or when the user asks for a code review. Do NOT skip linting steps. Triggers: code quality, code review, clean code, refactor, maintainability, technical debt, any type, naming, dead code, duplication, DRY, single responsibility, component size, lint, linting, TypeScript strict, dependency injection, file structure.
dependencies-audit
MUST be used whenever fixing dependency issues in a Flows app. This skill finds AND fixes vulnerabilities, outdated packages, deprecated dependencies, and license issues — it does not just report them. Triggers: dependencies, packages, fix dependencies, update packages, fix vulnerabilities, npm audit fix, pnpm audit fix, CVE fix, outdated, deprecated, supply chain, license.
reveal-3d
Integrates a local Cognite Reveal 3D CAD viewer bundle into Flows apps by copying app-local source code. Use when adding 3D viewer, 3D visualization, Reveal, CAD model, RevealProvider, RevealCanvas, Reveal3DResources, FDM 3D mapping, asset 3D model, model browser, or Cognite 3D content to a Flows application.
test-coverage
MUST be used whenever fixing test coverage for a Flows app to meet the 80% line coverage hard gate. This skill finds AND fixes coverage gaps — it configures tooling, writes missing tests, covers untested paths, and refactors code for testability. It does not just report. Triggers: test coverage, fix tests, write tests, add tests, coverage fix, 80% coverage, coverage gate, missing tests, testability, vitest coverage, jest coverage.
integrate-todo-list
MUST be used whenever adding a task/todo list feature to a Flows app with Atlas chat. Do NOT manually create todo state management or tool definitions — this skill handles the full module (context, provider, tool, hooks, UI components) and all integration wiring. Prerequisite: integrate-atlas-chat must already be set up. Triggers: todo list, task list, task tracking, TodoWrite, todo panel, task panel, progress tracking, add todos, add tasks.