القائمة
Raycast's UI design system. Use when building interfaces inspired by Raycast's aesthetic - light mode, Inter font, 4px grid.
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
استنادا إلى تصنيف SOC المهني
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/Sheshiyer/skill-clusters --skill raycast-ui-skillsيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
عرض SKILL.md
Arcplume runs Grok through the Grok Build CLI's own OAuth-authenticated session (grok login) for image generation, with strict preflight validation, secret-safe handling, and headless CLI-driven execution -- no separate XAI_API_KEY billing. Video falls back to the billed xAI API. USE WHEN a user wants to generate an image via a locally logged-in Grok Build CLI session, e.g. 'generate an image with grok', 'use grok build', or 'use my logged-in grok session'.
Shared reference for the Selemene cluster: the two report surfaces (deterministic Rust reports vs. narrative witness-pipeline readings), the @selemene/bridge CLI contract, the output manifest format, and non-prescriptive witnessing tone. USE WHEN deciding which Selemene surface to invoke or when routing between birth/compatibility/transit reports and solo/dyadic readings.
Route Selemene Engine tasks to the right surface: deterministic reports (birth/compatibility/transit) via selemene-core and the @selemene/bridge CLI, or narrative witness readings via selemene-report. USE WHEN the user wants anything under the Selemene/Noesis umbrella but has not named the exact surface.
| name | raycast-ui-skills |
| description | Raycast's UI design system. Use when building interfaces inspired by Raycast's aesthetic - light mode, Inter font, 4px grid. |
| license | MIT |
| metadata | {"author":"design-skills","version":"1.0.0","source":"https://raycast.com"} |
| cluster | raycast |
| version | 1.0.0 |
Opinionated constraints for building Raycast-style interfaces with AI agents.
Reference these guidelines when:
#DFDFDF as page background (surface-base)| Token | HEX | RGB | Usage |
|---|---|---|---|
surface-base | #DFDFDF | rgb(223,223,223) | Page background |
surface-raised | #08090B | rgb(8,9,11) | Cards, modals, raised surfaces |
text-primary | #636162 | rgb(99,97,98) | Headings, body text |
text-secondary | #A9A7A8 | rgb(169,167,168) | Secondary, muted text |
text-tertiary | #E99CA8 | rgb(233,156,168) | Additional text |
border-default | #282223 | rgb(40,34,35) | Subtle borders, dividers |
destructive | #E99CA8 | rgb(233,156,168) | Error states, delete actions |
Inter as primary font family64px / 700 for primary headings12px / 400 for body texttext-balance for headings and text-pretty for body texttabular-nums for numeric data| Style | Font | Size | Weight | Color | Count |
|---|---|---|---|---|---|
heading-1 | Inter | 64px | 700 | #F1DADF | 1 |
text-18px | Inter | 18px | 400 | #E99CA8 | 1 |
text-16px | Inter | 16px | 400 | #A5A5A7 | 1 |
text-15px | Inter | 15px | 400 | #A9A7A8 | 1 |
text-14px | Inter | 14px | 400 | #5C5C5C | 1 |
text-14px | Inter | 14px | 300 | #616163 | 1 |
text-14px | Inter | 14px | 400 | #5E5E60 | 1 |
text-14px | Inter | 14px | 400 | #626264 | 1 |
text-14px | Inter | 14px | 400 | #5D5E60 | 1 |
body | Inter | 12px | 400 | #5E5E5E | 1 |
Font Families:
Inter (used 21x)Font Sizes: 9px, 10px, 11px, 12px, 14px, 15px, 16px, 18px, 64px
Scale: 4px, 6px, 10px, 13px, 18px
h-screen, use h-dvh for full viewport heightsafe-area-inset for fixed elementssize-* for square elements instead of w-* + h-*| Variant | Background | Text | Border | Height | Radius |
|---|---|---|---|---|---|
| Ghost | transparent | #636162 | none | - | - |
2px outline with accent color (#5E6AD2)2px outline-offset#08090B background#08090B backgroundopacity: 0.5cursor: not-allowedAlertDialog for destructive or irreversible actionsinput or textarea elementsaria-label to icon-only buttonstransform, opacity)width, height, top, left, margin, padding)ease-out on entrance animations200ms for interaction feedbackprefers-reduced-motionblur() or backdrop-filter surfaceswill-change outside an active animationuseEffect for anything that can be expressed as render logic