Update to Domino Data Lab

{
  "description": "Build Domino-styled web applications matching the Domino Design System. Use when creating or styling Domino apps (Dash, Streamlit, Flask, FastAPI+HTML), generating UI components, reviewing UX, or when the user mentions \"Domino app\", \"Domino UI\", \"Domino dashboard\", or \"Domino design system\". Covers the full stack — FastAPI backend, Ant Design 5.x frontend via CDN, Domino theme tokens (colors, typography, spacing), chart styling with Highcharts, Domino API authentication, proxy-safe routing, UX writing, error handling, empty states, form design, table patterns, and layout best practices. Also use for UX reviews of existing Domino app screenshots.",
  "included_files": [
    {
      "relative_path": "assets/domino-logo.svg",
      "size_in_bytes": 6030
    },
    {
      "relative_path": "references/ux-design-rules.md",
      "size_in_bytes": 8402
    }
  ],
  "name": "domino-ui-design",
  "skill_md_contents": "---\nname: domino-ui-design\ndescription: Build Domino-styled web applications matching the Domino Design System. Use when creating or styling Domino apps (Dash, Streamlit, Flask, FastAPI+HTML), generating UI components, reviewing UX, or when the user mentions \"Domino app\", \"Domino UI\", \"Domino dashboard\", or \"Domino design system\". Covers the full stack — FastAPI backend, Ant Design 5.x frontend via CDN, Domino theme tokens (colors, typography, spacing), chart styling with Highcharts, Domino API authentication, proxy-safe routing, UX writing, error handling, empty states, form design, table patterns, and layout best practices. Also use for UX reviews of existing Domino app screenshots.\n---\n\n# Domino UI Design System Skill\n\n## Architecture\n\nDomino apps use **FastAPI** (Python backend) + **Ant Design 5.x** (frontend via CDN, no build step). Avoid inline styles and JS — use statically referenced CSS/JS files. Output errors to stdout.\n\n### CDN Setup\n\nInclude in HTML `<head>`:\n\n```html\n<script src=\"https://unpkg.com/react@18/umd/react.production.min.js\"></script>\n<script src=\"https://unpkg.com/react-dom@18/umd/react-dom.production.min.js\"></script>\n<script src=\"https://unpkg.com/antd@5.11.2/dist/antd.min.js\"></script>\n<link href=\"https://unpkg.com/antd@5.11.2/dist/reset.css\" rel=\"stylesheet\">\n<script src=\"https://unpkg.com/dayjs@1.11.10/dayjs.min.js\"></script>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n<script src=\"https://code.highcharts.com/highcharts.js\"></script>\n```\n\nUse `React.createElement()` (aliased as `h`) — no JSX, no build step:\n\n```javascript\nconst { ConfigProvider, Button, Table, Modal, Select, Input, Form, Space, Card, Tag, Alert } = antd;\nconst { createElement: h, useState, useEffect } = React;\n```\n\n## Domino Theme\n\nWrap the app in `ConfigProvider` with this theme:\n\n```javascript\nconst dominoTheme = {\n  token: {\n    colorPrimary: '#543FDE',          // Purple\n    colorPrimaryHover: '#3B23D1',\n    colorPrimaryActive: '#311EAE',\n    colorText: '#2E2E38',\n    colorTextSecondary: '#65657B',\n    colorTextTertiary: '#8F8FA3',\n    colorSuccess: '#28A464',\n    colorWarning: '#CCB718',\n    colorError: '#C20A29',\n    colorInfo: '#0070CC',\n    colorBgContainer: '#FFFFFF',\n    colorBgLayout: '#FAFAFA',\n    colorBorder: '#E0E0E0',\n    fontFamily: 'Inter, Lato, Helvetica Neue, Helvetica, Arial, sans-serif',\n    fontSize: 14,\n    borderRadius: 4,\n    borderRadiusLG: 8,\n  },\n  components: {\n    Button: { primaryShadow: 'none', defaultShadow: 'none' },\n    Table: { headerBg: '#FAFAFA', rowHoverBg: '#F5F5F5' },\n  },\n};\n```\n\n### Top Navigation Bar\n\nHeight: 44px, Background: `#2E2E38`, Text: `#FFFFFF`. Use the Domino logo (height 32px). Primary actions on right. Only add nav items with real destinations.\n\n**Domino Logo:** Reference `assets/domino-logo.svg`, resolved relative to this skill's directory. The SVG is white text on transparent background, designed for the dark nav bar.\n\n### Charts (Highcharts)\n\n```javascript\nHighcharts.setOptions({\n  colors: ['#543FDE', '#0070CC', '#28A464', '#CCB718', '#FF6543', '#E835A7', '#2EDCC4', '#A9734C'],\n  chart: { style: { fontFamily: 'Inter, Lato, Helvetica Neue, Arial, sans-serif' } },\n});\n```\n\n## Domino API Integration\n\n### Authentication\n\nRe-acquire the access token on **every** API call (it expires quickly):\n\n```python\nimport requests, os\n\ndef get_auth_headers():\n    token = requests.get('http://localhost:8899/access-token').text.strip()\n    return {'Authorization': f'Bearer {token}'}\n```\n\n### API Base Paths\n\nTwo separate APIs with **different** base paths:\n\n| API | Base Path | Example |\n|-----|-----------|---------|\n| Platform APIs (public-api.json) | `/api/` | `{DOMINO_API_HOST}/api/jobs/beta/jobs?projectId=...` |\n| Legacy Platform APIs | `/v4/` | `{DOMINO_API_HOST}/v4/jobs?projectId=...` |\n| Governance APIs | `/api/governance/v1/` | `{CLUSTER_URL}/api/governance/v1/bundles?project_id=...` |\n\n**Do NOT** add `/api/` prefix to v4 platform endpoints.\n\n### Environment Variables (available in Domino)\n\n`DOMINO_API_HOST`, `DOMINO_PROJECT_ID`, `DOMINO_PROJECT_NAME`, `DOMINO_PROJECT_OWNER`\n\nDo not add mock/fake data if the API isn't working. Prompt user to set env vars.\n\n## Running the App\n\nUse relative URLs (not absolute) — Domino's nginx proxy modifies the root URL.\n\n```bash\n#!/bin/bash\nuvicorn app:app --host 0.0.0.0 --port 8888\n```\n\n## UX Design Rules\n\nFor detailed UX principles, writing guidelines, component patterns, and review checklists, read [references/ux-design-rules.md](references/ux-design-rules.md).\n\nKey rules to always follow:\n- **Empty states must be actionable** — answer: What is this? Why is it empty? What can I do?\n- **Error messages must be human-readable** with guidance on what to do next\n- **Disabled elements must explain why** they're disabled (tooltip)\n- **Truncated table text must have tooltips**\n- **Icon-only buttons must have tooltips**\n- **Use sentence case** for UI text (not Title Case)\n- **No exclamation points** in UI copy\n- **Side panels should overlay**, not push/crush main content\n- **Checkboxes should use positive framing** — checked = ON/enabled, never checked = OFF/disabled\n\n## UX Review\n\nWhen reviewing a Domino app UI, read [references/ux-design-rules.md](references/ux-design-rules.md) and check against the review checklists. Classify issues as High/Medium/Low severity.\n\n## Documentation Reference\n\nBefore writing or verifying any API call, use the cluster swagger to confirm current endpoint paths and field names. Use public docs for workflow context and field explanations.\n\n**Get the cluster base URL:** `$DOMINO_API_HOST` (injected by Domino into every workspace, job, and app).\n\nThis skill uses two swagger docs:\n\n**Public API** (covers `/api/` endpoints — v1, v2, beta — no auth required):\n```bash\ncurl \"$DOMINO_API_HOST/assets/public-api.json\"\n# Browser UI: $DOMINO_API_HOST/assets/lib/swagger-ui/index.html?url=/assets/public-api.json#/\n```\n\n**Governance API** (covers `/api/governance/v1/` endpoints, requires bearer token):\n```bash\nTOKEN=$(curl -s http://localhost:8899/access-token)\n# Governance is not routed through $DOMINO_API_HOST. Derive the external cluster URL\n# from the JWT iss claim — works in any workspace type.\nCLUSTER_URL=$(echo $TOKEN | cut -d'.' -f2 | python3 -c \"\nimport sys, base64, json, re\np = sys.stdin.read().strip()\np += '=' * (-len(p) % 4)\nprint(re.sub(r'/auth/realms/.*', '', json.loads(base64.b64decode(p))['iss']))\n\")\ncurl -H \"Authorization: Bearer $TOKEN\" \"$CLUSTER_URL/api/governance/swagger/doc.json\"\n# Browser UI (must be logged in): $CLUSTER_URL/api/governance/swagger/index.html\n```\n\n**Public docs (workflow context and field explanations):**\n- [API Guide](https://docs.dominodatalab.com/en/latest/api_guide/f35c19/api-guide/)\n"
}