Design
Implement customer-facing pages with Aura-approved Tailwind layout patterns and Storybook-backed structure.
Overview
Design is an agent skill for the Build phase that structures customer-facing pages using Aura Tailwind layouts and official Storybook layout foundations.
Install
npx skills add https://github.com/cognitedata/builder-skills --skill designWhat is this skill?
- Every customer-facing page must use an approved Aura layout pattern
- Tailwind flex/grid with Aura spacing tokens; sidebar uses bg-sidebar and related tokens
- Storybook foundations: breakpoints, container queries, column spans, compositions, sidebar-left, card grid
- Cross-reference table maps each layout story to official Cognite Aura Storybook URLs
- Role framing: consistency across apps is mandatory, not optional styling
- Six named Storybook layout stories in the cross-reference table (breakpoints, container queries, column spans, compositi
Adoption & trust: 1k installs on skills.sh; 4 GitHub stars; 3/3 security scanners passed (skills.sh audits); trending (+100% hot-view momentum).
What problem does it solve?
Your agent keeps inventing one-off page layouts that break cross-app consistency and ignore Aura’s documented patterns.
Who is it for?
Teams building on Cognite Aura who want agents to mirror Storybook layout docs on every new screen.
Skip if: Greenfield brands with no Aura dependency, backend-only APIs, or marketing landing pages outside the Aura app shell.
When should I use this skill?
Structuring pages and layouts for a customer-facing Aura application.
What do I get? / Deliverables
Pages follow approved Aura layout recipes with Storybook-aligned breakpoints, sidebars, and grids ready for component implementation.
- Page/layout structure matching an approved Aura pattern
- Storybook story references cited for breakpoints and composition
Recommended Skills
Journey fit
Canonical shelf is build/frontend because the skill governs page and layout composition for apps using the Aura design system. Frontend subphase is where layout primitives, sidebars, grids, and breakpoints become shipping UI—not research or launch distribution work.
How it compares
Use instead of generic “make it look modern” prompts; this is a design-system layout skill tied to Aura Storybook, not a Figma-to-code plugin.
Common Questions / FAQ
Who is design for?
Frontend-focused solo builders and indie teams shipping customer apps on the Aura + Tailwind stack with Claude, Cursor, or similar agents.
When should I use design?
During build/frontend whenever you add pages, sidebars, or responsive grids that must match Aura foundations documentation.
Is design safe to install?
It is documentation-forward layout guidance; review the Security Audits panel on this Prism page for the cognitedata/builder-skills package.
SKILL.md
READMESKILL.md - Design
# Building pages and layouts ## Role You are structuring pages for a customer-facing application. Consistent layouts across apps are essential. Every page must use an approved pattern. The Aura system uses Tailwind CSS for layout. All layouts use Tailwind flex/grid utilities with Aura spacing tokens. The sidebar component uses Aura's sidebar tokens (bg-sidebar, text-sidebar-foreground, etc.). For all Storybook URLs, see `./storybook-links.md`. <storybook-foundation> Source of truth for layout foundations: https://cognitedata.github.io/aura/storybook/?path=/docs/foundations-layout--docs Cross-reference these Storybook stories when implementing any layout pattern (full URLs): | Story | URL | Use for | |-------|-----|---------| | Breakpoints | https://cognitedata.github.io/aura/storybook/?path=/story/foundations-layout--breakpoints | Official breakpoint values | | Container Queries | https://cognitedata.github.io/aura/storybook/?path=/story/foundations-layout--container-queries | Responsive within components | | Column Spans | https://cognitedata.github.io/aura/storybook/?path=/story/foundations-layout--column-spans | 2-col, 3-col, asymmetric splits | | Layout Compositions | https://cognitedata.github.io/aura/storybook/?path=/story/foundations-layout--compositions | Combining layout parts | | Sidebar Left | https://cognitedata.github.io/aura/storybook/?path=/story/foundations-layout--sidebar-left-layout | Sidebar implementation | | Card Grid | https://cognitedata.github.io/aura/storybook/?path=/story/foundations-layout--card-grid-layout | Card grid layout | | Dashboard | https://cognitedata.github.io/aura/storybook/?path=/story/foundations-layout--dashboard-layout | Dashboard with metrics | | Comprehensive Dashboard | https://cognitedata.github.io/aura/storybook/?path=/story/foundations-layout--comprehensive-dashboard | Full dashboard | | Grid Patterns | https://cognitedata.github.io/aura/storybook/?path=/story/foundations-layout--grid-patterns-reference | Grid configuration catalog | | Code Examples | https://cognitedata.github.io/aura/storybook/?path=/story/foundations-layout--code-examples | Copy-paste Tailwind code | Base: https://cognitedata.github.io/aura/storybook/ </storybook-foundation> <foundations> Standard layout primitives used across all patterns: CONTENT MAX-WIDTHS: - max-w-7xl — dashboards, full-width layouts - max-w-4xl — detail pages - max-w-2xl — forms, wizard step content - max-w-sm — search inputs, narrow controls SECTION SPACING: - space-y-8 — between major page sections (e.g. form groups) - space-y-6 — between sections within a page - space-y-4 — between items within a section - space-y-2 — between label and field, tight groupings GRID GAPS: - gap-6 — dashboard grids, chart grids, panel gaps - gap-4 — card grids, metric grids - gap-3 — toolbar items, button groups PAGE PADDING: - px-6 py-8 — standard content area (desktop) - px-4 py-6 — mobile content area - p-4 — card/panel internal padding - p-6 — larger card internal padding </foundations> <sidebar-tokens> The Aura system has dedicated sidebar tokens that differ from the main content area: | Token | Purpose | Light value | Dark value | |-------|---------|-------------|------------| | bg-sidebar | Sidebar background | mountain-900 | mountain-900 | | text-sidebar-foreground | Sidebar text | mountain-100 | mountain-100 | | text-sidebar-primary | Sidebar primary | mountain-600 | mountain-600 | | text-sidebar-primary-foreground | Active item text | white | white | | bg-sidebar-accent | Active/hover bg | mountain-700 | mountain-700 | | text-sidebar-accent-foreground | Active text | white | white | | border-sidebar-border | Sidebar borders | mountain-800 | mountain-800 | Note: The sidebar is ALWAYS dark-themed, even in light mode. </sidebar-tokens> <patterns> <pattern name="sidebar-content"> <use-when> 3+ top-level sections. Persistent navigation needed. Most common for multi-page apps. </use-when> <structure> ┌──────────┬────────────────────