About design
design is a skill that guides customer-facing UI work with the Aura design system. It helps teams choose primitives, use semantic tokens, maintain predictable accessible states, and write concise interface copy.
Key features
- 01Guidance for Aura primitives and tokens
- 02Consistent layout and interaction states
- 03Accessibility guidance for UI behavior
- 04Concise, action-oriented interface copy
- 05References to Aura docs and Storybook
Use cases
- 01Creating or migrating forms, tables, and navigation
- 02Styling pages with Aura components and tokens
- 03Designing loading, success, and error feedback
- 04Reviewing keyboard and focus accessibility
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/designin Claude Code to confirm it loaded.
Details
From the project READMERole
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.
Comments
Markdown supported