databricks-app-design — Claude Code skill: setup
Design data screens for custom Databricks Apps built with AppKit/React. Use it for KPIs, reports, charts, tables, and Genie or chat views.
npx skills add databricks/databricks-agent-skills --skill databricks-app-design -a claude-codeWhat databricks-app-design 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.
What it helps with
- 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 for the agent
- 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.
How to install databricks-app-design
1Skills CLI (Vercel)
npx skills add databricks/databricks-agent-skills --skill databricks-app-design -a claude-code2Manually: put the files in place
~/.claude/skills/databricks-app-design/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/databricks-app-design/
1Skills CLI (Vercel)
npx skills add databricks/databricks-agent-skills --skill databricks-app-design -a codex2Manually: put the files in place
.agents/skills/databricks-app-design/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add databricks/databricks-agent-skills --skill databricks-app-design -a cursor2Manually: put the files in place
.cursor/skills/databricks-app-design/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install databricks/databricks-agent-skills databricks-app-design2Manually: put the files in place
.github/skills/databricks-app-design/SKILL.md1Skills CLI (Vercel)
npx skills add databricks/databricks-agent-skills --skill databricks-app-design -a gemini-cli2Platform CLI
gemini skills install https://github.com/databricks/databricks-agent-skills --path skills/databricks-app-designManually: put the files in place
.devin/skills/databricks-app-design/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add databricks/databricks-agent-skills --skill databricks-app-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 databricks-app-design
How do I install databricks-app-design in Claude Code?
Run npx skills add databricks/databricks-agent-skills --skill databricks-app-design -a claude-code, then open ~/.claude/skills/databricks-app-design/SKILL.md.
What does databricks-app-design do?
It designs data screens for custom Databricks Apps using AppKit/React and turns layout, notation, data binding, and state decisions into a component plan.
Is it for managed Lakeview dashboards?
No. A plain dashboard request maps to databricks-aibi-dashboards; this skill is for custom-code AppKit/React data screens.
