AgentToolHub
Skill

frontend-design

frontend-design — a Claude Code skill from ilm-alan/frontend-design

Features

  • ✓**10 aesthetic archetypes** — Editorial, Swiss, Brutalist, Minimalist, Maximalist, Retro-Futuristic, Organic, Industrial, Art Deco, Lo-Fi
  • ✓**Structured design process** — Context → Archetype → Differentiator → Token System → Implementation
  • ✓**Design token system** — CSS custom properties for colors, spacing, typography, shadows
  • ✓**Motion with purpose** — Custom easing, orchestrated sequences, scroll-triggered animations
  • ✓**Anti-pattern guidance** — Explicit list of generic markers to avoid
  • ✓**Quality checklist** — 5-point verification before delivery

Installation Guide

Claude Code

bash
mkdir -p ~/.claude/skills/frontend-design && curl -o ~/.claude/skills/frontend-design/SKILL.md https://raw.githubusercontent.com/Ilm-Alan/frontend-design/main/SKILL.md

Codex

bash
mkdir -p ~/.codex/skills/frontend-design && curl -o ~/.codex/skills/frontend-design/SKILL.md https://raw.githubusercontent.com/Ilm-Alan/frontend-design/main/SKILL.md

Gemini CLI

First, enable the experimental skills feature in ~/.gemini/settings.json:

json
{
  "experimental": {
    "skills": true
  }
}

Then install the skill:

bash
mkdir -p ~/.gemini/skills/frontend-design && curl -o ~/.gemini/skills/frontend-design/SKILL.md https://raw.githubusercontent.com/Ilm-Alan/frontend-design/main/SKILL.md

Run /skills list to verify the skill was loaded.

Reviews