Frontend Design Pro

Name: Frontend Design Pro
Author: kesslerio

kesslerio/frontend-design-pro

6 installs
1 repo stars
Updated March 25, 2026
kesslerio/frontend-design-pro

Composes design-guardrail skills with a frontend generation workflow in four modes for new UI, luxury, minimalist, or redesign work.

About

A wrapper skill that composes several design-guardrail skills with a frontend generation workflow across four modes. A developer uses it to produce premium React/Next.js UI while enforcing anti-slop design discipline.

Composes taste, luxury, minimalist, and redesign skills with a generator workflow
Four composition modes for new UI, soft/luxury, minimalist, and redesign

Frontend Design Pro by the numbers

6 all-time installs (skills.sh)
Ranked #1,500 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
Data as of Jul 25, 2026 (Skillselion catalog sync)

npx skills add https://github.com/kesslerio/frontend-design-pro --skill frontend-design-pro

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/kesslerio/frontend-design-pro.svg)](https://skillselion.com/skills/kesslerio/frontend-design-pro)

Installs	6
repo stars	★ 1
Last updated	March 25, 2026
Repository	kesslerio/frontend-design-pro ↗

What it does

Composes design-guardrail skills with a frontend generation workflow in four modes for new UI, luxury, minimalist, or redesign work.

Files

SKILL.mdMarkdownGitHub ↗

Frontend Design Pro

One-command composition layer for premium frontend output. Choose the mode that fits your project type — the skill handles execution order automatically.

Dependencies

All dependency skills must be installed before this skill will work. Source repos:

Skill	Frontmatter name	Source
Taste guardrails	`design-taste-frontend`	kesslerio/taste-skill — `skills/taste-skill/`
Soft/luxury aesthetic	`high-end-visual-design`	kesslerio/taste-skill — `skills/soft-skill/`
Minimalist/editorial aesthetic	`minimalist-ui`	kesslerio/taste-skill — `skills/minimalist-skill/`
Redesign auditor	`redesign-existing-projects`	kesslerio/taste-skill — `skills/redesign-skill/`
Generator workflow	`frontend-design-ultimate`	kesslerio/ultimate-frontend-design-openclaw-skill

Composition Modes

Mode 1: New UI (default)

Use when: Building a new interface from scratch with strict anti-slop enforcement.

design-taste-frontend → frontend-design-ultimate

1. design-taste-frontend — enforce anti-slop constraints, architecture discipline, motion/perf guardrails, and QA gates 2. frontend-design-ultimate — execute the full generation workflow (aesthetic direction, scaffolding, responsive implementation)

Mode 2: Soft / Luxury

Use when: The output needs a cinematic, agency-tier, Awwwards-level aesthetic — glass effects, spring physics, double-bezel cards, dramatic whitespace.

high-end-visual-design → frontend-design-ultimate

1. high-end-visual-design — enforce the Vanguard_UI_Architect persona, variance engine (vibe + layout archetypes), haptic micro-aesthetics, motion choreography 2. frontend-design-ultimate — scaffold and build

Mode 3: Minimalist / Editorial

Use when: The target aesthetic is clean, document-style, workspace-tier (Notion / Linear / Craft) — warm monochrome, editorial serifs, bento grids, no gradients.

minimalist-ui → frontend-design-ultimate

1. minimalist-ui — enforce warm monochrome palette, typographic contrast, flat bento layouts, ultra-diffuse shadows, muted pastel accents 2. frontend-design-ultimate — scaffold and build

Mode 4: Redesign (existing UI)

Use when: Upgrading an existing website or app — audit what's broken first, then enforce guardrails and regenerate.

redesign-existing-projects → design-taste-frontend → frontend-design-ultimate

1. redesign-existing-projects — scan codebase, diagnose generic patterns (typography, color, layout, interactivity, components, iconography), apply targeted fixes 2. design-taste-frontend — enforce anti-slop constraints on the improved base 3. frontend-design-ultimate — generate the final production-ready output

Execution Order

Never invert the order within a mode. Guardrails and audits must run before generation.

Quick Usage Prompts

New UI:

"Use frontend-design-pro to build a SaaS landing page with strict anti-slop guardrails and a complete production-ready React/Tailwind implementation."
"Apply frontend-design-pro for a mobile-first marketing site with strong typography, disciplined motion, and clean deployment-ready output."

Soft / Luxury:

"Use frontend-design-pro in soft/luxury mode to build a premium agency portfolio. Cinematic, glass effects, spring physics."
"Apply high-end-visual-design then frontend-design-ultimate for a $150k-agency-tier SaaS hero section."

Minimalist / Editorial:

"Use frontend-design-pro in minimalist mode for an editorial dashboard — Notion-style, warm monochrome, bento grid."
"Apply minimalist-ui then frontend-design-ultimate for a clean workspace-tier landing page."

Redesign:

"Use frontend-design-pro to redesign this dashboard: audit the existing UI for generic patterns first, enforce taste guardrails, then generate a bold but maintainable frontend."
"Apply frontend-design-pro redesign mode to this React app — scan for AI slop, fix it, then rebuild with full production discipline."

When To Use

You want one-command UX that combines design guardrails with end-to-end frontend generation.
You need high-quality React/Next.js/Vite UI output with explicit anti-generic constraints.
You want consistent production discipline across layout, motion, responsiveness, and implementation.

When Not To Use

You only need guardrails without generation — use design-taste-frontend, high-end-visual-design, or minimalist-ui directly.
You only need the generation workflow without guardrails — use frontend-design-ultimate directly.
You are not doing frontend/UI work.

name: frontend-design-pro
summary: One-command wrapper that applies strict frontend guardrails first, then runs full frontend generation workflow.
description: >-
  Discoverability metadata for frontend-design-pro. This is a composition wrapper that
  enforces strict execution order: design-taste-frontend first (guardrails/compliance),
  frontend-design-ultimate second (generation/workflow).
aliases:
  - frontend-design-pro
  - frontend design pro
  - frontend design wrapper
  - frontend guardrails plus generator
  - design taste plus frontend ultimate
keywords:
  - frontend
  - ui
  - ux
  - wrapper
  - composed skill
  - guardrails
  - generation workflow
  - anti-slop
  - react
  - nextjs
  - tailwind
category: frontend
layer: composition-wrapper
composes_with:
  - design-taste-frontend
  - frontend-design-ultimate
notes:
  - Always execute design-taste-frontend before frontend-design-ultimate.
  - This skill is orchestration-only; source skills remain authoritative.

frontend-design-pro

Wrapper skill that composes design guardrail skills with the frontend-design-ultimate generation workflow. Supports four composition modes for new UI, soft/luxury, minimalist/editorial, and redesign scenarios.

Install

See [SETUP.md](SETUP.md) for full per-tool instructions (Claude Code, Codex, Windsurf, OpenClaw) and the automated setup script.

Claude Code (quick start):

bash <(curl -fsSL https://raw.githubusercontent.com/kesslerio/frontend-design-pro/main/setup.sh)

Codex & Windsurf — after Claude Code setup:

compound-plugin sync --target codex
compound-plugin sync --target windsurf

Dependencies

Five skills must be installed before this skill will work:

Skill	Frontmatter name	Source
Taste guardrails	`design-taste-frontend`	kesslerio/taste-skill — `skills/taste-skill/`
Soft/luxury aesthetic	`high-end-visual-design`	kesslerio/taste-skill — `skills/soft-skill/`
Minimalist/editorial aesthetic	`minimalist-ui`	kesslerio/taste-skill — `skills/minimalist-skill/`
Redesign auditor	`redesign-existing-projects`	kesslerio/taste-skill — `skills/redesign-skill/`
Generator workflow	`frontend-design-ultimate`	kesslerio/ultimate-frontend-design-openclaw-skill

Composition Modes

Mode	Pipeline	Use when
New UI (default)	`design-taste-frontend` → `frontend-design-ultimate`	Building new interfaces with strict anti-slop enforcement
Soft / Luxury	`high-end-visual-design` → `frontend-design-ultimate`	Cinematic, agency-tier, glass effects, spring physics
Minimalist / Editorial	`minimalist-ui` → `frontend-design-ultimate`	Notion/Linear-style, warm monochrome, bento grids
Redesign	`redesign-existing-projects` → `design-taste-frontend` → `frontend-design-ultimate`	Upgrading an existing UI — audit first, then enforce + generate

Never invert the order within a mode. Guardrails and audits must run before generation.

Usage

Use frontend-design-pro to build a SaaS landing page.

Use frontend-design-pro in soft/luxury mode for a $150k-agency-tier hero section.

Use frontend-design-pro in minimalist mode for an editorial dashboard.

Use frontend-design-pro to redesign this existing React app — audit it first, then rebuild.

When Not To Use

Only need guardrails without generation → use design-taste-frontend, high-end-visual-design, or minimalist-ui directly
Only need generation without guardrails → use frontend-design-ultimate directly
Not doing frontend/UI work

Setup Guide — frontend-design-pro

This skill depends on five other skills from two source repos. This guide covers complete installation for Claude Code, Codex, Windsurf, and OpenClaw.

Dependency Map

frontend-design-pro
├── design-taste-frontend      → kesslerio/taste-skill  (skills/taste-skill/)
├── high-end-visual-design     → kesslerio/taste-skill  (skills/soft-skill/)
├── minimalist-ui              → kesslerio/taste-skill  (skills/minimalist-skill/)
├── redesign-existing-projects → kesslerio/taste-skill  (skills/redesign-skill/)
└── frontend-design-ultimate   → kesslerio/ultimate-frontend-design-openclaw-skill

All four taste-skill variants live in one repo (kesslerio/taste-skill) as subdirectories under skills/.

---

Claude Code

One-time clone:

# Clone source repos to stable locations
git clone https://github.com/kesslerio/taste-skill.git ~/code/taste-skill
git clone https://github.com/kesslerio/ultimate-frontend-design-openclaw-skill.git ~/code/ultimate-frontend-design-skill
git clone https://github.com/kesslerio/frontend-design-pro.git ~/code/frontend-design-pro

Symlink each skill into `~/.claude/skills/`:

mkdir -p ~/.claude/skills

# taste-skill subdirectories (each is its own skill)
ln -s ~/code/taste-skill/skills/taste-skill     ~/.claude/skills/design-taste-frontend
ln -s ~/code/taste-skill/skills/soft-skill      ~/.claude/skills/soft-skill
ln -s ~/code/taste-skill/skills/minimalist-skill ~/.claude/skills/minimalist-skill
ln -s ~/code/taste-skill/skills/redesign-skill  ~/.claude/skills/redesign-skill

# ultimate workflow skill (full repo root)
ln -s ~/code/ultimate-frontend-design-skill     ~/.claude/skills/ultimate-frontend-design-skill

# this wrapper skill
ln -s ~/code/frontend-design-pro                ~/.claude/skills/frontend-design-pro

Verify:

ls ~/.claude/skills/design-taste-frontend/SKILL.md   # should print the path
ls ~/.claude/skills/soft-skill/SKILL.md
ls ~/.claude/skills/minimalist-skill/SKILL.md
ls ~/.claude/skills/redesign-skill/SKILL.md
ls ~/.claude/skills/ultimate-frontend-design-skill/SKILL.md
ls ~/.claude/skills/frontend-design-pro/SKILL.md

Or run the automated setup script (see below).

---

Codex & Windsurf (via compound-engineering-plugin)

After Claude Code is set up above, compound-engineering-plugin syncs everything automatically. No additional cloning required.

compound-plugin sync --target codex
compound-plugin sync --target windsurf

This copies all six skills (and any others in ~/.claude/skills/) into:

Codex: ~/.codex/skills/
Windsurf: ~/.codeium/windsurf/skills/

Verify (Windsurf):

ls ~/.codeium/windsurf/skills/design-taste-frontend/SKILL.md
ls ~/.codeium/windsurf/skills/frontend-design-pro/SKILL.md

---

OpenClaw

OpenClaw uses ~/.openclaw/extensions/ and requires copied directories (not symlinks).

mkdir -p ~/.openclaw/extensions

# Clone source repos if not already present
git clone https://github.com/kesslerio/taste-skill.git /tmp/taste-skill
git clone https://github.com/kesslerio/ultimate-frontend-design-openclaw-skill.git /tmp/ultimate-frontend-design-skill
git clone https://github.com/kesslerio/frontend-design-pro.git /tmp/frontend-design-pro

# Copy each skill subdirectory
cp -R /tmp/taste-skill/skills/taste-skill      ~/.openclaw/extensions/design-taste-frontend
cp -R /tmp/taste-skill/skills/soft-skill       ~/.openclaw/extensions/soft-skill
cp -R /tmp/taste-skill/skills/minimalist-skill ~/.openclaw/extensions/minimalist-skill
cp -R /tmp/taste-skill/skills/redesign-skill   ~/.openclaw/extensions/redesign-skill
cp -R /tmp/ultimate-frontend-design-skill      ~/.openclaw/extensions/frontend-design-ultimate
cp -R /tmp/frontend-design-pro                 ~/.openclaw/extensions/frontend-design-pro

---

Updating

Claude Code — pull the source repos; symlinks pick up changes immediately:

cd ~/code/taste-skill && git pull
cd ~/code/ultimate-frontend-design-skill && git pull
cd ~/code/frontend-design-pro && git pull

Codex & Windsurf — re-run sync after pulling:

compound-plugin sync --target codex
compound-plugin sync --target windsurf

OpenClaw — re-run the cp -R commands above after pulling.

---

Automated Script (Claude Code)

setup.sh in this repo automates the full Claude Code install:

bash setup.sh

See setup.sh for what it does before running.

---

Skill Names (for prompting)

After install, reference skills by their frontmatter name field:

Install dir	Frontmatter name
`design-taste-frontend`	`design-taste-frontend`
`soft-skill`	`high-end-visual-design`
`minimalist-skill`	`minimalist-ui`
`redesign-skill`	`redesign-existing-projects`
`ultimate-frontend-design-skill`	`frontend-design-ultimate`
`frontend-design-pro`	`frontend-design-pro`

The wrapper skill (frontend-design-pro) resolves the correct chain automatically based on the mode you request.

#!/usr/bin/env bash
# setup.sh — Install frontend-design-pro and all dependencies for Claude Code
#
# What this does:
#   1. Clones kesslerio/taste-skill and kesslerio/ultimate-frontend-design-openclaw-skill
#      to ~/code/ (skips if already present)
#   2. Symlinks all six skills into ~/.claude/skills/
#   3. Verifies SKILL.md is reachable at each symlink
#
# For Codex/Windsurf: run `compound-plugin sync` after this script.
# For OpenClaw: see SETUP.md for cp-based instructions.

set -euo pipefail

SKILLS_DIR="$HOME/.claude/skills"
CODE_DIR="$HOME/code"

TASTE_REPO="https://github.com/kesslerio/taste-skill.git"
ULTIMATE_REPO="https://github.com/kesslerio/ultimate-frontend-design-openclaw-skill.git"
PRO_REPO="https://github.com/kesslerio/frontend-design-pro.git"

TASTE_DIR="$CODE_DIR/taste-skill"
ULTIMATE_DIR="$CODE_DIR/ultimate-frontend-design-skill"
PRO_DIR="$CODE_DIR/frontend-design-pro"

echo "==> Checking dependencies: git"
command -v git >/dev/null 2>&1 || { echo "ERROR: git is required but not installed."; exit 1; }

echo "==> Creating directories"
mkdir -p "$SKILLS_DIR"
mkdir -p "$CODE_DIR"

# Clone or pull source repos

clone_or_pull() {
  local repo="$1"
  local dir="$2"
  if [ -d "$dir/.git" ]; then
    echo "==> Updating $dir"
    git -C "$dir" pull --ff-only
  else
    echo "==> Cloning $repo → $dir"
    git clone "$repo" "$dir"
  fi
}

clone_or_pull "$TASTE_REPO"    "$TASTE_DIR"
clone_or_pull "$ULTIMATE_REPO" "$ULTIMATE_DIR"
clone_or_pull "$PRO_REPO"      "$PRO_DIR"

# Symlink helper: create only if not already pointing to the right target

make_symlink() {
  local target="$1"
  local link="$2"
  local name
  name="$(basename "$link")"

  if [ -L "$link" ]; then
    existing=$(readlink "$link")
    if [ "$existing" = "$target" ]; then
      echo "    OK (exists): $name"
      return
    else
      echo "    Replacing stale symlink: $name ($existing → $target)"
      rm "$link"
    fi
  elif [ -e "$link" ]; then
    echo "    SKIP (real directory exists — remove manually to replace): $link"
    return
  fi

  ln -s "$target" "$link"
  echo "    Linked: $name"
}

echo "==> Symlinking skills into $SKILLS_DIR"
make_symlink "$TASTE_DIR/skills/taste-skill"      "$SKILLS_DIR/design-taste-frontend"
make_symlink "$TASTE_DIR/skills/soft-skill"       "$SKILLS_DIR/soft-skill"
make_symlink "$TASTE_DIR/skills/minimalist-skill" "$SKILLS_DIR/minimalist-skill"
make_symlink "$TASTE_DIR/skills/redesign-skill"   "$SKILLS_DIR/redesign-skill"
make_symlink "$ULTIMATE_DIR"                      "$SKILLS_DIR/ultimate-frontend-design-skill"
make_symlink "$PRO_DIR"                           "$SKILLS_DIR/frontend-design-pro"

# Verify each SKILL.md is reachable

echo "==> Verifying installs"
FAILED=0
for skill in design-taste-frontend soft-skill minimalist-skill redesign-skill ultimate-frontend-design-skill frontend-design-pro; do
  path="$SKILLS_DIR/$skill/SKILL.md"
  if [ -f "$path" ]; then
    echo "    OK: $skill"
  else
    echo "    MISSING: $path"
    FAILED=1
  fi
done

if [ "$FAILED" -eq 1 ]; then
  echo ""
  echo "ERROR: One or more SKILL.md files are missing. Check the output above."
  exit 1
fi

echo ""
echo "Done. All six skills installed in $SKILLS_DIR."
echo ""
echo "Next steps:"
echo "  Codex:    compound-plugin sync --target codex"
echo "  Windsurf: compound-plugin sync --target windsurf"
echo "  OpenClaw: see SETUP.md for manual cp instructions"