design
cognitedata/builder-skills
Aura design system guidance for consistent UI, tokens, and patterns in Flows and Fusion apps.
What is design?
This skill provides decision-level guidance for using Aura as the default UI system in customer-facing applications. It helps you select the right primitives, apply semantic tokens consistently, and implement reliable layout, copy, and state patterns while keeping token usage predictable.
- Choose appropriate Aura primitives for forms, tables, navigation, and data display
- Apply semantic tokens and Aura defaults instead of hardcoded raw values
- Implement consistent layout patterns and responsive designs across pages
- Write concise, action-oriented user-facing copy
- Handle async states, confirmations, and dynamic content reliably
- Ensure accessibility with keyboard support, focus management, and ARIA attributes
How to install design
npx skills add https://github.com/cognitedata/builder-skills --skill design- Latest version of @cognite/aura installed in your project
- Access to Aura Design Guidelines (in node_modules/@cognite/aura/DESIGN.md)
- Familiarity with React or Flows framework
How to use design
- 1.Reference the Aura Design Guidelines in node_modules/@cognite/aura/DESIGN.md when starting UI work
- 2.Check the Aura Storybook for available primitives and their variants
- 3.Consult the Cognite Aura docs site for detailed component documentation
- 4.Select primitives that match your use case before customizing
- 5.Use semantic tokens from Aura instead of hardcoding color, spacing, or typography values
- 6.Test keyboard navigation and focus states for accessibility
Use cases
- Building or migrating interactive UI components in Flows or React applications
- Styling pages with consistent spacing, colors, and typography using Aura tokens
- Creating forms with proper state handling and validation feedback
- Implementing data tables and navigation with Aura components
- Writing and refining user-facing text for clarity and consistency
- Frontend developers building Flows and Fusion apps
- UI/UX engineers implementing Aura-based designs
- Product teams maintaining design consistency across applications
- Developers new to the Aura design system
design FAQ
Use Aura primitives first. Only create custom UI if no primitive fits your need, and document the gap rather than overriding Aura visuals.
Check the DESIGN.md file in node_modules/@cognite/aura, the Storybook at https://master--695bb4b1b8041ae09768950a.chromatic.com, or the docs site at https://docs.cognite.com/aura-design-system/primitives.
Check the component's variants and props first. If still insufficient, document the gap and consult the design system team rather than forcing overrides.
Aura primitives include built-in keyboard support and focus management. Ensure you add proper ARIA attributes, alt text, and heading hierarchy for your content.
No. Always use Aura semantic tokens for colors, spacing, and typography to maintain consistency and simplify future design updates.
Full 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.
Note: Make sure the project is using the latest version of Aura (
@cognite/aura) to access the most up-to-date guidance and components.
Everything you need to know is:
- In the node_modeules/@cognite/aura folder
- Aura Design Guidlines can be found at:
./node_modules/@cognite/aura/DESIGN.md - At the storybook https://master--695bb4b1b8041ae09768950a.chromatic.com/?path=/docs/primitives
- On the docs site https://docs.cognite.com/aura-design-system/primitives
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
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 publicly reachable links — Aura design system docs, Storybook, and Figma.
Related skills
More from cognitedata/builder-skills and the wider catalog.
dm-limits-and-best-practices
Manage CDF Data Modeling API limits, concurrency, pagination, and batching to prevent 429 errors and optimize throughput.
flows-app-brief
Certification coach for Flows apps—capture app brief, value case, and design intent before building.
flows-code-review
Run technical code review for Flows app certification in your local git repository.
flows-design-review
Semi-automated design quality review for Flows apps against 10 official guidelines.
flows-external-app-submit
Final gate for Flows app certification: verify reviews and submit for external approval.
graph-viewer
Embed interactive CDF graph visualizations in Flows apps with nodes, relations, and data model instances.