Agent skill

Superdesign

Expert frontend design guidelines for creating beautiful, modern UIs.

Install Superdesign

skills CLI

$ npx skills add CraftOS-dev/CraftBot --skill superdesign -a claude-code

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

GitHub CLI

$ gh skill install CraftOS-dev/CraftBot superdesign --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/CraftOS-dev/CraftBot.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/superdesign .claude/skills/superdesign && 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/

Paste into Claude Code

Install the "superdesign" agent skill from https://github.com/CraftOS-dev/CraftBot/tree/main/skills/superdesign into .claude/skills/superdesign/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "superdesign", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/CraftOS-dev/CraftBot/tree/main/skills/superdesign

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add CraftOS-dev/CraftBot --skill superdesign -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install CraftOS-dev/CraftBot superdesign --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/CraftOS-dev/CraftBot.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/superdesign .agents/skills/superdesign && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "superdesign" agent skill from https://github.com/CraftOS-dev/CraftBot/tree/main/skills/superdesign into .agents/skills/superdesign/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "superdesign", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add CraftOS-dev/CraftBot --skill superdesign -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install CraftOS-dev/CraftBot superdesign --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/CraftOS-dev/CraftBot.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/superdesign .cursor/skills/superdesign && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "superdesign" agent skill from https://github.com/CraftOS-dev/CraftBot/tree/main/skills/superdesign into .cursor/skills/superdesign/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "superdesign", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/CraftOS-dev/CraftBot.git --path skills/superdesign

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add CraftOS-dev/CraftBot --skill superdesign -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install CraftOS-dev/CraftBot superdesign --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/CraftOS-dev/CraftBot.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/superdesign .gemini/skills/superdesign && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "superdesign" agent skill from https://github.com/CraftOS-dev/CraftBot/tree/main/skills/superdesign into .gemini/skills/superdesign/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "superdesign", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install CraftOS-dev/CraftBot superdesign

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add CraftOS-dev/CraftBot --skill superdesign -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/CraftOS-dev/CraftBot.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/superdesign .github/skills/superdesign && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "superdesign" agent skill from https://github.com/CraftOS-dev/CraftBot/tree/main/skills/superdesign into .github/skills/superdesign/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "superdesign", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add CraftOS-dev/CraftBot --skill superdesign -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install CraftOS-dev/CraftBot superdesign --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/CraftOS-dev/CraftBot.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/superdesign .opencode/skills/superdesign && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "superdesign" agent skill from https://github.com/CraftOS-dev/CraftBot/tree/main/skills/superdesign into .opencode/skills/superdesign/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "superdesign", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: superdesign
GitHub stars: 392
Used in: 3 other repos
Token cost: ~1.4k tokens
SKILL.md length: 344 words
Files: 3
Skills in repo: 89
Repo updated: Oct 7, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Expert frontend design guidelines for creating beautiful, modern UIs.

Works in 8 steps: Layout Design → Theme Guidelines → Theme Patterns → …
Building landing pages
SKILL.md covers Design Workflow and Quick Reference
Reaches cdn.jsdelivr.net and images.unsplash.com

What it does

Superdesign is an agent skill from CraftOS-dev/CraftBot. Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.

Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files (for example `.clawhub/origin.json` and `_meta.json`).

It sits in Frontend & Design, covering Landing pages. The repository describes itself as: One agent. Every kind of work. The licence is MIT.

When your agent uses it

Building landing pages
Any user interface

Example prompts

“/superdesign”

Workflow steps

8 steps, taken from the step headings in SKILL.md.

Layout Design
Theme Guidelines
Theme Patterns
Animation Guidelines
Implementation Rules
Responsive Design
Accessibility
Component Design Tips

What it can do on your machine

Read from SKILL.md and the folder at commit b50970c. 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 css and html).
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
- cdn.jsdelivr.net
- images.unsplash.com
- cdn.tailwindcss.com
- unpkg.com
Also links to:
- superdesign.dev
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

Superdesign loads about 1.4k tokens when it runs. Until then it costs about 37 tokens; SKILL.md has 344 words of instructions outside code blocks.

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

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 CraftOS-dev/CraftBot at commit b50970c, republished under its MIT licence (© CraftOS-dev). 344 words, ~1,426 tokens.

Download SKILL.mdSave it as .claude/skills/superdesign/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.

name: superdesign
description: Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.

Frontend Design Skill

Use this skill when creating UI components, landing pages, dashboards, or any frontend design work.

Design Workflow

Follow this structured approach for UI design:

Layout Design — Think through component structure, create ASCII wireframes
Theme Design — Define colors, fonts, spacing, shadows
Animation Design — Plan micro-interactions and transitions
Implementation — Generate the actual code

1. Layout Design

Before coding, sketch the layout in ASCII format:

┌─────────────────────────────────────┐
│         HEADER / NAV BAR            │
├─────────────────────────────────────┤
│                                     │
│            HERO SECTION             │
│         (Title + CTA)               │
│                                     │
├─────────────────────────────────────┤
│   FEATURE   │  FEATURE  │  FEATURE  │
│     CARD    │   CARD    │   CARD    │
├─────────────────────────────────────┤
│            FOOTER                   │
└─────────────────────────────────────┘

2. Theme Guidelines

Color Rules:

NEVER use generic bootstrap-style blue (#007bff) — it looks dated
Prefer oklch() for modern color definitions
Use semantic color variables (--primary, --secondary, --muted, etc.)
Consider both light and dark mode from the start

Font Selection (Google Fonts):

Sans-serif: Inter, Roboto, Poppins, Montserrat, Outfit, Plus Jakarta Sans, DM Sans, Space Grotesk
Monospace: JetBrains Mono, Fira Code, Source Code Pro, IBM Plex Mono, Space Mono, Geist Mono
Serif: Merriweather, Playfair Display, Lora, Source Serif Pro, Libre Baskerville
Display: Architects Daughter, Oxanium

Spacing & Shadows:

Use consistent spacing scale (0.25rem base)
Shadows should be subtle — avoid heavy drop shadows
Consider using oklch() for shadow colors too

3. Theme Patterns

Modern Dark Mode (Vercel/Linear style):

css

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.970 0 0);
  --muted: oklch(0.970 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --border: oklch(0.922 0 0);
  --radius: 0.625rem;
  --font-sans: Inter, system-ui, sans-serif;
}

Neo-Brutalism (90s web revival):

css

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0 0 0);
  --primary: oklch(0.649 0.237 26.97);
  --secondary: oklch(0.968 0.211 109.77);
  --accent: oklch(0.564 0.241 260.82);
  --border: oklch(0 0 0);
  --radius: 0px;
  --shadow: 4px 4px 0px 0px hsl(0 0% 0%);
  --font-sans: DM Sans, sans-serif;
  --font-mono: Space Mono, monospace;
}

Glassmorphism:

css

.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 1rem;
}

4. Animation Guidelines

Micro-syntax for planning:

button: 150ms [S1→0.95→1] press
hover: 200ms [Y0→-2, shadow↗]
fadeIn: 400ms ease-out [Y+20→0, α0→1]
slideIn: 350ms ease-out [X-100→0, α0→1]
bounce: 600ms [S0.95→1.05→1]

Common patterns:

Entry animations: 300-500ms, ease-out
Hover states: 150-200ms
Button press: 100-150ms
Page transitions: 300-400ms

5. Implementation Rules

Tailwind CSS:

html

<!-- Import via CDN for prototypes -->
<script src="https://cdn.tailwindcss.com"></script>

Flowbite (component library):

html

<link href="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js"></script>

Icons (Lucide):

html

<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<script>lucide.createIcons();</script>

Images:

Use real placeholder services: Unsplash, placehold.co
Never make up image URLs
Example: https://images.unsplash.com/photo-xxx?w=800&h=600

6. Responsive Design

Always design mobile-first and responsive:

css

/* Mobile first */
.container { padding: 1rem; }

/* Tablet */
@media (min-width: 768px) {
  .container { padding: 2rem; }
}

/* Desktop */
@media (min-width: 1024px) {
  .container { max-width: 1200px; margin: 0 auto; }
}

7. Accessibility

Use semantic HTML (header, main, nav, section, article)
Include proper heading hierarchy (h1 → h2 → h3)
Add aria-labels to interactive elements
Ensure sufficient color contrast (4.5:1 minimum)
Support keyboard navigation

8. Component Design Tips

Cards:

Subtle shadows, not heavy drop shadows
Consistent padding (p-4 to p-6)
Hover state: slight lift + shadow increase

Buttons:

Clear visual hierarchy (primary, secondary, ghost)
Adequate touch targets (min 44x44px)
Loading and disabled states

Forms:

Clear labels above inputs
Visible focus states
Inline validation feedback
Adequate spacing between fields

Navigation:

Sticky header for long pages
Clear active state indication
Mobile-friendly hamburger menu

Quick Reference

Element	Recommendation
Primary font	Inter, Outfit, DM Sans
Code font	JetBrains Mono, Fira Code
Border radius	0.5rem - 1rem (modern), 0 (brutalist)
Shadow	Subtle, 1-2 layers max
Spacing	4px base unit (0.25rem)
Animation	150-400ms, ease-out
Colors	oklch() for modern, avoid generic blue

Based on SuperDesign patterns — https://superdesign.dev

Files

SKILL.md and 2 other files in skills/superdesign of CraftOS-dev/CraftBot.

SKILL.md
.clawhub/origin.json
_meta.json

Open the folder on GitHubat commit b50970c

Used in 3 other repositories

We found 3 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 3 other GitHub owners. This page covers the copy in CraftOS-dev/CraftBot, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Superdesign 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.

Superdesign compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Superdesign this skillCraftOS-dev/CraftBot	392	3 repos	~1.4k	Automated safety check: Pass	MIT	today
Impeccablebestofjs/bestofjs	3.1k	27 repos	~2.6k	Automated safety check: Pass	MIT	3 days ago
Scroll World Landing Pageoso95/scroll-world	9.7k	1 repos	~12k	Automated safety check: Notes	MIT	2 mo ago
Expert Panelericosiu/ai-marketing-skills	3.6k	2 repos	~2.1k	Automated safety check: Pass	MIT	15 days ago
UI UX Pro Maxsaoudi-h/solar-icons	182	18 repos	~11k	Automated safety check: Notes	Custom licence	yesterday
Frontend Designanthropics/skills	180k	38 repos	~2.3k	Automated safety check: Pass	Apache-2.0	2 days ago

Similar skills

Impeccable
bestofjs/bestofjs
A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…
3.1k GitHub starsUsed in 27 repos~2.6k tokens
Frontend & DesignAuto-check passed
Scroll World Landing Page
oso95/scroll-world
Builds a scroll-driven landing page where a pre-rendered camera flies through connected AI-generated scenes, using Higgsfield for stills and video clips.
9.7k GitHub starsUsed in 1 repo~12k tokens
Frontend & DesignAuto-check: notes
Expert Panel
ericosiu/ai-marketing-skills
Score, evaluate, and iteratively improve any content or strategy using an auto-assembled panel of domain experts.
3.6k GitHub starsUsed in 2 repos~2.1k 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.
182 GitHub starsUsed in 18 repos~11k tokens
Frontend & DesignAuto-check: notes
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
Scroll Craft
nateherkai/scroll-craft
Build premium scroll-driven landing pages for service, product, food, and drink brands.
3k GitHub stars~6.2k tokensUpdated 7 days ago
Frontend & DesignAuto-check: notes

Questions about Superdesign

What does Superdesign do?

Expert frontend design guidelines for creating beautiful, modern UIs. Superdesign is an agent skill from CraftOS-dev/CraftBot. Expert frontend design guidelines for creating beautiful, modern UIs.

When should I use Superdesign?

Superdesign fits situations like: building landing pages; any user interface.

How do I install Superdesign in Claude Code?

Run `npx skills add CraftOS-dev/CraftBot --skill superdesign -a claude-code`. Or copy the skill folder (skills/superdesign in CraftOS-dev/CraftBot) into .claude/skills/superdesign in your project. Claude Code loads it when a task matches its description.

How do I install Superdesign in Codex?

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

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

What does Superdesign need to run?

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

Does Superdesign access the network?

SKILL.md names 5 domains. In commands or code: cdn.jsdelivr.net, images.unsplash.com, cdn.tailwindcss.com and unpkg.com; the agent is likely to contact these when it follows the instructions. As links in the text: superdesign.dev. This is read from the text; nothing was executed.

Is Superdesign 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 Superdesign use?

Superdesign 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 Superdesign use?

About 1.4k tokens (SKILL.md is roughly 5.7k 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 Superdesign?

Skills that share tags, products or a category with Superdesign: Impeccable (bestofjs/bestofjs, 3.1k stars), Scroll World Landing Page (oso95/scroll-world, 9.7k stars), Expert Panel (ericosiu/ai-marketing-skills, 3.6k stars) and UI UX Pro Max (saoudi-h/solar-icons, 182 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Superdesign?

CraftOS-dev (a GitHub user) maintains it in CraftOS-dev/CraftBot, which has 392 GitHub stars. The repository holds 89 skills in this directory. The repository was last updated on October 7, 2026.

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

Install Superdesign

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Frontend Design Skill

Design Workflow

1. Layout Design

2. Theme Guidelines

3. Theme Patterns

4. Animation Guidelines

5. Implementation Rules

6. Responsive Design

7. Accessibility

8. Component Design Tips

Quick Reference

Files

Used in 3 other repositories

Compare with similar skills

Similar skills

More from CraftOS-dev/CraftBot

Related

Questions about Superdesign