# databricks-app-design

Design data screens for custom Databricks Apps built with AppKit/React. Use it for KPIs, reports, charts, tables, and Genie or chat views.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 315 installs · ★ 368
- Author: databricks
- License: LicenseRef-Unknown · policy=link-only · description only; the file stays with the author
- Source: https://github.com/databricks/databricks-agent-skills/tree/HEAD/skills/databricks-app-design/SKILL.md
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/databricks-app-design

## What it does

This skill turns a data-screen request into a concrete AppKit plan. It helps choose the screen genre, layout, level of detail, chart form, KPI treatment, semantic color, and IBCS notation. It covers both new designs and reviews of existing AppKit/React interfaces.

Implementation guidance points to exported primitives from `@databricks/appkit` and `@databricks/appkit-ui`, with `useAnalyticsQuery`, `queryKey`, and `sql.*` parameters for data binding. Each data view gets loading, empty, error, and partial or stale states. Large result sets use server-side pagination, sorting, and filtering.

For Genie or natural-language data surfaces, the skill calls for visible generated SQL, response status, signed-in identity, execution-identity disclosure, and clear AI verification language. A plain “create a dashboard” request belongs to managed AI/BI Lakeview, while forms, auth, marketing pages, and deployment belong elsewhere.

## Requirements
- Works with: Databricks

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add databricks/databricks-agent-skills --skill databricks-app-design -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/databricks-app-design/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/databricks-app-design/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add databricks/databricks-agent-skills --skill databricks-app-design -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/databricks-app-design/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add databricks/databricks-agent-skills --skill databricks-app-design -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/databricks-app-design/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install databricks/databricks-agent-skills databricks-app-design
```

2. **Manually: put the files in place**
- File: `.github/skills/databricks-app-design/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add databricks/databricks-agent-skills --skill databricks-app-design -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/databricks/databricks-agent-skills --path skills/databricks-app-design
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/databricks-app-design/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add databricks/databricks-agent-skills --skill databricks-app-design -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/databricks/databricks-agent-skills/tree/HEAD/skills/databricks-app-design/SKILL.md

## When to use it
- plan a KPI screen for a Databricks App
- map charts and tables to AppKit primitives
- cover loading, empty, error, and stale states
- expose generated SQL in a Genie answer
- separate a custom app from a Lakeview dashboard

## Example prompts
- Design an AppKit/React KPI page with a chart and table, and list the components and handled states.
- Review this Genie chat surface and add visible SQL, response status, user identity, and error handling.
- Classify “create a dashboard” and decide whether to use this skill or `databricks-aibi-dashboards`.

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

From the same set: [databricks/databricks-agent-skills](https://affpapa.org/en/nevibecode/by/databricks/databricks-agent-skills.md) — 18 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md