agentleFS
Sign inStart free
revealui-studiorevealui-studio/revskills/skills/revealui-design/SKILL.md

revealui-design

Skill2 starsChanged 40 days agoMITView on GitHub

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.

We split this skill into the rules it gives an agent

4 rules. About 0 are common, 2 are distinctive, and 2 are very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈2

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 2

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Read the README.md file within this skill for canonical brand, voice, and visual foundations.

    line 13
  2. Distinctive:

    Read CLAUDE.md for brand orientation, open issues, voice rules, and substitution tables.

    line 14
  3. Very specific:

    Do not write JSX outside @revealui/* packages as a parallel kit.

    line 18
  4. Very specific:

    If creating visual artifacts (slides, mocks, throwaway prototypes), create static HTML files for the user to view.

    line 37

≈ “Common” is an estimate: at least 1 in 5 of the 308,232 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

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.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

Reviews can't be read right now.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free