cognitedata/flows-community-components

Latest recorded source activity: November 2, 2026 at 11:15

SkillsMP catalog refreshed: November 9, 2026 at 14:22

skills collected: 7

GitHub stars: 5
GitHub forks: 0

Install with an AI assistant

Copy this prompt into the AI assistant you're using.

Follow https://skillsmp.com/skill-install/prompt.md to install Agent Skills from https://github.com/cognitedata/flows-community-components.

Repository README

Repository README source: README.md

Read the source README

Expand full README

# Aura + Flows Community This repo hosts the **Aura design system site** and the **Flows Community shadcn registry** for shared industrial UI in Cognite Flows. Core primitives stay on NPM as `@cognite/aura`; community items ship as ejectable source under `@aura`. Community component docs preview examples **natively** (portable Storybook stories) — not via iframe. | Layer | Distribution | Support | | --- | --- | --- | | **Aura Core** | NPM package `@cognite/aura` | Centrally maintained | | **Flows Community** | Source registry `@aura` | Community-vetted, use at your discretion | Official Aura docs: [docs.cognite.com/aura-design-system](https://docs.cognite.com/aura-design-system) Community site + registry: [cognitedata.github.io/flows-community-components](https://cognitedata.github.io/flows-community-components) ## Install a community component Full guide, including troubleshooting: [Installation](https://cognitedata.github.io/flows-community-components/community/installation). 1. Install Aura: `npm install @cognite/aura`. 2. Register the `@aura` namespace. Without it, `shadcn add @aura/...` fails with `Unknown registry "@aura"`. If you already have a `components.json`, let the CLI add it: ```bash npx shadcn@latest registry add "@aura=https://cognitedata.github.io/flows-community-components/r/{name}.json" ``` Otherwise create `components.json` (Tailwind v4: empty `config`, `css` = your stylesheet). We recommend this over `shadcn init`, which writes shadcn's default theme variables that Aura already provides: ```json { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": false, "tsx": true, "tailwind": { "config": "", "css": "src/styles.css", "baseColor": "zinc", "cssVariables": true, "prefix": "" }, "iconLibrary": "lucide", "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "registries": { "@aura": "https://cognitedata.github.io/flows-community-components/r/{name}.json" } } ``` 3. In that stylesheet, import Aura source styles and `@source` installed community components: ```css @import "@cognite/aura/styles.source.css"; @source './components/ui/community/**/*.{ts,tsx}'; ``` 4. Install an item: ```bash npx shadcn@latest add @aura/drawer ``` Or skip the namespace and install by URL: ```bash npx shadcn@latest add https://cognitedata.github.io/flows-community-components/r/drawer.json ``` Community items depend on `@cognite/aura` and copy source into your repository. ## Search order 1. Aura Core (`@cognite/aura`) 2. Flows Community (`@aura/...`) 3. Compatible shadcn registries (prefer Base UI) 4. New implementation using Aura primitives and tokens ## Develop in this repo ```bash pnpm install pnpm dev # docs site pnpm storybook # Storybook (community components) pnpm run registry:build # regenerate registry.json + public/r pnpm run registry:check # fail if registry artifacts are stale pnpm lint pnpm tsc -b pnpm run test:storybook:ci ``` Community components live in `src/components/ui/community/`. Contribution model: [docs/decisions/2026-08-04-aura-community-contribution-model.md](docs/decisions/2026-08-04-aura-community-contribution-model.md).

Loading the repository README…

Skills in this repository

classification pending

skill

occupation

description

updated

aura-community-changelog

unclassified

Generates a public-facing, visual biweekly changelog / blog post for the community website covering the last two weeks of shipped Aura and community-repo work, with screenshots of changed components. Use this whenever the user asks for a community changelog,…

2026-11-02

aura-dashboard

unclassified

Choose one Aura dashboard layout and install only that layout. Use when the user wants an operations overview, KPI tiles, a plant status page, a dashboard with a side panel, or a dashboard above a data grid. Ask which layout before scaffolding a page.

2026-10-14

aura-d3-charts

unclassified

Build or edit D3 charts that are fully compatible with the Aura design system — Aura chart, semantic and type tokens, light and dark themes, Aura components around the chart, Aura motion and content rules. Use for any D3 or custom SVG chart in an Aura app,…

2026-10-14

aura-map-layout

unclassified

Add one map page to a Flows app. Ask which layout the user wants, then run that layout's install command and render the component it adds. Use when the user wants a map, a spatial view, layer controls, or a preview next to a map.

2026-10-12

aura-record-list

unclassified

Add one record list page to a Flows app. Ask which layout the user wants, then run that layout's install command and render the component it adds. Use when the user wants a list of records, a table page, filters, a side panel, or a row preview. The toolbar…

2026-10-09

component-builder

unclassified

Build accessible, consistent React components following Aura design system patterns. Use when creating or updating component files.

2026-08-10

story-builder

unclassified

Write comprehensive Storybook stories for Aura components. Use when creating or updating .stories.tsx files.

2026-08-10

Showing 7 of 7 collected skills.