Stats
Actions
Tags
From dominodatalab
Builds Domino-styled web apps with FastAPI backend and Ant Design 5.x frontend via CDN. Covers theme tokens, Highcharts, auth, routing, and UX best practices for the Domino Design System.
How this skill is triggered — by the user, by Claude, or both
Slash command
/dominodatalab:domino-ui-designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
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.
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.
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;
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' },
},
};
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.
Highcharts.setOptions({
colors: ['#543FDE', '#0070CC', '#28A464', '#CCB718', '#FF6543', '#E835A7', '#2EDCC4', '#A9734C'],
chart: { style: { fontFamily: 'Inter, Lato, Helvetica Neue, Arial, sans-serif' } },
});
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}'}
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.
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.
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
For detailed UX principles, writing guidelines, component patterns, and review checklists, read references/ux-design-rules.md.
Key rules to always follow:
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.
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, 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"
# Browser UI (must be logged in): $CLUSTER_URL/api/governance/swagger/index.html
Public docs (workflow context and field explanations):
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Searches MemPalace before answering questions about past work, people, projects, or prior decisions. Returns verbatim stored content instead of guessing from model memory.
npx claudepluginhub anthropics/claude-plugins-official --plugin dominodatalab