skills.rest
ThomazRossito
ThomazRossitoCOMMUNITY
Explore all skills by this author →
Website𝕏@thomazrossitoGitHub

databricks-app-design

Designs data-screen UX for custom-code Databricks Apps mapped to AppKit React components.

4|1|Updated May 22, 2026
Search Tags:#data visualization#React#appkit#databricks#dashboard design#genie#ibcs
One-click install
npx skills add https://github.com/ThomazRossito/ai-data-agents --skill databricks-app-design-thomazrossito
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: databricks-app-design
Source: https://github.com/ThomazRossito/ai-data-agents/tree/main/plugins/ai-data-agents/skills/databricks-app-design
Command: npx skills add https://github.com/ThomazRossito/ai-data-agents --skill databricks-app-design-thomazrossito

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @databricks/appkit, @databricks/appkit-ui, lucide-react, and includes references (resource) components.

What problem does it solve? Designing the data screens of a custom-code Databricks App (AppKit/React) often produces vague design memos that never translate into real components, or dashboards with dishonest scales, missing loading/empty/error states, and untrustworthy AI chat answers. This Skill turns UX intent into a concrete, buildable component plan grounded in AppKit primitives, dashboard design patterns, and IBCS notation. ## Core Features & Use Cases - Component-bound design proposals: Every design element is mapped to an actual component exported from @databricks/appkit or @databricks/appkit-ui, with queryKey bindings, semantic color tokens, and required states (loading, empty, error, partial). - IBCS notation and dashboard patterns: Applies scenario marks (actual/PY/plan/forecast), honest scales, message-in-title rules, and genre/composition patterns from the IEEE dashboard design patterns catalog. - Genie/AI trust surfaces: For apps with a Genie or natural-language chat surface, enforces five trust patterns — authenticated identity, inspectable generated SQL, streaming status, per-answer disclaimers, and truthful execution-identity disclosure. - Use Case: You are building a React Databricks App with a KPI overview page and a Genie chat panel. Use this Skill to produce a component plan specifying charts, palettes, Skeleton/Empty/Alert states, and the required Genie trust UI before writing code. ## Quick Start Use the databricks-app-design skill to design the KPI overview page and Genie chat surface of my AppKit React app with a full component plan.

Frequently Asked Questions about databricks-app-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design a dashboard UI for a Databricks AppKit React app?▼

Frame the audience and primary task, pick a genre from the dashboard patterns reference, compose content and layout, apply IBCS notation rules, then bind every element to a real @databricks/appkit-ui component with queryKey data binding and loading/empty/error states.

What is the difference between databricks-app-design and databricks-aibi-dashboards?▼

databricks-app-design covers data screens of custom-code AppKit/React apps, while databricks-aibi-dashboards handles managed AI/BI (Lakeview) dashboards. A plain create-a-dashboard request without app or React signals should use the AI/BI skill instead.

Does AppKit provide a prebuilt KPI card component?▼

No, @databricks/appkit-ui ships no prebuilt KPI, metric, trend, or distribution card. You compose them from published primitives like Card components plus a chart, following the IBCS notation rules for units, periods, comparisons, and freshness.

How do I make a Genie chat answer trustworthy in a Databricks app?▼

Ship all five trust patterns: show the signed-in identity via a /api/whoami route, render the generated SQL in an inspectable card, surface streaming/error status, add a per-answer AI disclaimer, and disclose the true execution identity (OBO only when user_api_scopes is wired).

Can I use hardcoded hex colors or Tailwind palette utilities for charts?▼

No, the skill forbids raw hex values and raw Tailwind color utilities because they bypass design tokens and break dark mode. Use the chart colorPalette prop or semantic tokens like --success, --destructive, and --warning mapped to intent.

When should I not use this skill for a Databricks UI request?▼

Do not use it for managed Lakeview/AI-BI dashboards, generic frontend work like forms, auth, settings, or marketing pages, or for scaffolding, build, and deploy tasks. Those belong to databricks-aibi-dashboards or the parent databricks-apps skill.

Related Skills

Explore More Data & Analytics Skills→
databricks-solutionsdatabricks-solutions
1.8k

databricks-genie

Create and query Databricks Genie Spaces for natural language SQL exploration.

Official
Intermediate
keqingli1129keqingli1129

deploy

Deploy agent bundles to Databricks Apps using Databricks Asset Bundles.

Community
Advanced
databricks-solutionsdatabricks-solutions
5

databricks-aibi-dashboards

Validate Databricks AI/BI dashboard templates for widget-query alignment and deployment.

Official
Advanced
mkgs-databricks-demosmkgs-databricks-demos

databricks-apps

Construct and manage Databricks Apps for interactive data visualization and custom workflows.

Official
Advanced