New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Scalar Design System

by scalar in scalar/scalar

Scalar's design system — design tokens, theming (@scalar/themes), CSS variables, and the @scalar/components library.

MITAuto-check passedFrontend & Design

Install Scalar Design System

skills CLI
$ npx skills add scalar/scalar --skill scalar-design-system -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install scalar/scalar scalar-design-system --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/scalar/scalar.git skills-src && mkdir -p .claude/skills && cp -r skills-src/packages/themes/skills/scalar-design-system .claude/skills/scalar-design-system && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
scalar-design-system
GitHub stars
16k
Token cost
~2.7k tokens
SKILL.md length
1,129 words
Files
4 (incl. references)
Skills in repo
7
Repo updated
First seen
Licence
MIT

At a glance

Scalar's design system — design tokens, theming (@scalar/themes), CSS variables, and the @scalar/components library.

  • Works in 2 steps: Designing Scalar UI in Paper… → Turning a Paper design into code…
  • Implementing Scalar UI
  • SKILL.md covers Brand essentials, Foundations, Design tokens (default theme) and Tailwind class mapping, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Scalar Design System is an agent skill from scalar/scalar. Scalar's design system — design tokens, theming (@scalar/themes), CSS variables, and the @scalar/components library. Use when designing or implementing Scalar UI, especially with Paper (code-to-design / design-to-code), so output matches real Scalar tokens, colors, typography, spacing, and components instead of generic defaults.

Its SKILL.md is about 2.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files, including reference files (for example `references/components.md`, `references/paper.md` and `references/tokens.md`).

It sits in Frontend & Design, covering Design tokens, Design systems and Design to code. It works with Tailwind CSS and OpenAPI. The repository describes itself as: Scalar is an open-source API platform: 🌐 Modern REST API Client 📖 Beautiful API References ✨ 1st-Class OpenAPI/Swagger Support. The licence is MIT.

When your agent uses it

  • Implementing Scalar UI
  • Especially with Paper (code-to-design / design-to-code)
  • So output matches real Scalar tokens
  • Components instead of generic defaults

Example prompts

  • “/scalar-design-system”

Workflow steps

2 steps, taken from the first numbered list in SKILL.md.

  1. Designing Scalar UI in Paper (code-to-design) — so a design uses Scalar's real palette, type, spacing, and component shapes from the first…
  2. Turning a Paper design into code (design-to-code) — so the output maps back to the correct --scalar-* variables, Tailwind classes, and…

What it can do on your machine

Read from SKILL.md and the folder at commit b5492be. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Scalar Design System loads about 2.7k tokens when it runs, and up to ~8.1k if it reads all its reference files. Until then it costs about 88 tokens; SKILL.md has 1,129 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~88
When it runs · the whole SKILL.md, loaded when a task matches
~2.7k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~8.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from scalar/scalar at commit b5492be, republished under its MIT licence (© scalar). 1,129 words, ~2,651 tokens.

Download SKILL.mdSave it as .claude/skills/scalar-design-system/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.
name
scalar-design-system
description
Scalar's design system — design tokens, theming (@scalar/themes), CSS variables, and the @scalar/components library. Use when designing or implementing Scalar UI, especially with Paper (code-to-design / design-to-code), so output matches real Scalar tokens, colors, typography, spacing, and components instead of generic defaults.

Scalar Design System

This skill is Scalar's design system, distilled for two jobs:

  1. Designing Scalar UI in Paper (code-to-design) — so a design uses Scalar's real palette, type, spacing, and component shapes from the first stroke, with no invented "design brief."
  2. Turning a Paper design into code (design-to-code) — so the output maps back to the correct --scalar-* variables, Tailwind classes, and @scalar/components.

It complements the code-to-design and design-to-code plugin skills; this one supplies the Scalar-specific knowledge they lack.

Prerequisite for Paper work: Paper Desktop must be running with a file open. If the Paper MCP connection fails, ask the user to open Paper Desktop first.

The values below are a curated snapshot of the default theme — enough to design and implement directly. For the full variable catalog, all 13 theme presets, and the complete component list, read the reference files:

Brand essentials

Scalar's look is a clean, modern developer-tool aesthetic: high-contrast typography, restrained color, hairline borders, and small radii. Treat it as a product/clarity system, not a marketing/expressive one.

  • Type: Inter for UI and prose, JetBrains Mono for code.
  • Accent: #0099ff (one deliberate accent; everything else is neutral).
  • Mode: light mode by default (#fff ground, #1b1b1b text).
  • Borders: hairline 0.5px, color #dfdfdf.
  • Radii: small — 3px default, 6px large, 8px extra-large.
  • Shape: information lives directly on surfaces; reserve cards/elevation for genuine grouping.

Foundations

  • Scoping: every Scalar style lives under the .scalar-app class. Any markup must be inside an element with class="scalar-app".
  • Light / dark: a .light-mode or .dark-mode class on a container selects the value set. Default to .light-mode.
  • Layers: themes load in two CSS layers — scalar-base (base variables + default theme) and scalar-theme (preset overrides). Unlayered CSS overrides both.

Design tokens (default theme)

Reference --scalar-* variables in CSS; in components, prefer the Tailwind classes (next section).

Color — text (--scalar-color-*)

VariableLightDarkRole
--scalar-color-1#1b1b1b#e7e7e7Primary text
--scalar-color-2#707070#a4a4a4Secondary text
--scalar-color-3#8e8e8e#797979Muted text
--scalar-color-accent#0099ff#00aeffAccent / interactive

Color — background (--scalar-background-*)

VariableLightDarkRole
--scalar-background-1#fff#0f0f0fBase surface
--scalar-background-2#f6f6f6#1a1a1aRaised surface / hover
--scalar-background-3#e7e7e7#272727Highest contrast surface
--scalar-background-accent#8ab4f81f#3ea6ff1fTinted accent fill

Borders & shadows

  • --scalar-border-color — #dfdfdf (light) / #2d2d2d (dark); --scalar-border-width — 0.5px.
  • --scalar-shadow-1 (subtle), --scalar-shadow-2 (lifted).

Semantic colors (--scalar-color-{green,red,yellow,blue,orange,purple}, plus --scalar-color-danger / --scalar-color-alert and matching --scalar-background-*). Light: green #069061, red #ef0006, yellow #edbe20, blue #0072bd, orange #ff5800, purple #5203d1.

Radii: --scalar-radius 3px, --scalar-radius-md 3px, --scalar-radius-lg 6px, --scalar-radius-xl 8px, --scalar-radius-2xl 12px, --scalar-radius-3xl 16px, --scalar-radius-full pill. All derive from --scalar-radius, so overriding it on :root rescales every corner, and 0 makes the interface square. Everything except -full clamps to --scalar-radius-max (20px) so a large radius cannot swallow a container's content. Reach for --scalar-radius-md rather than --scalar-radius on anything that holds content.

Typography

  • Content sizes: heading-1 24px, heading-2 20px, heading-3–6 16px, paragraph 16px, small 14px, mini 13px, micro 12px.
  • UI app sizes: --scalar-font-size-1…7 = 21, 16, 14, 13, 12, 12, 10 px.
  • Line heights: --scalar-line-height-1…5 = 32, 24, 20, 18, 16 px.
  • Weights: regular 400, semibold 500, bold 600.

Tailwind class mapping

Scalar maps --scalar-* variables onto a custom Tailwind theme. In components, use these classes rather than raw variables. Source of truth: @scalar/themes/tailwind.css.

  • Background: bg-b-1, bg-b-1.5, bg-b-2, bg-b-3, bg-b-accent, bg-b-btn, bg-b-tooltip, bg-b-danger, bg-b-alert.
  • Text: text-c-1, text-c-2, text-c-3, text-c-accent, text-c-ghost, text-c-disabled, text-c-btn, text-c-tooltip, text-c-danger, text-c-alert.
  • Themed: text-green / bg-green, plus red, yellow, blue, orange, purple.
  • Border: border (uses --scalar-border-color, default width 0.5px); shadow-border for an inset hairline, or inset-shadow-border to stack it with a shadow-*.
  • Shadow: shadow / shadow-md (shadow-1), shadow-lg (shadow-2), shadow-sm.
  • Radius: rounded & rounded-md (3px), rounded-lg (6px), rounded-xl (8px), rounded-2xl (12px), rounded-3xl (16px), rounded-full (pill). No rounded-sm.
  • Type: font-sans (Inter), font-code (JetBrains Mono); sizes text-3xs 10, text-xxs/text-xs 12, text-sm 13, text-base 14, text-lg 16, text-xl 21; weights font-normal 400, font-medium 500, font-bold 600.
  • Spacing: base unit is 4px, so p-1 = 4px, p-2 = 8px, gap-3 = 12px, etc. h-header = 48px.
  • Breakpoints: xs 400, sm 600, md 800, lg 1000, xl 1200.
Show full SKILL.md (456 more words)Show less

Components — @scalar/components

A Vue 3 library (34 components) scoped to .scalar-app, styled with the Tailwind classes above via cva variants, and customizable through Tailwind class overrides (useBindCx). Import from the subpath, not the barrel:

ts
import { ScalarButton } from '@scalar/components/button'
import { ScalarIconAcorn } from '@scalar/icons'

Headline components (full list in references/components.md):

  • Buttons & inputs: ScalarButton (variant solid | outlined | ghost | gradient | danger; size xs | sm | md), ScalarIconButton, ScalarTextInput, ScalarTextArea, ScalarToggle, ScalarCheckbox, ScalarSearchInput, ScalarFileUpload.
  • Selection / floating: ScalarCombobox, ScalarListbox, ScalarDropdown, ScalarPopover, ScalarTooltip (all positioned with Floating UI).
  • Overlays: ScalarModal (sizes xxs–full).
  • Layout / nav: ScalarHeader (+ ScalarHeaderColumn), ScalarSidebar, ScalarMenu.
  • Content: ScalarCard, ScalarCodeBlock, ScalarMarkdown, ScalarForm, ScalarLoading.

Icons come from @scalar/icons (1,500+ Phosphor icons as ScalarIcon<Name> components). Size with size-* (size-4, size-5) and color with text-*. ScalarButton takes an :icon prop.

Working in Paper

code-to-design — build Scalar UI in Paper

Paper writes literal HTML/CSS to the canvas with px sizes and hex colors, so translate Scalar tokens into concrete values:

  • Ground #fff, text #1b1b1b (secondary #707070), accent #0099ff, borders 0.5px #dfdfdf, radii 3–8px.
  • Inter for everything except code (JetBrains Mono); body text 16px, small 14px.
  • Spacing on a 4px grid (4, 8, 12, 16, 24…).
  • Default to light mode. Mirror the real component shapes (buttons, cards, sidebar rows) using these values.
  • Because the design system is specified here, skip Paper's invented design brief and design directly in Scalar's system.
design-to-code — turn a Paper design into Scalar code
  1. Extract exact values from Paper with get_jsx / get_computed_styles / get_fill_image — never read sizes or colors off a screenshot.
  2. Map values back to tokens / Tailwind: e.g. #0099ff → --scalar-color-accent / text-c-accent; #fff → bg-b-1; #1b1b1b → text-c-1; 0.5px #dfdfdf border → border; 3px radius → rounded; 16px Inter → text-lg font-sans. See references/paper.md for the full table.
  3. Map elements to components: button → ScalarButton (pick variant + size); card → ScalarCard; menu/select → ScalarDropdown / ScalarListbox / ScalarCombobox; dialog → ScalarModal; icon → an @scalar/icons ScalarIcon*. Import each from its subpath.
  4. Where the component docs are (to confirm a component, its props, and variants):
    • @scalar/components package.json exports — the subpath → component map.
    • The bundled TypeScript declarations (*.d.ts) shipped with each component — props, variants, and JSDoc.
    • The @scalar/components Storybook — live variants and controls.
  5. Output conventions: wrap rendered output in .scalar-app; override styles with Tailwind classes via useBindCx (do not hand-write CSS); follow the vue-components skill for component code style.

Source of truth

When exact or current values matter, go to the package that owns them — read these from node_modules/<package>/ (or the package on npm):

  • Tokens & theming — @scalar/themes: the compiled variables and the Tailwind @theme mapping ship as @scalar/themes/style.css and @scalar/themes/tailwind.css; the JS API (getThemeStyles, presets, themeIds, ThemeId) is exported from the package root (@scalar/themes).
  • Components — @scalar/components: the subpath import map is in the package's package.json exports; the full export list and per-component props/variants live in the bundled type declarations (*.d.ts).
  • Icons — @scalar/icons: the ScalarIcon* set is exported from the package root (@scalar/icons).

© scalar, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 3 other files (references) in packages/themes/skills/scalar-design-system of scalar/scalar.

  • SKILL.md
  • references/components.md
  • references/paper.md
  • references/tokens.md

Open the folder on GitHubat commit b5492be

Compare with similar skills

Scalar Design System next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Scalar Design System compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Scalar Design System this skillscalar/scalar16k—~2.7kAutomated safety check: PassMIT
Tailwind V4 Shadcnever-works/ever-works1622 repos~3.8kAutomated safety check: PassMIT
Refactoring UIwondelai/skills2.4k—~3.9kAutomated safety check: PassMIT
Design System Generatemohitagw15856/pm-claude-skills1.4k—~1.7kAutomated safety check: PassMIT
Design SystemOhh-889/skyroc79511 repos~1.7kAutomated safety check: PassMIT
Tailwind CSS Patternsever-works/ever-works1623 repos~1.6kAutomated safety check: NotesAGPL-3.0

Similar skills

  • Tailwind V4 Shadcn

    ever-works/ever-works

    Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React.

    162 GitHub starsUsed in 2 repos~3.8k tokens
    Frontend & DesignAuto-check passed

  • Refactoring UI

    wondelai/skills

    Audit and fix visual hierarchy, spacing, color, and depth in web UIs.

    2.4k GitHub stars~3.9k tokensUpdated 29 days ago
    Frontend & DesignAuto-check passed

  • Design System Generate

    mohitagw15856/pm-claude-skills

    Generate a complete, accessibility-checked design system from scratch — colour ramps, type scale, spacing, elevation, and exports for CSS, Tailwind, design tokens, Figma, VS Code and PowerPoint.

    1.4k GitHub stars~1.7k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Design System

    Ohh-889/skyroc

    Token architecture, component specifications, and slide generation.

    795 GitHub starsUsed in 11 repos~1.7k tokens
    Frontend & DesignAuto-check passed

  • Tailwind CSS Patterns

    ever-works/ever-works

    Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices.

    162 GitHub starsUsed in 3 repos~1.6k tokens
    Frontend & DesignAuto-check: notes

  • UI Design System

    try-works/role-model

    React UI component systems with TailwindCSS + Radix + shadcn/ui.

    118 GitHub stars~5k tokensUpdated today
    Frontend & DesignAuto-check passed

More from scalar/scalar

  • Cloud Agents Starter

    scalar/scalar

    Minimal starter runbook for cloud agents to install dependencies, run packages, execute tests, and troubleshoot the Scalar monorepo quickly.

    16k GitHub stars~1.4k tokensUpdated today
    Auto-check passed

  • Mock Server

    scalar/scalar

    Build, customize, and troubleshoot OpenAPI mock servers with @scalar/mock-server, including x-handler, x-seed, authentication, and Docker.

    16k GitHub stars~1.2k tokensUpdated today
    Auto-check passed

  • Openapi Glossary

    scalar/scalar

    Use consistent OpenAPI terminology and definitions when writing documentation, educational material, and tooling guidance.

    16k GitHub stars~3.3k tokensUpdated today
    Auto-check passed

  • Scalar Docs

    scalar/scalar

    Skill for writing and updating scalar.config.json — Scalar Docs configuration reference for users and LLMs.

    16k GitHub stars~3.6k tokensUpdated today
    Auto-check passed

  • Typescript

    scalar/scalar

    Write clear, predictable TypeScript and Vue TypeScript code with strong typing, maintainability, and consistent documentation conventions.

    16k GitHub stars~1.1k tokensUpdated today
    Auto-check passed

  • Vue Components

    scalar/scalar

    Build Vue 3 components with TypeScript and Tailwind using clean structure, composable logic, accessibility, and maintainable patterns.

    16k GitHub stars~886 tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Scalar Design System

What does Scalar Design System do?

Scalar's design system — design tokens, theming (@scalar/themes), CSS variables, and the @scalar/components library. Scalar Design System is an agent skill from scalar/scalar. Scalar's design system — design tokens, theming (@scalar/themes), CSS variables, and the @scalar/components library.

When should I use Scalar Design System?

Scalar Design System fits situations like: implementing Scalar UI; especially with Paper (code-to-design / design-to-code); so output matches real Scalar tokens; components instead of generic defaults.

How do I install Scalar Design System in Claude Code?

Run `npx skills add scalar/scalar --skill scalar-design-system -a claude-code`. Or copy the skill folder (packages/themes/skills/scalar-design-system in scalar/scalar) into .claude/skills/scalar-design-system in your project. Claude Code loads it when a task matches its description.

How do I install Scalar Design System in Codex?

Run `npx skills add scalar/scalar --skill scalar-design-system -a codex`. Or copy the skill folder (packages/themes/skills/scalar-design-system in scalar/scalar) into .agents/skills/scalar-design-system in your project. Codex loads it when a task matches its description.

Can I use Scalar Design System in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add scalar/scalar --skill scalar-design-system -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/scalar-design-system, .gemini/skills/scalar-design-system, .github/skills/scalar-design-system and .opencode/skills/scalar-design-system in your project.

What does Scalar Design System need to run?

SKILL.md names no scripts, command-line tools or credentials: Scalar Design System is instructions for the agent only.

Does Scalar Design System access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Scalar Design System safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Scalar Design System use?

Scalar Design System is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Scalar Design System use?

About 2.7k tokens (SKILL.md is roughly 11k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 5.5k tokens, read only when the agent opens those files.

What are the alternatives to Scalar Design System?

Skills that share tags, products or a category with Scalar Design System: Tailwind V4 Shadcn (ever-works/ever-works, 162 stars), Refactoring UI (wondelai/skills, 2.4k stars), Design System Generate (mohitagw15856/pm-claude-skills, 1.4k stars) and Design System (Ohh-889/skyroc, 795 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Scalar Design System?

scalar (a GitHub organization) maintains it in scalar/scalar, which has 16,249 GitHub stars. The repository holds 7 skills in this directory. The repository was last updated on October 10, 2026.

Source: scalar/scalar on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.