Menu
Guide for using design tokens in the Sculptor frontend. Use when writing or reviewing CSS/SCSS to pick correct token variables.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Build or modify a Sculptor extension โ a runtime ESM module loaded into the Sculptor UI. Use when asked to write an extension (or "plugin") for Sculptor, add a panel, overlay, workspace widget, home view, or settings UI to Sculptor, or to iterate on an extension with `sculpt extension`. Works from any repo; this file is a self-contained reference (the Sculptor source code is optional).
Interact with Sculptor programmatically using the sculpt CLI. Use this skill when using `sculpt`, or when designing or planning a workflow that would benefit from understanding the structural capabilities of `sculpt` (workspaces, agents, isolation, and how code flows between them).
Live, hot-reloading preview of the Sculptor WEB frontend from a phone or any browser, served through the OpenHost nginx /proxy front. ONLY relevant when running INSIDE the openhost-deployed Sculptor (the container fronted by nginx on :5050, reachable at https://sculptor.<zone>/) โ NOT for local or Electron dev. Frontend-only: it reuses the single shared backend, so it previews UI/frontend changes, not a per-workspace backend. Invoke when iterating on the web UI and wanting to see it live in a browser through the OpenHost SSO front.
How this OpenHost-hosted Sculptor environment works โ storage and what survives restarts, where/how to add repositories and authorize gh, and the /proxy/<port>/ capability for previewing loopback web apps from a browser. ONLY relevant when running inside an OpenHost deployment (detect via the OPENHOST_* env vars, e.g. OPENHOST_APP_NAME). Ships with the deploy image and is refreshed every release.
Test a pull request by creating a shallow clone at the PR's commit and launching Sculptor. Use when you need to test changes from a specific PR in isolation.
QA the Sculptor mobile web UI on a real iOS Simulator, driven headlessly from a Mac. A single CLI boots a notched iPhone, launches the local frontend server (parsing its port โ no hardcoding), opens the app in MobileSafari, taps/swipes via idb, and screenshots each step. Includes the Add-to-Home-Screen standalone flow โ the only way to verify notch / status-bar / home-indicator safe-area rendering (env(safe-area-inset-*) is 0 everywhere except real iOS). Use when visually verifying mobile/responsive changes on an iPhone.
| name | frontend-design-tokens |
| description | Guide for using design tokens in the Sculptor frontend. Use when writing or reviewing CSS/SCSS to pick correct token variables. |
When writing CSS/SCSS in the Sculptor frontend, use design tokens instead of hardcoded values.
Read the source of truth directly:
sculptor/frontend/node_modules/@radix-ui/themes/tokens/base.css
This file contains all Radix CSS variables including:
--space-1 through --space-9 (spacing)--font-size-1 through --font-size-9 (typography)--font-weight-light, --font-weight-regular, --font-weight-medium, --font-weight-bold--radius-1 through --radius-6, --radius-full (border radius)For color tokens, read the individual color files:
sculptor/frontend/node_modules/@radix-ui/themes/tokens/colors/*.css
These provide 12-step scales (e.g., --gray-1 through --gray-12, --accent-1 through --accent-12).
These are all loaded via @radix-ui/themes/styles.css which is imported in Main.tsx.
Read our custom token definitions:
sculptor/frontend/src/styles/tokens.css
This defines tokens for things Radix does not provide.
Global overrides to Radix component styles live in:
sculptor/frontend/src/styles/radix-overrides.css
Brand colors, utility classes, and theming live in:
sculptor/frontend/src/index.css
<Flex gap="2">) over var() when possiblevar() in SCSS modules for values that can't be expressed through props/* Bad */
.card {
padding: 16px;
font-size: 14px;
border-radius: 8px;
transition: opacity 0.2s ease;
color: #3d63dd;
}
/* Good */
.card {
padding: var(--space-4);
font-size: var(--font-size-2);
border-radius: var(--radius-4);
transition: opacity var(--duration-normal) var(--ease-default);
color: var(--accent-9);
}
Run to find style violations:
cd "sculptor/frontend" && npm run lint:styles