القائمة
Guide for using design tokens in the Sculptor frontend. Use when writing or reviewing CSS/SCSS to pick correct token variables.
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/imbue-ai/sculptor --skill frontend-design-tokensيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
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).
Cut a new Sculptor release candidate from main: run `just cut-release` (which creates the release/sculptor-vX.Y.0 branch at X.Y.0rc1, pushes the tag that triggers the RC build, and opens a PR bumping main to the next .dev0), then land the version-bump PR and babysit the RC build up to its manual approval gate. Handles the colocated jj + git working-copy setup and the CI flake/outage/zombie recovery playbook. Stops AT the approval gate — never approves it for you. Use when asked to "cut a release", "cut an RC", or start a new Sculptor release.
Promote a QA'd Sculptor release candidate to a full production release: verify the RC build is green and has been QA'd, then from the release branch run `just promote-release` (which strips the rcN suffix, commits X.Y.0, and pushes the sculptor-vX.Y.0 tag that triggers the production build) and babysit that build up to its manual approval gate. Handles the colocated jj + git working copy and the CI flake/outage/zombie recovery playbook. Stops AT the approval gate — never approves it for you. Use when asked to "promote a release", "ship the release", or turn an RC into the real release.
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| 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