New: 97,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

Emcn Design Review

by simstudioai in simstudioai/sim

Review UI code for alignment with the emcn design system — components, tokens, patterns, and conventions

Apache-2.0Auto-check passedFrontend & Design

Install Emcn Design Review

skills CLI
$ npx skills add simstudioai/sim --skill emcn-design-review -a claude-code

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

GitHub CLI
$ gh skill install simstudioai/sim emcn-design-review --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/simstudioai/sim.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/emcn-design-review .claude/skills/emcn-design-review && 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
emcn-design-review
GitHub stars
30k
Token cost
~1k tokens
SKILL.md length
416 words
Files
1
Skills in repo
40
Repo updated
First seen
Licence
Apache-2.0

At a glance

Review UI code for alignment with the emcn design system — components, tokens, patterns, and conventions

  • Works in 4 steps: Read the emcn public barrel at… → Read apps/sim/app/_styles/globals.css… → Analyze the specified scope against… → …
  • Tasks that involve Design review and critique
  • SKILL.md covers Context, Steps, Imports and Design Tokens, plus 6 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Emcn Design Review is an agent skill from simstudioai/sim. Review UI code for alignment with the emcn design system — components, tokens, patterns, and conventions

Its SKILL.md is about 1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Design review and critique, Design systems and Design tokens. The repository describes itself as: Sim is the collaborative workspace to build, deploy, and monitor AI agents and workflows. Used by 100,000+ builders. The licence is Apache-2.0.

When your agent uses it

  • Tasks that involve Design review and critique
  • Tasks that involve Design systems
  • Tasks that involve Design tokens

Example prompts

  • “/emcn-design-review”

Workflow steps

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

  1. Read the emcn public barrel at packages/emcn/src/index.ts (re-exports components, Calendar, Table*, and icons) to know what's available…
  2. Read apps/sim/app/_styles/globals.css for CSS variable tokens
  3. Analyze the specified scope against every rule below
  4. If fix=true, apply the fixes. If fix=false, propose the fixes without applying.

What it can do on your machine

Read from SKILL.md and the folder at commit 546d4e7. 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.

    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

Emcn Design Review loads about 1k tokens when it runs. Until then it costs about 31 tokens; SKILL.md has 416 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~31
When it runs · the whole SKILL.md, loaded when a task matches
~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 simstudioai/sim at commit 546d4e7, republished under its Apache-2.0 licence (© simstudioai). 416 words, ~1,033 tokens.

Download SKILL.mdSave it as .claude/skills/emcn-design-review/SKILL.md (or your agent's skills folder).
name
emcn-design-review
description
Review UI code for alignment with the emcn design system — components, tokens, patterns, and conventions
argument-hint
[scope] [fix=true|false]

EMCN Design Review

Arguments:

  • scope: what to review (default: your current changes). Examples: "diff to main", "PR #123", "src/components/", "whole codebase"
  • fix: whether to apply fixes (default: true). Set to false to only propose changes.

User arguments: $ARGUMENTS

Context

This codebase uses emcn, a custom component library built on Radix UI primitives with CVA variants and CSS variable design tokens. All UI must use emcn components and tokens.

Steps

  1. Read the emcn public barrel at packages/emcn/src/index.ts (re-exports components, Calendar, Table*, and icons) to know what's available; for the full icon set read packages/emcn/src/icons/index.ts
  2. Read apps/sim/app/_styles/globals.css for CSS variable tokens
  3. Analyze the specified scope against every rule below
  4. If fix=true, apply the fixes. If fix=false, propose the fixes without applying.

Imports

  • Components, cn, and tokens from the @sim/emcn barrel, never component subpaths
  • Icons from @sim/emcn/icons

Design Tokens

Use CSS variable pattern (text-[var(--text-body)]), never Tailwind semantics (text-muted-foreground) or hardcoded colors (text-gray-500, #333).

Text: --text-primary, --text-secondary, --text-tertiary, --text-muted, --text-body (canonical value text), --text-icon, --text-placeholder, --text-subtle, --text-inverse, --text-error Surfaces: --bg, --surface-1 through --surface-7, --surface-hover, --surface-active Borders: --border (--border-1/--border-muted are legacy aliases resolving to it — flag new uses) Brand/accent: --brand-secondary, --brand-accent Z-Index: --z-dropdown (100), --z-toast (150), --z-modal (200), --z-popover (300), --z-tooltip (400), --z-takeover (500), --z-shell-gate (600) Shadows: shadow-subtle, shadow-medium, shadow-overlay, shadow-card Badges: --badge-* semantic families (success/error/gray/blue/purple/orange/amber/teal/cyan/pink, each with -bg/-text)

Buttons and chips

Header/action chrome is Chip/ChipLink (variants primary, destructive, outline, border, border-shadow, bare). Selection and toggles use the active prop, never a variant. A single-resource Delete is a plain chip behind ChipConfirmModal; destructive is only for at-scale actions (.claude/rules/sim-settings-pages.md "Deleting a resource"). Button is only for icon-only toolbar controls (ghost/quiet, size='icon').

Show full SKILL.md (146 more words)Show less

Delete/Remove Confirmations

Use ChipConfirmModal (title "Delete/Remove {ItemType}", confirm={{ label, onClick }}, which defaults to destructive). Keep its fail-safe defaultAction='dismiss' per .claude/rules/emcn-components.md "Modal keyboard defaults". Put irreversible-consequence copy in text.

Toast

toast.success(), toast.error(), toast() from @sim/emcn. Never custom notification UI.

Badges

red=error/failed, gray-secondary=metadata/roles, type=type annotations, green=success/active, gray=neutral, amber=processing, orange=paused, blue=info. Use dot prop for status indicators.

Icons

Default: size-[14px]. Color: text-[var(--text-icon)]. Scale: 14px > 16px > 12px > 20px. Use the size-* shorthand — flag h-[Npx] w-[Npx] and h-N w-N pairs as refactor targets.

Anti-patterns to flag

  • Raw <button>/<input>, or legacy Input/Textarea/Modal, instead of the canonical chip components (ChipInput/ChipTextarea/ChipModal)
  • Hand-rolled field rows inside a ChipModalBody instead of ChipModalField
  • Hardcoded colors (text-gray-*, #hex, rgb())
  • Tailwind semantics (text-muted-foreground) instead of CSS variables
  • Template literal className instead of cn()
  • Inline styles for colors/static values (dynamic values OK)
  • Importing from emcn subpaths instead of barrel
  • Arbitrary z-index instead of tokens
  • Wrong button variant for action type

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

Files

Just SKILL.md in .agents/skills/emcn-design-review of simstudioai/sim.

Open the folder on GitHubat commit 546d4e7

Compare with similar skills

Emcn Design Review 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.

Emcn Design Review compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Emcn Design Review this skillsimstudioai/sim30k—~1kAutomated safety check: PassApache-2.0
Design System Compliancereticlehq/reticle1.2k—~1kAutomated safety check: PassApache-2.0
Design Standardsrampstackco/claude-skills935—~2.4kAutomated safety check: PassMIT
Figma Design System Builderwarpdotdev/warp65k2 repos~4.4kAutomated safety check: PassAGPL-3.0
Figma use_figma Plugin API Ruleswarpdotdev/warp65k4 repos~4.4kAutomated safety check: PassAGPL-3.0
Design SystemOhh-889/skyroc79511 repos~1.7kAutomated safety check: PassMIT

Similar skills

  • Design System Compliance

    reticlehq/reticle

    Check that the UI you actually rendered uses the design system, by reading computed styles in the running app against the project's design tokens.

    1.2k GitHub stars~1k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Design Standards

    rampstackco/claude-skills

    Apply production-grade design standards when building or reviewing pages, components, or UI.

    935 GitHub stars~2.4k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Figma Design System Builder

    warpdotdev/warp

    Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.

    65k GitHub starsUsed in 2 repos~4.4k tokens
    Frontend & DesignAuto-check passed

  • Figma use_figma Plugin API Rules

    warpdotdev/warp

    Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.

    65k GitHub starsUsed in 4 repos~4.4k tokens
    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

  • Design Dna

    zanwei/design-dna

    Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…

    1.9k GitHub starsUsed in 1 repo~2.1k tokens
    Frontend & DesignAuto-check passed

More from simstudioai/sim

All 40 skills in this repo

  • Sim Helm

    simstudioai/sim

    Install, upgrade, and operate the Sim Helm chart on Kubernetes.

    30k GitHub stars~2.2k tokensUpdated today
    Auto-check passed

  • Add Column Type

    simstudioai/sim

    Add a new table column type to Sim — registry entry, icon, storage shape, coercion, and the behavioral hooks the grid and API read.

    30k GitHub stars~2.9k tokensUpdated today
    Auto-check passed

  • Add Enrichment

    simstudioai/sim

    Add a code-defined table enrichment (registry entry) under apps/sim/enrichments/ backed by an ordered provider cascade, ensuring every provider tool it calls has hosted-key support.

    30k GitHub stars~2.2k tokensUpdated today
    Auto-check passed

  • Add Hosted Key

    simstudioai/sim

    Add hosted API key support to a tool so Sim provides the key (metered and billed to the workspace) when a user has not brought their own.

    30k GitHub stars~3.4k tokensUpdated today
    Auto-check passed

  • Add Managed CLI

    simstudioai/sim

    Add or upgrade a curated, immutable managed CLI for Sim Function sandboxes, including client-safe catalog metadata, a pinned server-only installation recipe, checksum and executable verification…

    30k GitHub stars~2.4k tokensUpdated today
    Auto-check passed

  • Add Selector

    simstudioai/sim

    Add or update a Sim dynamic selector using the shared manifest, server attachment, and selectors.execute path.

    30k GitHub stars~1.7k tokensUpdated today
    Auto-check passed

Categories

Questions about Emcn Design Review

What does Emcn Design Review do?

Review UI code for alignment with the emcn design system — components, tokens, patterns, and conventions. Emcn Design Review is an agent skill from simstudioai/sim.

When should I use Emcn Design Review?

Emcn Design Review fits situations like: tasks that involve Design review and critique; tasks that involve Design systems; tasks that involve Design tokens.

How do I install Emcn Design Review in Claude Code?

Run `npx skills add simstudioai/sim --skill emcn-design-review -a claude-code`. Or copy the skill folder (.agents/skills/emcn-design-review in simstudioai/sim) into .claude/skills/emcn-design-review in your project. Claude Code loads it when a task matches its description.

How do I install Emcn Design Review in Codex?

Run `npx skills add simstudioai/sim --skill emcn-design-review -a codex`. Or copy the skill folder (.agents/skills/emcn-design-review in simstudioai/sim) into .agents/skills/emcn-design-review in your project. Codex loads it when a task matches its description.

Can I use Emcn Design Review 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 simstudioai/sim --skill emcn-design-review -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/emcn-design-review, .gemini/skills/emcn-design-review, .github/skills/emcn-design-review and .opencode/skills/emcn-design-review in your project.

What does Emcn Design Review need to run?

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

Does Emcn Design Review 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 Emcn Design Review 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 Emcn Design Review use?

Emcn Design Review is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Emcn Design Review use?

About 1k tokens (SKILL.md is roughly 4.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Emcn Design Review?

Skills that share tags, products or a category with Emcn Design Review: Design System Compliance (reticlehq/reticle, 1.2k stars), Design Standards (rampstackco/claude-skills, 935 stars), Figma Design System Builder (warpdotdev/warp, 65k stars) and Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Emcn Design Review?

simstudioai (a GitHub organization) maintains it in simstudioai/sim, which has 29,785 GitHub stars. The repository holds 40 skills in this directory. The repository was last updated on October 7, 2026.

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