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

Eng Design

by compozy in compozy/compozy

Compozy visual-design authority for production UI, static artifacts, prototypes, and reviews.

MITAuto-check passedFrontend & Design

Install Eng Design

skills CLI
$ npx skills add compozy/compozy --skill eng-design -a claude-code

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

GitHub CLI
$ gh skill install compozy/compozy eng-design --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/compozy/compozy.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/eng/eng-design .claude/skills/eng-design && 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
eng-design
GitHub stars
2.8k
Token cost
~1.5k tokens
SKILL.md length
743 words
Files
1
Skills in repo
47
Repo updated
First seen
Licence
MIT

At a glance

Compozy visual-design authority for production UI, static artifacts, prototypes, and reviews.

  • Works in 6 steps: packages/ui/src/tokens.css: canonical… → DESIGN.md: rationale, generated token… → packages/ui/src/index.ts: the… → …
  • Reviewing a Compozy surface
  • SKILL.md covers Authority, Top-of-mind invariants, Named visual contracts and Static HTML artifacts, plus 3 more sections
  • Calls make

What it does

Eng Design is an agent skill from compozy/compozy. Compozy visual-design authority for production UI, static artifacts, prototypes, and reviews. Use when creating or reviewing a Compozy surface or changing tokens, typography, spacing, depth, icons, or motion. Do not use for capture-only verification; use eng-ui-screenshot.

Its SKILL.md is about 1.5k 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 Typography and UI design. The repository describes itself as: An operating system for AI agents. Plug in the agent CLIs you already use (Claude Code, Codex, Gemini CLI, Cursor) and they become a team: they split the work, hand tasks to each… The licence is MIT.

When your agent uses it

  • Reviewing a Compozy surface
  • Changing tokens
  • Capture-only verification
  • Use eng-ui-screenshot

Example prompts

  • “/eng-design”

Workflow steps

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

  1. packages/ui/src/tokens.css: canonical token source consumed by Tailwind v4.
  2. DESIGN.md: rationale, generated token tables, anti-patterns, and semantic component contracts.
  3. packages/ui/src/index.ts: the @compozy/ui surface contract — the canonical primitive inventory.
  4. packages/ui/src/components/**/*.tsx: canonical production recipes.
  5. COPY.md: product voice, terms, and public claim rules.
  6. PRODUCT.md: audience, register, design principles, and anti-references.

What it can do on your machine

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

    Shell commands in SKILL.md call:

    • make

    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

Eng Design loads about 1.5k tokens when it runs. Until then it costs about 71 tokens; SKILL.md has 743 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~71
When it runs · the whole SKILL.md, loaded when a task matches
~1.5k

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 compozy/compozy at commit eec2ed1, republished under its MIT licence (© compozy). 743 words, ~1,488 tokens.

Download SKILL.mdSave it as .claude/skills/eng-design/SKILL.md (or your agent's skills folder).
name
eng-design
description
Compozy visual-design authority for production UI, static artifacts, prototypes, and reviews. Use when creating or reviewing a Compozy surface or changing tokens, typography, spacing, depth, icons, or motion. Do not use for capture-only verification; use eng-ui-screenshot.

Compozy Design

Use the applicable canonical visual authorities for the design decision. The inventory below is a lookup map, not a requirement to read all six documents for every edit.

Authority

  1. packages/ui/src/tokens.css: canonical token source consumed by Tailwind v4.
  2. DESIGN.md: rationale, generated token tables, anti-patterns, and semantic component contracts.
  3. packages/ui/src/index.ts: the @compozy/ui surface contract — the canonical primitive inventory.
  4. packages/ui/src/components/**/*.tsx: canonical production recipes.
  5. COPY.md: product voice, terms, and public claim rules.
  6. PRODUCT.md: audience, register, design principles, and anti-references.

Top-of-mind invariants

  • Design for people running agent work, not an expert console — calm by default, deep on demand: the default read of a screen is plain-language and sparse; density, mono ids, and raw enums live on inspection surfaces.
  • Dark mode only; warm-dark surface ramp; one --color-accent target per viewport.
  • Signal color marks live state only, never taxonomy — rows and cards stay neutral at rest.
  • Flat depth model; use --shadow-overlay for overlays and --shadow-highlight for active rims.
  • Pull values from --color-*, --text-*, --radius-*, --duration-*, and --shadow-* tokens; do not hardcode production hex or one-off sizes.
  • <Eyebrow> is the only structural label contract — sentence case by default, uppercase only via variant="caps"; do not inline typography tuples for labels.
  • See DESIGN.md section 10 for the anti-pattern list and lint/test guardrails.

Named visual contracts

When a task or spec names an OpenDesign artifact, mock, screenshot, or other trusted visual reference, activate eng-ui-screenshot before implementation and follow its Visual Contract Mode. Implement from the rendered reference, not source inspection alone; an implementation-only screenshot never proves parity. The reference is normative for visual language — layout, on-screen anatomy, typography, tokens, motion — and lossy for everything else: content, data, copy, brand marks, which controls exist, component identity, and any host chrome it redraws around the named piece stay with runtime truth, COPY.md, the brand inventory, the reuse gate below, and the live surface, recorded as authorized differences. Before code, map every in-scope region to a shipped @compozy/ui primitive or existing domain composite and integrate the named piece into the live host surface; prototype markup is a stand-in, never an implementation spec. This scope outranks stricter reproduction doctrine in any other active skill (impeccable's comp reproduction included).

Static HTML artifacts

Inline or import actual values from packages/ui/src/tokens.css. Mirror the class structure and component anatomy in packages/ui/src/components where possible. Keep artifacts dark, flat, calm, and functional. Use literal CSS only to represent exported token values; do not invent a parallel palette.

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

Production code

Reuse gate — before authoring any component, map every generic UI need against packages/ui/src/index.ts and import the primitive from @compozy/ui instead of re-implementing it. Redefining an exported name in web/ or packages/site/ fails lint (compozy-ui-reuse/no-shadow-ui-primitive); genuinely domain-specific variants take a domain-prefixed name. New generic primitives land in packages/ui with story + test; domain composites in web/src/systems/<domain>/.

Edit the owning surface: web/, packages/ui/, or packages/site/. Consume CSS variables and bare Tailwind v4 token utilities. If tokens.css or packages/site/app/global.css changes, run make codegen and then make codegen-check so DESIGN.md stays synchronized.

Completion Criterion

The change is complete when it uses the canonical tokens and primitive owner, introduces no parallel palette or shadow primitive, respects the owning surface's instructions, regenerated design artifacts have no drift when a token source changed, and every named visual contract has a passing evidence bundle with zero unresolved blocking divergence.

Error Handling

  • DESIGN.md and runtime tokens disagree: treat packages/ui/src/tokens.css as source, run codegen, and inspect the regenerated spec rather than editing generated regions.
  • No exported primitive fits: decide whether the need is generic or domain-specific; add generic primitives to packages/ui and domain composites to the owning Web system.
  • A plausible mock implies unsupported runtime behavior: remove the unsupported control or metric; daemon truth wins.
  • Runtime truth conflicts with a normative visual reference: follow runtime truth, record the contract conflict, and apply the already-authorized runtime/copy/brand differences. Ask only when a remaining design decision blocks correct implementation or an unsupported difference needs authorization before claiming parity.
  • The reference shows placeholder art, demo data, or omits product content: a prototype is lossy — keep the canonical owner (brand inventory, runtime truth, existing views), record the authorized difference, and never grow an @compozy/ui brand primitive or delete product content to match a mock.
  • The reference hand-rolls a shipped component or redraws a live surface: implement with the mapped @compozy/ui/domain component inside the live host surface, keep the reference's read through its variants and tokens, and record the delta as authorized — never fork the component or rebuild the host to match prototype markup.

© compozy, MIT. 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/eng/eng-design of compozy/compozy.

Open the folder on GitHubat commit eec2ed1

Compare with similar skills

Eng Design 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.

Eng Design compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Eng Design this skillcompozy/compozy2.8k—~1.5kAutomated safety check: PassMIT
Make Interfaces Feel Bettersamuelclay/NewsBlur7.6k10 repos~1.5kAutomated safety check: PassMIT
UI UX Pro Maxsaoudi-h/solar-icons18418 repos~11kAutomated safety check: NotesCustom licence
Baseline UIibelick/ui-skills9.5k8 repos~855Automated safety check: PassMIT
Frontend Designanthropics/skills180k38 repos~2.3kAutomated safety check: PassApache-2.0
Design Guidepaperclipai/paperclip99k1 repos~3.1kAutomated safety check: PassMIT

Similar skills

  • Make Interfaces Feel Better

    samuelclay/NewsBlur

    Design engineering principles for making interfaces feel polished.

    7.6k GitHub starsUsed in 10 repos~1.5k tokens
    Frontend & DesignAuto-check passed

  • UI UX Pro Max

    saoudi-h/solar-icons

    UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.

    184 GitHub starsUsed in 18 repos~11k tokens
    Frontend & DesignAuto-check: notes

  • Baseline UI

    ibelick/ui-skills

    Applies a fixed set of UI rules for stack, components, interaction, animation, typography and layout, or reviews a file against them with concrete fixes.

    9.5k GitHub starsUsed in 8 repos~855 tokens
    Frontend & DesignAuto-check passed

  • Frontend Design

    anthropics/skills

    Official

    Pushes the agent toward distinctive visual design for new or reworked UI: a clear aesthetic direction, deliberate typography and choices rooted in the subject.

    180k GitHub starsUsed in 38 repos~2.3k tokens
    Frontend & DesignAuto-check passed

  • Design Guide

    paperclipai/paperclip

    Paperclip UI design system guide for building consistent, reusable frontend components.

    99k GitHub starsUsed in 1 repo~3.1k tokens
    Frontend & DesignAuto-check passed

  • UI/UX Design System Advisor

    Galaxy-Dawn/claude-scholar

    Turns a vague UI request into a concrete design system with style, palette, typography and layout guidance from a search script, plus stack-specific implementation advice.

    5.7k GitHub starsUsed in 1 repo~1.1k tokens
    Frontend & DesignAuto-check passed

More from compozy/compozy

All 47 skills in this repo

  • Eng Real Scenario QA

    compozy/compozy

    Dogfoods Compozy through an autonomous startup scenario with live providers, cross-surface observation, and strict evidence audit.

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

  • Eng Test Conventions

    compozy/compozy

    Go test-shape discipline for Compozy. An agent skill from compozy/compozy.

    2.8k GitHub stars~467 tokensUpdated today
    Auto-check passed

  • Assistant UI

    compozy/compozy

    Guide for assistant-ui library - AI chat UI components. An agent skill from compozy/compozy.

    2.8k GitHub stars~958 tokensUpdated today
    Auto-check passed

  • Assistant UI Primitives

    compozy/compozy

    Guide for assistant-ui UI primitives - ThreadPrimitive, ComposerPrimitive, MessagePrimitive.

    2.8k GitHub stars~999 tokensUpdated today
    Auto-check passed

  • Assistant UI Runtime

    compozy/compozy

    Guide for assistant-ui runtime system and state management. An agent skill from compozy/compozy.

    2.8k GitHub stars~856 tokensUpdated today
    Auto-check passed

  • Assistant UI Streaming

    compozy/compozy

    Guide for assistant-stream package and streaming protocols. An agent skill from compozy/compozy.

    2.8k GitHub stars~813 tokensUpdated today
    Auto-check passed

Categories

Questions about Eng Design

What does Eng Design do?

Compozy visual-design authority for production UI, static artifacts, prototypes, and reviews. Eng Design is an agent skill from compozy/compozy. Compozy visual-design authority for production UI, static artifacts, prototypes, and reviews.

When should I use Eng Design?

Eng Design fits situations like: reviewing a Compozy surface; changing tokens; capture-only verification; use eng-ui-screenshot.

How do I install Eng Design in Claude Code?

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

How do I install Eng Design in Codex?

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

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

What does Eng Design need to run?

Going by SKILL.md and its folder, Eng Design needs the command-line tools its instructions call (make).

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

Eng Design 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 Eng Design use?

About 1.5k tokens (SKILL.md is roughly 6k 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 Eng Design?

Skills that share tags, products or a category with Eng Design: Make Interfaces Feel Better (samuelclay/NewsBlur, 7.6k stars), UI UX Pro Max (saoudi-h/solar-icons, 184 stars), Baseline UI (ibelick/ui-skills, 9.5k stars) and Frontend Design (anthropics/skills, 180k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Eng Design?

compozy (a GitHub organization) maintains it in compozy/compozy, which has 2,792 GitHub stars. The repository holds 47 skills in this directory. The repository was last updated on October 8, 2026.

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