@databricks/appkit-ui 0.12.1 → 0.13.0

package/docs/api/appkit-ui/ui/Sidebar.md

@@ -2,6 +2,271 @@
 
 Collapsible navigation sidebar with mobile support
 
+## Example[​](#example "Direct link to Example")
+
+<!-- -->
+
+```tsx
+import {
+    Button,
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+    Sidebar,
+    SidebarContent,
+    SidebarGroup,
+    SidebarGroupContent,
+    SidebarGroupLabel,
+    SidebarHeader,
+    SidebarInput,
+    SidebarInset,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+    SidebarProvider,
+    SidebarRail,
+    SidebarTrigger,
+    Item,
+    ItemActions,
+    ItemContent,
+    ItemDescription,
+    ItemTitle,
+    Label,
+} from "@databricks/appkit-ui/react"
+import { useState } from "react"
+
+export default function SidebarExample() {
+    const data = {
+        versions: ["1.0.1", "1.1.0-alpha", "2.0.0-beta1"],
+        navMain: [
+            {
+                title: "Getting Started",
+                url: "#",
+                items: [
+                    {
+                        title: "Installation",
+                        url: "#",
+                    },
+                    {
+                        title: "Project Structure",
+                        url: "#",
+                    },
+                ],
+            },
+            {
+                title: "Build Your Application",
+                url: "#",
+                items: [
+                    {
+                        title: "Routing",
+                        url: "#",
+                    },
+                    {
+                        title: "Data Fetching",
+                        url: "#",
+                        isActive: true,
+                    },
+                    {
+                        title: "Rendering",
+                        url: "#",
+                    },
+                    {
+                        title: "Caching",
+                        url: "#",
+                    },
+                    {
+                        title: "Styling",
+                        url: "#",
+                    },
+                    {
+                        title: "Optimizing",
+                        url: "#",
+                    },
+                    {
+                        title: "Configuring",
+                        url: "#",
+                    },
+                    {
+                        title: "Testing",
+                        url: "#",
+                    },
+                    {
+                        title: "Authentication",
+                        url: "#",
+                    },
+                    {
+                        title: "Deploying",
+                        url: "#",
+                    },
+                    {
+                        title: "Upgrading",
+                        url: "#",
+                    },
+                    {
+                        title: "Examples",
+                        url: "#",
+                    },
+                ],
+            },
+            {
+                title: "API Reference",
+                url: "#",
+                items: [
+                    {
+                        title: "Components",
+                        url: "#",
+                    },
+                    {
+                        title: "File Conventions",
+                        url: "#",
+                    },
+                    {
+                        title: "Functions",
+                        url: "#",
+                    },
+                    {
+                        title: "next.config.js Options",
+                        url: "#",
+                    },
+                    {
+                        title: "CLI",
+                        url: "#",
+                    },
+                    {
+                        title: "Edge Runtime",
+                        url: "#",
+                    },
+                ],
+            },
+            {
+                title: "Architecture",
+                url: "#",
+                items: [
+                    {
+                        title: "Accessibility",
+                        url: "#",
+                    },
+                    {
+                        title: "Fast Refresh",
+                        url: "#",
+                    },
+                    {
+                        title: "Next.js Compiler",
+                        url: "#",
+                    },
+                    {
+                        title: "Supported Browsers",
+                        url: "#",
+                    },
+                    {
+                        title: "Turbopack",
+                        url: "#",
+                    },
+                ],
+            },
+        ],
+    }
+
+    const [selectedVersion, setSelectedVersion] = useState(data.versions[0])
+
+    return (
+        <SidebarProvider>
+            <Sidebar>
+                <SidebarHeader>
+                    <SidebarMenu>
+                        <SidebarMenuItem>
+                            <DropdownMenu>
+                                <DropdownMenuTrigger asChild>
+                                    <SidebarMenuButton
+                                        size="lg"
+                                        className="data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground"
+                                    >
+                                        <Item className="p-0 w-full" size="sm">
+                                            <ItemContent>
+                                                <ItemTitle className="text-sm">Documentation</ItemTitle>
+                                                <ItemDescription>v{selectedVersion}</ItemDescription>
+                                            </ItemContent>
+                                            <ItemActions className="ml-auto">
+                                                <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="size-4 shrink-0 opacity-50"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
+                                            </ItemActions>
+                                        </Item>
+                                    </SidebarMenuButton>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent>
+                                    <DropdownMenuGroup>
+                                        {data.versions.map((version) => (
+                                            <DropdownMenuItem
+                                                key={version}
+                                                onSelect={() => setSelectedVersion(version)}
+                                            >
+                                                v{version}{" "}
+                                                {version === selectedVersion && (
+                                                    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ml-auto size-4"><path d="M20 6 9 17l-5-5"/></svg>
+                                                )}
+                                            </DropdownMenuItem>
+                                        ))}
+                                    </DropdownMenuGroup>
+                                </DropdownMenuContent>
+                            </DropdownMenu>
+                        </SidebarMenuItem>
+                    </SidebarMenu>
+                    <form>
+                        <SidebarGroup className="py-0">
+                            <SidebarGroupContent className="relative">
+                                <Label htmlFor="search" className="sr-only">
+                                    Search
+                                </Label>
+                                <SidebarInput
+                                    id="search"
+                                    placeholder="Search the docs..."
+                                    className="pl-8"
+                                />
+                                <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
+                            </SidebarGroupContent>
+                        </SidebarGroup>
+                    </form>
+                </SidebarHeader>
+                <SidebarContent>
+                    {data.navMain.map((item) => (
+                        <SidebarGroup key={item.title}>
+                            <SidebarGroupLabel>{item.title}</SidebarGroupLabel>
+                            <SidebarGroupContent>
+                                <SidebarMenu>
+                                    {item.items.map((subItem) => (
+                                        <SidebarMenuItem key={subItem.title}>
+                                            <SidebarMenuButton asChild isActive={subItem.isActive}>
+                                                <a href={subItem.url}>{subItem.title}</a>
+                                            </SidebarMenuButton>
+                                        </SidebarMenuItem>
+                                    ))}
+                                </SidebarMenu>
+                            </SidebarGroupContent>
+                        </SidebarGroup>
+                    ))}
+                </SidebarContent>
+                <SidebarRail />
+            </Sidebar>
+            <SidebarInset>
+                <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+                    <SidebarTrigger className="-ml-1" />
+                </header>
+                <div className="flex flex-1 flex-col gap-4 p-4">
+                    <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                        <div className="bg-muted/50 aspect-video rounded-xl" />
+                        <div className="bg-muted/50 aspect-video rounded-xl" />
+                        <div className="bg-muted/50 aspect-video rounded-xl" />
+                    </div>
+                    <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+                </div>
+            </SidebarInset>
+        </SidebarProvider>
+    )
+}
+
+```
+
 ## Sidebar[​](#sidebar-1 "Direct link to Sidebar")
 
 Collapsible navigation sidebar with mobile support
@@ -10,11 +275,11 @@ Collapsible navigation sidebar with mobile support
 
 ### Props[​](#props "Direct link to Props")
 
-| Prop          | Type   | Required | Default     | Description |
-| ------------- | ------ | -------- | ----------- | ----------- |
-| `side`        | `enum` |          | `left`      | -           |
-| `variant`     | `enum` |          | `sidebar`   | -           |
-| `collapsible` | `enum` |          | `offcanvas` | -           |
+| Prop          | Type   | Required | Default     | Description                                                                                                                           |
+| ------------- | ------ | -------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `side`        | `enum` |          | `left`      | Which side of the viewport the sidebar appears on                                                                                     |
+| `variant`     | `enum` |          | `sidebar`   | Visual style: `"sidebar"` (standard with border), `"floating"` (rounded with shadow), or `"inset"` (content area gets rounded margin) |
+| `collapsible` | `enum` |          | `offcanvas` | Collapse behavior: `"offcanvas"` (slides off-screen), `"icon"` (collapses to icon width), or `"none"` (always expanded)               |
 
 ### Usage[​](#usage "Direct link to Usage")
 
@@ -90,9 +355,9 @@ Action button displayed next to a sidebar group label
 
 ### Props[​](#props-4 "Direct link to Props")
 
-| Prop      | Type      | Required | Default | Description |
-| --------- | --------- | -------- | ------- | ----------- |
-| `asChild` | `boolean` |          | `false` | -           |
+| Prop      | Type      | Required | Default | Description                                    |
+| --------- | --------- | -------- | ------- | ---------------------------------------------- |
+| `asChild` | `boolean` |          | `false` | Render as child element instead of default tag |
 
 ### Usage[​](#usage-4 "Direct link to Usage")
 
@@ -130,9 +395,9 @@ Label heading for a sidebar group
 
 ### Props[​](#props-6 "Direct link to Props")
 
-| Prop      | Type      | Required | Default | Description |
-| --------- | --------- | -------- | ------- | ----------- |
-| `asChild` | `boolean` |          | `false` | -           |
+| Prop      | Type      | Required | Default | Description                                    |
+| --------- | --------- | -------- | ------- | ---------------------------------------------- |
+| `asChild` | `boolean` |          | `false` | Render as child element instead of default tag |
 
 ### Usage[​](#usage-6 "Direct link to Usage")
 
@@ -227,10 +492,10 @@ Action button displayed alongside a menu item
 
 ### Props[​](#props-11 "Direct link to Props")
 
-| Prop          | Type      | Required | Default | Description |
-| ------------- | --------- | -------- | ------- | ----------- |
-| `asChild`     | `boolean` |          | `false` | -           |
-| `showOnHover` | `boolean` |          | `false` | -           |
+| Prop          | Type      | Required | Default | Description                                    |
+| ------------- | --------- | -------- | ------- | ---------------------------------------------- |
+| `asChild`     | `boolean` |          | `false` | Render as child element instead of default tag |
+| `showOnHover` | `boolean` |          | `false` | Only show when parent menu item is hovered     |
 
 ### Usage[​](#usage-11 "Direct link to Usage")
 
@@ -266,13 +531,13 @@ import { SidebarMenuBadge } from '@databricks/appkit-ui';
 
 ### Props[​](#props-13 "Direct link to Props")
 
-| Prop       | Type                                                              | Required | Default   | Description |
-| ---------- | ----------------------------------------------------------------- | -------- | --------- | ----------- |
-| `asChild`  | `boolean`                                                         |          | `false`   | -           |
-| `isActive` | `boolean`                                                         |          | `false`   | -           |
-| `tooltip`  | `string \| (TooltipContentProps & RefAttributes<HTMLDivElement>)` |          | -         | -           |
-| `variant`  | `"default" \| "outline" \| null`                                  |          | `default` | -           |
-| `size`     | `"default" \| "sm" \| "lg" \| null`                               |          | `default` | -           |
+| Prop       | Type                                                              | Required | Default   | Description                                          |
+| ---------- | ----------------------------------------------------------------- | -------- | --------- | ---------------------------------------------------- |
+| `asChild`  | `boolean`                                                         |          | `false`   | Render as child element instead of default tag       |
+| `isActive` | `boolean`                                                         |          | `false`   | Whether this item is currently active/selected       |
+| `tooltip`  | `string \| (TooltipContentProps & RefAttributes<HTMLDivElement>)` |          | -         | Tooltip shown when sidebar is collapsed to icon mode |
+| `variant`  | `"default" \| "outline" \| null`                                  |          | `default` | -                                                    |
+| `size`     | `"default" \| "sm" \| "lg" \| null`                               |          | `default` | -                                                    |
 
 ### Usage[​](#usage-13 "Direct link to Usage")
 
@@ -310,9 +575,9 @@ Loading skeleton placeholder for menu items
 
 ### Props[​](#props-15 "Direct link to Props")
 
-| Prop       | Type      | Required | Default | Description |
-| ---------- | --------- | -------- | ------- | ----------- |
-| `showIcon` | `boolean` |          | `false` | -           |
+| Prop       | Type      | Required | Default | Description                                                  |
+| ---------- | --------- | -------- | ------- | ------------------------------------------------------------ |
+| `showIcon` | `boolean` |          | `false` | Show a circular icon placeholder alongside the text skeleton |
 
 ### Usage[​](#usage-15 "Direct link to Usage")
 
@@ -350,11 +615,11 @@ Button for submenu items
 
 ### Props[​](#props-17 "Direct link to Props")
 
-| Prop       | Type      | Required | Default | Description |
-| ---------- | --------- | -------- | ------- | ----------- |
-| `asChild`  | `boolean` |          | `false` | -           |
-| `size`     | `enum`    |          | `md`    | -           |
-| `isActive` | `boolean` |          | `false` | -           |
+| Prop       | Type      | Required | Default | Description                                            |
+| ---------- | --------- | -------- | ------- | ------------------------------------------------------ |
+| `asChild`  | `boolean` |          | `false` | Render as child element instead of default tag         |
+| `size`     | `enum`    |          | `md`    | Text size of the submenu button                        |
+| `isActive` | `boolean` |          | `false` | Whether this submenu item is currently active/selected |
 
 ### Usage[​](#usage-17 "Direct link to Usage")
 
@@ -390,11 +655,11 @@ import { SidebarMenuSubItem } from '@databricks/appkit-ui';
 
 ### Props[​](#props-19 "Direct link to Props")
 
-| Prop           | Type                        | Required | Default | Description |
-| -------------- | --------------------------- | -------- | ------- | ----------- |
-| `defaultOpen`  | `boolean`                   |          | `true`  | -           |
-| `open`         | `boolean`                   |          | -       | -           |
-| `onOpenChange` | `((open: boolean) => void)` |          | -       | -           |
+| Prop           | Type                        | Required | Default | Description                               |
+| -------------- | --------------------------- | -------- | ------- | ----------------------------------------- |
+| `defaultOpen`  | `boolean`                   |          | `true`  | Initial open state for uncontrolled usage |
+| `open`         | `boolean`                   |          | -       | Controlled open state                     |
+| `onOpenChange` | `((open: boolean) => void)` |          | -       | Callback when open state changes          |
 
 ### Usage[​](#usage-19 "Direct link to Usage")
 
@@ -478,13 +743,15 @@ Hook to access sidebar state and controls
 
 ### Props[​](#props-23 "Direct link to Props")
 
-This component extends standard HTML element attributes.
+This hook takes no parameters.
 
 ### Usage[​](#usage-23 "Direct link to Usage")
 
 ```tsx
 import { useSidebar } from '@databricks/appkit-ui';
 
-<useSidebar /* props */ />
+function MyComponent() {
+  const sidebar = useSidebar();
+}
 
 ```

package/docs/app-management.md

@@ -9,7 +9,7 @@ Manage your AppKit application throughout its lifecycle using the Databricks CLI
 
 ## Create app[​](#create-app "Direct link to Create app")
 
-See the [Quick start](./docs.md#quick-start) section to create a new Databricks app with AppKit installed.
+See the [Quick start](./docs.md#quick-start-options) section to create a new Databricks app with AppKit installed.
 
 ## Configuration[​](#configuration "Direct link to Configuration")
 

package/docs/development/ai-assisted-development.md

@@ -4,11 +4,60 @@
 
 * [Node.js](https://nodejs.org) v22+ environment with `npm`
 * Databricks CLI (v0.287.0 or higher): install and configure it according to the [official tutorial](https://docs.databricks.com/aws/en/dev-tools/cli/tutorial).
-* A new Databricks app with AppKit installed. See the [Quick start](./docs.md#quick-start) for more details.
+* A new Databricks app with AppKit installed. See [Bootstrap a new Databricks app](./docs.md#quick-start-options) for more details.
 
-AppKit-specific agent skills for AI coding assistants are coming soon. This documentation will be updated with instructions when available.
+AppKit integrates with AI coding assistants through the Agent Skills.
 
-In the meantime, refer to the LLM resources section below for guidance on working with AppKit in AI-assisted development environments.
+## Installing Agent Skills[​](#installing-agent-skills "Direct link to Installing Agent Skills")
+
+To install the Databricks Agent Skills for your preferred AI assistant, run:
+
+```bash
+databricks experimental aitools skills install
+
+```
+
+## Skills capabilities[​](#skills-capabilities "Direct link to Skills capabilities")
+
+The Agent Skills expose the following capabilities for AI assistants:
+
+* **Data exploration**: Query catalogs, schemas, tables, and execute SQL
+* **CLI command execution**: Deploy and manage apps, and run other workspace operations
+* **Workspace resource discovery**: Inspect and navigate workspace resources
+
+## Example prompts[​](#example-prompts "Direct link to Example prompts")
+
+Here are some basic examples you can use to explore your app and workspace:
+
+1. Creating a new basic app
+
+```text
+Create a new Databricks app that displays a dashboard of the users table in main.default.
+
+```
+
+1. Introspecting a table schema
+
+```text
+Show me the schema of the users table in main.default.
+
+```
+
+1. Creating a new query
+
+```text
+Create a new query to find users created in the last 7 days.
+
+```
+
+1. Deploying an app
+
+```text
+Deploy the app to Databricks with the name "my-app".
+
+```
+
+Possibilities are virtually endless. Ask your AI assistant to help you with your app and workspace.
 
 ## LLM resources[​](#llm-resources "Direct link to LLM resources")
 
@@ -21,8 +70,19 @@ If you're building applications using AppKit packages, reference the `llms.txt`
 
 ```bash
 npx @databricks/appkit docs            # documentation index with section overview
+  npx @databricks/appkit docs <query> # for specific documentation file or section
+
+```
+
+Examples of documentation queries:
+
+```bash
 npx @databricks/appkit docs "appkit-ui API reference"  # view a specific section
 npx @databricks/appkit docs --full     # full index with all API entries
 npx @databricks/appkit docs ./docs.md  # view a specific documentation file
 
 ```
+
+## See more[​](#see-more "Direct link to See more")
+
+To learn more about Agent Skills, see the [Agent Skills repository](https://github.com/databricks/databricks-agent-skills).

package/docs/development/llm-guide.md

@@ -65,7 +65,7 @@ Examples:
 
 * `package.json` has `"type": "module"`
 * `tsx` is in devDependencies for dev server
-* `dev` script uses `NODE_ENV=development tsx watch server/index.ts`
+* `dev` script uses `NODE_ENV=development tsx watch server/server.ts`
 * `client/index.html` exists with `<div id="root"></div>` and script pointing to `client/src/main.tsx`
 
 ### Backend[​](#backend "Direct link to Backend")

package/docs/development/local-development.md

@@ -4,9 +4,9 @@
 
 * [Node.js](https://nodejs.org) v22+ environment with `npm`
 * Databricks CLI (v0.287.0 or higher): install and configure it according to the [official tutorial](https://docs.databricks.com/aws/en/dev-tools/cli/tutorial).
-* A new Databricks app with AppKit installed. See the [Quick start](./docs.md#quick-start) for more details.
+* A new Databricks app with AppKit installed. See [Bootstrap a new Databricks app](./docs.md#quick-start-options) for more details.
 
-Once your app is bootstrapped according to the [Quick start](./docs.md#quick-start) guide, you can start the development server with hot reload for both UI and backend code.
+Once your app is bootstrapped according to the [Manual quick start](./docs.md#manual-quick-start) guide, you can start the development server with hot reload for both UI and backend code.
 
 In the application root directory, run the following command to start the development server:
 

package/docs/development/project-setup.md

@@ -9,7 +9,7 @@ Recommended structure (client/server split):
 ```text
 my-app/
 ├── server/
-│   ├── index.ts              # backend entry point (AppKit)
+│   ├── server.ts              # backend entry point (AppKit)
 │   └── .env                  # optional local dev env vars (do not commit)
 ├── client/
 │   ├── index.html
@@ -44,9 +44,9 @@ The AppKit `server()` plugin automatically serves:
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "NODE_ENV=development tsx watch server/index.ts",
+    "dev": "NODE_ENV=development tsx watch server/server.ts",
     "build": "npm run build:server && npm run build:client",
-    "build:server": "tsdown --out-dir build server/index.ts",
+    "build:server": "tsdown --out-dir build server/server.ts",
     "build:client": "tsc -b && vite build --config client/vite.config.ts",
     "start": "node build/index.mjs"
   },
@@ -149,7 +149,7 @@ export default defineConfig({
 
 ```
 
-### `server/index.ts`[​](#serverindexts "Direct link to serverindexts")
+### `server/server.ts`[​](#serverserverts "Direct link to serverserverts")
 
 ```ts
 import { createApp, server } from "@databricks/appkit";
@@ -193,7 +193,7 @@ If you don't already have a `client/` folder, create one and move your Vite app
 * Move `vite.config.ts` → `client/vite.config.ts`
 * Move `src/` → `client/src/`
 
-### 2. Create `server/index.ts` (New File)[​](#2-create-serverindexts-new-file "Direct link to 2-create-serverindexts-new-file")
+### 2. Create `server/server.ts` (New File)[​](#2-create-serverserverts-new-file "Direct link to 2-create-serverserverts-new-file")
 
 ```ts
 import { createApp, server } from "@databricks/appkit";
@@ -209,9 +209,9 @@ await createApp({
 ```json
 {
   "scripts": {
-    "dev": "NODE_ENV=development tsx watch server/index.ts",
+    "dev": "NODE_ENV=development tsx watch server/server.ts",
     "build": "npm run build:server && npm run build:client",
-    "build:server": "tsdown --out-dir build server/index.ts",
+    "build:server": "tsdown --out-dir build server/server.ts",
     "build:client": "tsc -b && vite build --config client/vite.config.ts",
     "start": "node build/index.mjs"
   }
@@ -228,7 +228,7 @@ AppKit's server plugin will automatically serve your Vite app in dev mode and `c
 To add SQL query execution capabilities:
 
 ```ts
-// server/index.ts
+// server/server.ts
 import { createApp, server, analytics } from "@databricks/appkit";
 
 await createApp({

package/docs/development/remote-bridge.md

@@ -4,7 +4,7 @@
 
 * [Node.js](https://nodejs.org) v22+ environment with `npm`
 * Databricks CLI (v0.287.0 or higher): install and configure it according to the [official tutorial](https://docs.databricks.com/aws/en/dev-tools/cli/tutorial).
-* A new Databricks app with AppKit installed. See the [Quick start](./docs.md#quick-start) for more details.
+* A new Databricks app with AppKit installed. See [Bootstrap a new Databricks app](./docs.md#quick-start-options) for more details.
 
 Remote bridge allows you to develop against a deployed backend while keeping your UI and queries local. This is useful for testing against production data or debugging deployed backend code without redeploying your app.
 

package/docs/development/type-generation.md

@@ -106,5 +106,5 @@ data?.forEach(row => {
 
 ## See also[​](#see-also "Direct link to See also")
 
-* [Plugins](./docs/plugins.md) - Analytics plugin configuration
+* [Plugins](./docs/plugins/analytics.md) - Analytics plugin configuration
 * [API Reference](./docs/api/appkit-ui.md) - Complete UI components API documentation

package/docs/development.md

@@ -1,19 +1,19 @@
 # Development
 
-AppKit provides multiple development workflows to suit different needs: local development with hot reload, AI-assisted development with MCP, and remote tunneling to deployed backends.
+AppKit provides multiple development workflows to suit different needs: local development with hot reload, AI-assisted development with Agent Skills, and remote tunneling to deployed backends.
 
 ## Prerequisites[​](#prerequisites "Direct link to Prerequisites")
 
 * [Node.js](https://nodejs.org) v22+ environment with `npm`
 * Databricks CLI (v0.287.0 or higher): install and configure it according to the [official tutorial](https://docs.databricks.com/aws/en/dev-tools/cli/tutorial).
-* A new Databricks app with AppKit installed. See the [Quick start](./docs.md#quick-start) for more details.
+* A new Databricks app with AppKit installed. See [Bootstrap a new Databricks app](./docs.md#quick-start-options) for more details.
 
 ## Development flows[​](#development-flows "Direct link to Development flows")
 
 There are multiple supported development flows available with AppKit:
 
 1. **[Local development](./docs/development/local-development.md)**: Run the development server with hot reload for both UI and backend code. This is the default development flow and is suitable for most use cases.
-2. **[AI-assisted development](./docs/development/ai-assisted-development.md)**: Use an AI coding assistant to explore data, run CLI commands, and scaffold your app interactively.
+2. **[AI-assisted development](./docs/development/ai-assisted-development.md)**: Use an AI coding assistant with Agent Skills to explore data, run CLI commands, and scaffold your app interactively.
 3. **[Remote Bridge](./docs/development/remote-bridge.md)**: Create a remote bridge to a deployed backend while keeping your queries and UI local. This is useful for testing against production data or debugging deployed backend code without redeploying your app.
 
 ## See also[​](#see-also "Direct link to See also")