メニュー
Guide for using design tokens in the Sculptor frontend. Use when writing or reviewing CSS/SCSS to pick correct token variables.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
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