Domino Ui Design

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/[email protected]/dist/antd.min.js"></script><link href="https://unpkg.com/[email protected]/dist/reset.css" rel="stylesheet"><script src="https://unpkg.com/[email protected]/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',          // Purple    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:

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/bashuvicorn 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 [blocked].

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 [blocked] 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"# Browser UI: $DOMINO_API_HOST/assets/lib/swagger-ui/index.html?url=/assets/public-api.json#/

Governance API (covers /api/governance/v1/ endpoints, requires bearer token):

TOKEN=$(curl -s http://localhost:8899/access-token)# Governance is not routed through $DOMINO_API_HOST. Derive the external cluster URL# from the JWT iss claim — works in any workspace type.CLUSTER_URL=$(echo $TOKEN | cut -d'.' -f2 | python3 -c "import sys, base64, json, rep = 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"# Browser UI (must be logged in): $CLUSTER_URL/api/governance/swagger/index.html

Public docs (workflow context and field explanations):

• API Guide