| name | domino-ui-design |
| 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. |
Domino UI Design System Skill
Architecture
Domino 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.
CDN Setup
Include in HTML <head>:
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/antd@5.11.2/dist/antd.min.js"></script>
<link href="https://unpkg.com/antd@5.11.2/dist/reset.css" rel="stylesheet">
<script src="https://unpkg.com/dayjs@1.11.10/dayjs.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<script src="https://code.highcharts.com/highcharts.js"></script>
Use React.createElement() (aliased as h) — no JSX, no build step:
const { ConfigProvider, Button, Table, Modal, Select, Input, Form, Space, Card, Tag, Alert } = antd;
const { createElement: h, useState, useEffect } = React;
Domino Theme
Wrap the app in ConfigProvider with this theme:
const dominoTheme = {
token: {
colorPrimary: '#543FDE',
colorPrimaryHover: '#3B23D1',
colorPrimaryActive: '#311EAE',
colorText: '#2E2E38',
colorTextSecondary: '#65657B',
colorTextTertiary: '#8F8FA3',
colorSuccess: '#28A464',
colorWarning: '#CCB718',
colorError: '#C20A29',
colorInfo: '#0070CC',
colorBgContainer: '#FFFFFF',
colorBgLayout: '#FAFAFA',
colorBorder: '#E0E0E0',
fontFamily: 'Inter, Lato, Helvetica Neue, Helvetica, Arial, sans-serif',
fontSize: 14,
borderRadius: 4,
borderRadiusLG: 8,
},
components: {
Button: { primaryShadow: 'none', defaultShadow: 'none' },
Table: { headerBg: '#FAFAFA', rowHoverBg: '#F5F5F5' },
},
};
Top Navigation Bar
Height: 44px, Background: #2E2E38, Text: #FFFFFF. Use the Domino logo (height 32px). Primary actions on right. Only add nav items with real destinations.
Domino Logo: Reference assets/domino-logo.svg from this skill's directory (e.g. .claude/skills/domino-ui-design/assets/domino-logo.svg). The SVG is white text on transparent background, designed for the dark nav bar.
Charts (Highcharts)
Highcharts.setOptions({
colors: ['#543FDE', '#0070CC', '#28A464', '#CCB718', '#FF6543', '#E835A7', '#2EDCC4', '#A9734C'],
chart: { style: { fontFamily: 'Inter, Lato, Helvetica Neue, Arial, sans-serif' } },
});
Domino API Integration
Authentication
Re-acquire the access token on every API call (it expires quickly):
import requests, os
def get_auth_headers():
token = requests.get('http://localhost:8899/access-token').text.strip()
return {'Authorization': f'Bearer {token}'}
API Base Paths
Two separate APIs with different base paths:
| API | Base Path | Example |
|---|
| Platform APIs (public-api.json) | /api/ | {DOMINO_API_HOST}/api/jobs/beta/jobs?projectId=... |
| Legacy Platform APIs | /v4/ | {DOMINO_API_HOST}/v4/jobs?projectId=... |
| Governance APIs | /api/governance/v1/ | {CLUSTER_URL}/api/governance/v1/bundles?project_id=... |
Do NOT add /api/ prefix to v4 platform endpoints.
Environment Variables (available in Domino)
DOMINO_API_HOST, DOMINO_PROJECT_ID, DOMINO_PROJECT_NAME, DOMINO_PROJECT_OWNER
Do not add mock/fake data if the API isn't working. Prompt user to set env vars.
Running the App
Use relative URLs (not absolute) — Domino's nginx proxy modifies the root URL.
#!/bin/bash
uvicorn app:app --host 0.0.0.0 --port 8888
UX Design Rules
For detailed UX principles, writing guidelines, component patterns, and review checklists, read references/ux-design-rules.md.
Key rules to always follow:
- Empty states must be actionable — answer: What is this? Why is it empty? What can I do?
- Error messages must be human-readable with guidance on what to do next
- Disabled elements must explain why they're disabled (tooltip)
- Truncated table text must have tooltips
- Icon-only buttons must have tooltips
- Use sentence case for UI text (not Title Case)
- No exclamation points in UI copy
- Side panels should overlay, not push/crush main content
- Checkboxes should use positive framing — checked = ON/enabled, never checked = OFF/disabled
UX Review
When reviewing a Domino app UI, read references/ux-design-rules.md and check against the review checklists. Classify issues as High/Medium/Low severity.
Documentation Reference
Before 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.
Get the cluster base URL: $DOMINO_API_HOST (injected by Domino into every workspace, job, and app).
This skill uses two swagger docs:
Public API (covers /api/ endpoints — v1, v2, beta — no auth required):
curl "$DOMINO_API_HOST/assets/public-api.json"
Governance API (covers /api/governance/v1/ endpoints, requires bearer token):
TOKEN=$(curl -s http://localhost:8899/access-token)
CLUSTER_URL=$(echo $TOKEN | cut -d'.' -f2 | python3 -c "
import sys, base64, json, re
p = sys.stdin.read().strip()
p += '=' * (-len(p) % 4)
print(re.sub(r'/auth/realms/.*', '', json.loads(base64.b64decode(p))['iss']))
")
curl -H "Authorization: Bearer $TOKEN" "$CLUSTER_URL/api/governance/swagger/doc.json"
Public docs (workflow context and field explanations):
