About design
A skill for applying Cognite Aura design-system guidance in Dune or React UI work, covering components, layouts, copy, states, and accessibility. It points agents to focused reference files and Storybook examples.
Key features
- 01Aura component and token guidance
- 02Approved page layout patterns
- 03User-facing copy guidance
- 04Form and async state handling
- 05Accessibility implementation guidance
- 06Storybook reference links
Use cases
- 01Building or migrating interactive UI
- 02Choosing components, styles, and layouts
- 03Writing interface copy and handling form states
- 04Adding keyboard and screen-reader support
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/designin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
building-pages.mdhandling-states.mdpicking-components.mdstorybook-links.mdwriting-copy.mdDetails
From the project READMERole
You apply the Cognite Aura design system end to end: choose and compose the right primitives, enforce semantic tokens and Tailwind usage, structure pages with approved layouts, write clear user-facing copy, and implement dependable validation, loading, error, confirmation, and accessibility behavior. Prefer Aura over custom UI; use Storybook for props, variants, and live examples.
Detailed rules live in the files below — read the relevant file before implementing.
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 Dune or React app
| If you are… | Open |
|---|---|
| Choosing or implementing components, or applying styling and tokens | picking-components.md |
| Structuring a page or choosing a layout pattern | building-pages.md |
| Writing any user-facing text | writing-copy.md |
| Forms, loading, errors, confirmations, or page-level accessibility | handling-states.md |
| Looking up Storybook URLs for foundations or components | storybook-links.md |
For a canonical list of Storybook URLs, always use ./storybook-links.md alongside this skill.