design
Unified Aura design guidance — components and tokens, page layouts, UX copy, forms and async feedback, and accessibility. Use when building or styling customer-facing UI, structuring pages, writing interface text, or implementing validation, loading, errors, and a11y.
- Installs
- 341
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/cognitedata/dune-skills --skill design- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads design automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Role
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.
<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 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.
FAQ
What does the design skill do?
Unified Aura design guidance — components and tokens, page layouts, UX copy, forms and async feedback, and accessibility. Use when building or styling customer-facing UI, structuring pages, writing interface text, or implementing validation, loading, errors, and a11y.
How do I install design?
Run npx skills add https://github.com/cognitedata/dune-skills --skill design in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/design/ (personal) or .claude/skills/design/ (project).
Which AI agents can use design?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is design safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains design?
It is published by cognitedata in cognitedata/dune-skills. It has 341 recorded installs.
More from cognitedata/dune-skills
code-quality
cognitedata/dune-skills
MUST be used whenever reviewing a Dune 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.
skill-creator
cognitedata/dune-skills
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.
create-client-tool
cognitedata/dune-skills
MUST be used whenever creating an AtlasTool (client-side tool) for an Atlas agent. Do NOT manually write AtlasTool definitions or wire them into useAtlasChat — this skill handles the TypeBox schema, execute function, and hook wiring. This includes tools that fetch data, render UI, call APIs, show charts, query local state, or perform any browser-side action. Triggers: AtlasTool, client tool, add tool, create tool, new tool, tool definition, agent tool.
integrate-atlas-chat
cognitedata/dune-skills
Open the skill to read its SKILL.md instructions.
dune-app-review
cognitedata/dune-skills
Open the skill to read its SKILL.md instructions.
performance
cognitedata/dune-skills
Open the skill to read its SKILL.md instructions.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.