agentleFS
Sign inStart free
podopodo/design-agent-skills/skills/awesome-design-skills/SKILL.md

awesome-design-skills

Skill32 starsChanged 6 months agoMITView on GitHub

Registry of visual aesthetic and style skills for Claude Code, Cursor, Codex, and other agents. Each style is its own skill shipping SKILL.md + DESIGN.md (tokens, components, accessibility, tone, quality gates) for an aesthetic such as glassmorphism, brutalism, claymorphism, neumorphism, editorial, bento, retro, or riso. The catalogue installs a few popular styles; any other style can be added by name.

1 other project uses a version of this, 1 of them edited.

Adopted by

Most recently taken up by

The file

Create a free account to mount
Files
SKILL.md

awesome-design-skills

Catalogue stub — full registry: bergside/awesome-design-skills

<!-- das:install:start — generated from stub.yaml by `npm run generate`; edit stub.yaml, not this block -->

Decision tree

  1. Is the full skill already installed? This package installs 6 skills (glassmorphism, brutalism, claymorphism, neumorphism, editorial, bento); checking the first.
    • Global: f=~/.agents/skills/glassmorphism/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • Project: f=.agents/skills/glassmorphism/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → the skill is installed as glassmorphism, invoke it and proceed
    • pointer → go to step 2

  2. Detect scope, then install:

    [ -e ~/.agents/skills/awesome-design-skills ] && echo "global" || echo "project"

    Global:

    npx skills add bergside/awesome-design-skills --skill glassmorphism brutalism claymorphism neumorphism editorial bento -g -y

    Project:

    npx skills add bergside/awesome-design-skills --skill glassmorphism brutalism claymorphism neumorphism editorial bento -y

    Claude Code: send a command as a chat message starting with ! to run it without leaving the conversation.

Heads-up

  • License: MIT
<!-- das:install:end -->

Invoke after install

  • Skill names: glassmorphism, brutalism, claymorphism, neumorphism, editorial, bento
  • Trigger phrases: "glassmorphism skill", "brutalism skill", "claymorphism skill", "neumorphism skill", "visual style skill"

What it does

Each skill in the registry is one visual style and includes:

  • SKILL.md — agent instructions: token palette, component rules, accessibility constraints, quality gates
  • DESIGN.md — human-readable rationale: brand mission, style foundations, do/don't patterns

The agent reads both files to apply the aesthetic consistently across any UI task: colors, typography, spacing, shadows, motion, tone of voice.

The command above installs six popular styles. The repo has many more, one folder per style (for example retro, riso, neon, minimal, cosmic, dithered, vintage): install another by running the same command with that folder name after --skill, for example --skill retro. Install by name only; a bare npx skills add bergside/awesome-design-skills pulls the whole registry, and a few style names (matrix, pulse, codex, shadcn, storytelling) are also directory names used by unrelated skills. Upstream also ships its own CLI for the same registry (npx typeui.sh list, npx typeui.sh pull retro), which this catalogue has not verified.

When NOT to use

  • Functional design tooling (Figma, tokens, accessibility audits) — use the relevant tool skill
  • Brand-specific tokens for a real product — use design-tokens-skill or author your own DESIGN.md
  • Material Design 3 / platform HIG — use material-3-skill or platform-design-skills

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.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

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