design · cognitedata — Claude Code skill: what it does, how to install
Provides Aura design system rules for Flows and Fusion applications. It guides agents to choose primitives, rely on semantic tokens, and maintain consistent UI states.
npx skills add cognitedata/builder-skills --skill design -a claude-codeWhat design does
This skill guides coding agents through product UI work with the Aura design system. Instead of generating custom markup from scratch, the agent selects existing library primitives. It enforces semantic design tokens. Hardcoded hex codes or arbitrary spacing stay out of the codebase.
Guidelines are read directly from ./node_modules/@cognite/aura/DESIGN.md or external documentation such as Storybook. When a primitive does not match visual mockups exactly, the skill tells the assistant to review available component props rather than writing brittle CSS overrides.
Without the @cognite/aura package installed in the project, the agent cannot access local design guidelines. The skill also enforces accessibility requirements, including visible focus rings and explicit error feedback.
What it helps with
- select appropriate Aura primitives before writing custom elements
- replace hardcoded CSS values with semantic tokens
- handle async feedback, loading spinners, and error alerts
- ensure keyboard navigation and visible focus rings meet accessibility standards
Example prompts for the agent
- Build a data display view for a Fusion app using Aura primitives
- Audit this form component and replace raw color values with Aura tokens
- Add keyboard accessibility and visible focus states to the navigation menu
How to install design
1Skills CLI (Vercel)
npx skills add cognitedata/builder-skills --skill design -a claude-code2Manually: put the files in place
~/.claude/skills/design/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/design/
1Skills CLI (Vercel)
npx skills add cognitedata/builder-skills --skill design -a codex2Manually: put the files in place
.agents/skills/design/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add cognitedata/builder-skills --skill design -a cursor2Manually: put the files in place
.cursor/skills/design/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install cognitedata/builder-skills design2Manually: put the files in place
.github/skills/design/SKILL.md1Skills CLI (Vercel)
npx skills add cognitedata/builder-skills --skill design -a gemini-cli2Platform CLI
gemini skills install https://github.com/cognitedata/builder-skills --path skills/designManually: put the files in place
.devin/skills/design/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add cognitedata/builder-skills --skill design -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about design
How to install design in Claude Code?
Run npx skills add cognitedata/builder-skills --skill design -a claude-code. The configuration file will be placed at ~/.claude/skills/design/SKILL.md.
What does the design skill do?
It directs the agent to build interfaces using Aura primitives, follow token rules, and apply consistent layout and accessibility patterns.
What dependencies does the design skill require?
The repository needs the @cognite/aura package installed, because the skill reads component guidelines from ./node_modules/@cognite/aura/DESIGN.md.
Source text
SKILL.md · Apache-2.0
--- 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 <when-to-reference> 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 </when-to-reference> ## Operating principles 1. Use Aura primitives before custom UI. 2. Follow foundations through semantic tokens and Aura defaults; do not hardcode raw values. 3. If a primitive almost fits, do not override visuals to force it; check variants/props first, then document the gap. 4. Keep behavior predictable and accessible: keyboard support, visible focus, and clear feedback for loading/success/error. 5. Use publicly reachable links — Aura design system docs, Storybook, and Figma.
© cognitedata · Apache-2.0 · cognitedata/builder-skills
Similar skills
All skills for Frontend and UI →design by other authors comes first.
