Revealui design
Use this skill to generate well-branded interfaces and assets for RevealUI Studio, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, and brand voice rules for the RevealUI design system (Cobalt brand, dark-first OKLCH tokens). Read README.md for the full canonical doc and CLAUDE.md for brand orientation, voice rules, and assessment summaries.From its SKILL.md
npx -y skills add RevealUIStudio/revskills --skill revealui-designAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its file declares
Copied from the file, not written here
The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.
SKILL.md
2.6 KB, as published. Nobody here has run it
Read the README.md file within this skill for canonical brand, voice, and visual foundations. Read CLAUDE.md for brand orientation, open issues, voice rules, and substitution tables.
For canonical tokens, read from @revealui/tokens/design-context/ — a committed, CI-drift-gated pack generated from the revealui repo's packages/tokens/src/tokens.css. Do not rely on local token snapshots.
Do not write JSX outside @revealui/* packages as a parallel kit. Production
and prototype React must compose @revealui/presentation in TypeScript
(.tsx). The old Babel-in-browser ui_kits/**/*.jsx files are retired
(GAP-479). For throwaway visual artifacts, emit static HTML (no JSX syntax).
Tokens come from @revealui/tokens/design-context/.
RevealUI is dual-surface:
- Marketing site (revealui.com) — cool paper + cobalt-ink + amber-accent; craft bar: calm, receipt signature, no tables/matrix cards/inverted pricing
- Admin / Studio (admin.revealui.com) — dark, OKLCH-based
--rvui-*tokens, Cobalt brand
Brand: Cobalt — --rvui-brand: oklch(0.36 0.190 240) on light surfaces, oklch(0.58 0.150 240) on dark (AA-compliant). Accent: Solar Amber oklch(0.80 0.165 85).
Type stack: Inter (sans), Inter Tight (display, 800 weight, -0.02em tracking), JetBrains Mono (mono, ligatures OFF).
Marketing signatures:
- Receipt motif + foil: "If an agent did it, there's a receipt."
- CLI pill on GetStarted:
npx create-revealui@latest my-app(not in the hero) - Primitives: People, Content, Offers, Payments, Agents
If creating visual artifacts (slides, mocks, throwaway prototypes), create static HTML files for the user to view. Build from @revealui/presentation in TypeScript, or from token values in the design-context pack. Do not add .jsx files.
If the user invokes this skill without other guidance, ask what they want to build or design (marketing landing? admin dashboard? blog post template? slide deck?), ask some questions, and act as an expert designer who outputs HTML artifacts or production code, depending on the need.