Adoption

Agent Skills are supported by leading AI development tools.

VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory

davepoon/plugins/frontend-design-pro/skills/design-wizard

Name: plugins/frontend-design-pro/skills/design-wizard
Author: davepoon

plugins/frontend-design-pro/skills/design-wizard/SKILL.md

npx skillsauth add davepoon/buildwithclaude plugins/frontend-design-pro/skills/design-wizard

Clean

TrivyContainer and dependency vulnerability scanner

Clean

SemgrepStatic code analysis for vulnerabilities

Clean

mcp-scan (Snyk)Model Context Protocol security validation

Skipped

Snyk (dep)Open source security scanning

Skipped

Socket.devSupply chain security analysis

Skipped

VirusTotalMulti-engine malware detection

Skipped

CrowdStrikeAdvanced threat intelligence

Skipped

OSV-ScannerOpen Source Vulnerability database check

Skipped

OWASP Dep-Check

Design Wizard

An interactive wizard that guides you through creating distinctive, production-ready frontend designs.

Purpose

This skill orchestrates the complete design process:

Discovery - Understanding what to build
Research - Analyzing trends and inspiration
Direction - Selecting aesthetic approach
Colors - Choosing color palette
Typography - Selecting fonts
Implementation - Generating code
Review - Validating quality

Process Overview

┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│  Discovery  │ ──▶ │  Research   │ ──▶ │  Moodboard  │
└─────────────┘     └─────────────┘     └─────────────┘
                                              │
┌─────────────┐     ┌─────────────┐           ▼
│   Review    │ ◀── │  Generate   │ ◀── ┌─────────────┐
└─────────────┘     └─────────────┘     │ Colors/Type │
                                        └─────────────┘

Step 1: Discovery Questions

Ask the user about their project:

Question 1: What are you building?

Landing page
Dashboard
Blog/Content site
E-commerce
Portfolio
SaaS application
Mobile app UI
Other (describe)

Question 2: Project context

Personal project
Startup/new product
Established brand
Client work
Redesign of existing

Question 3: Target audience

Developers/technical
Business professionals
Creative/designers
General consumers
Young/Gen-Z
Luxury/premium market

Question 4: Background style preference

Pure white (#ffffff)
Off-white/warm (#faf8f5)
Light tinted (use lightest palette color)
Dark/moody (use darkest palette color)
Let me decide based on aesthetic

Question 5: Any specific inspiration?

URLs to analyze
Aesthetic keywords
Specific requirements
Skip (use trend research)

Step 2: Research Phase

Based on answers, optionally invoke:

trend-researcher - For current design trends
inspiration-analyzer - For specific URLs provided

Step 3: Moodboard Phase

Invoke moodboard-creator to:

Synthesize research into direction
Present options to user
Iterate until approved

Step 4: Aesthetic Selection

Based on discovery and moodboard, suggest aesthetics from catalog:

For Modern/Premium:

Dark & Premium - Sophisticated, high-contrast
Glassmorphism - Layered, translucent
Bento Grid - Structured, modular

For Bold/Distinctive:

Neobrutalism - Raw, impactful
Statement Hero - Typography-focused
Editorial - Magazine-inspired

For Minimal/Clean:

Scandinavian - Warm minimal
Swiss Typography - Grid-based clarity
Single-Page Focus - Concentrated impact

For Playful/Creative:

Y2K/Cyber - Retro-futuristic
Memphis - Colorful geometric
Kawaii - Cute, rounded

See references/aesthetics-catalog.md for full catalog.

Step 5: Color & Typography

Invoke specialized skills:

color-curator - Browse Coolors or select from fallbacks
typography-selector - Browse Google Fonts or use pairings

Map selections to Tailwind config.

Step 6: Code Generation

Generate single HTML file with:

Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[Project Title]</title>

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=[Font1]&family=[Font2]&display=swap" rel="stylesheet">

  <!-- Tailwind CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            // Custom colors from palette
          },
          fontFamily: {
            // Custom fonts
          }
        }
      }
    }
  </script>

  <style>
    /* Custom animations */
    /* Focus states */
    /* Reduced motion */
  </style>
</head>
<body>
  <!-- Semantic HTML structure -->
</body>
</html>

Requirements

Mobile-responsive (Tailwind breakpoints)
Semantic HTML (header, main, nav, footer, section)
Accessible (ARIA labels, focus states, contrast)
No Lorem ipsum (realistic placeholder content)
Animations respect prefers-reduced-motion
Keyboard navigable

Step 7: Self-Review

Check against references/anti-patterns.md:

[ ] No hero badges/pills
[ ] No generic fonts (Inter, Roboto, Arial)
[ ] No purple/blue gradients on white
[ ] No generic blob shapes
[ ] No excessive rounded corners
[ ] No predictable templates

Check references/design-principles.md:

[ ] Clear visual hierarchy
[ ] Proper alignment
[ ] Sufficient contrast
[ ] Appropriate white space
[ ] Consistent spacing

Check references/accessibility-guidelines.md:

[ ] 4.5:1 contrast ratio for text
[ ] Visible focus states
[ ] Semantic HTML
[ ] Alt text for images
[ ] Form labels

Output Format

Deliver:

Final HTML file
Brief explanation of design choices
List of fonts used (for reference)
Color palette summary

Iteration

If user requests changes:

Note specific feedback
Make targeted adjustments
Re-run self-review
Present updated version

Maximum 3 major iterations, then consolidate feedback.

References

references/design-principles.md - Core design principles with code
references/aesthetics-catalog.md - Full aesthetic catalog
references/anti-patterns.md - What NOT to do
references/accessibility-guidelines.md - WCAG compliance

davepoon/plugins/frontend-design-pro/skills/design-wizard

plugins/frontend-design-pro/skills/design-wizard/SKILL.md

Interactive design wizard that guides through a complete frontend design process with discovery, aesthetic selection, and code generation. Use for creating distinctive, production-ready UI.

2,941 stars

tools

Updated May 18, 2026

$ install --global

skillsauth

npx skillsauth add davepoon/buildwithclaude plugins/frontend-design-pro/skills/design-wizard

Install this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.

Security Scan Results

3 of 9 scanners reported clean

Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.

Scanners Passed

Scanners in report

Clean

TrivyContainer and dependency vulnerability scanner

95%

Clean

SemgrepStatic code analysis for vulnerabilities

95%

Clean

mcp-scan (Snyk)Model Context Protocol security validation

95%

Skipped

Snyk (dep)Open source security scanning

50%

Skipped

Socket.devSupply chain security analysis

50%

Skipped

VirusTotalMulti-engine malware detection

50%

Skipped

CrowdStrikeAdvanced threat intelligence

50%

Skipped

OSV-ScannerOpen Source Vulnerability database check

50%

Skipped

OWASP Dep-Check

50%

Last scanned: May 18, 2026, 2:27 AM184.3s5 files scanned

SKILL.md

description:: Interactive design wizard that guides through a complete frontend design process with discovery, aesthetic selection, and code generation. Use for creating distinctive, production-ready UI.

Design Wizard

An interactive wizard that guides you through creating distinctive, production-ready frontend designs.

Purpose

This skill orchestrates the complete design process:

Discovery - Understanding what to build
Research - Analyzing trends and inspiration
Direction - Selecting aesthetic approach
Colors - Choosing color palette
Typography - Selecting fonts
Implementation - Generating code
Review - Validating quality

Process Overview

┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│  Discovery  │ ──▶ │  Research   │ ──▶ │  Moodboard  │
└─────────────┘     └─────────────┘     └─────────────┘
                                              │
┌─────────────┐     ┌─────────────┐           ▼
│   Review    │ ◀── │  Generate   │ ◀── ┌─────────────┐
└─────────────┘     └─────────────┘     │ Colors/Type │
                                        └─────────────┘

Step 1: Discovery Questions

Ask the user about their project:

Question 1: What are you building?

Landing page
Dashboard
Blog/Content site
E-commerce
Portfolio
SaaS application
Mobile app UI
Other (describe)

Question 2: Project context

Personal project
Startup/new product
Established brand
Client work
Redesign of existing

Question 3: Target audience

Developers/technical
Business professionals
Creative/designers
General consumers
Young/Gen-Z
Luxury/premium market

Question 4: Background style preference

Pure white (#ffffff)
Off-white/warm (#faf8f5)
Light tinted (use lightest palette color)
Dark/moody (use darkest palette color)
Let me decide based on aesthetic

Question 5: Any specific inspiration?

URLs to analyze
Aesthetic keywords
Specific requirements
Skip (use trend research)

Step 2: Research Phase

Based on answers, optionally invoke:

trend-researcher - For current design trends
inspiration-analyzer - For specific URLs provided

Step 3: Moodboard Phase

Invoke moodboard-creator to:

Synthesize research into direction
Present options to user
Iterate until approved

Step 4: Aesthetic Selection

Based on discovery and moodboard, suggest aesthetics from catalog:

For Modern/Premium:

Dark & Premium - Sophisticated, high-contrast
Glassmorphism - Layered, translucent
Bento Grid - Structured, modular

For Bold/Distinctive:

Neobrutalism - Raw, impactful
Statement Hero - Typography-focused
Editorial - Magazine-inspired

For Minimal/Clean:

Scandinavian - Warm minimal
Swiss Typography - Grid-based clarity
Single-Page Focus - Concentrated impact

For Playful/Creative:

Y2K/Cyber - Retro-futuristic
Memphis - Colorful geometric
Kawaii - Cute, rounded

See references/aesthetics-catalog.md for full catalog.

Step 5: Color & Typography

Invoke specialized skills:

color-curator - Browse Coolors or select from fallbacks
typography-selector - Browse Google Fonts or use pairings

Map selections to Tailwind config.

Step 6: Code Generation

Generate single HTML file with:

Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[Project Title]</title>

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=[Font1]&family=[Font2]&display=swap" rel="stylesheet">

  <!-- Tailwind CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            // Custom colors from palette
          },
          fontFamily: {
            // Custom fonts
          }
        }
      }
    }
  </script>

  <style>
    /* Custom animations */
    /* Focus states */
    /* Reduced motion */
  </style>
</head>
<body>
  <!-- Semantic HTML structure -->
</body>
</html>

Requirements

Mobile-responsive (Tailwind breakpoints)
Semantic HTML (header, main, nav, footer, section)
Accessible (ARIA labels, focus states, contrast)
No Lorem ipsum (realistic placeholder content)
Animations respect prefers-reduced-motion
Keyboard navigable

Step 7: Self-Review

Check against references/anti-patterns.md:

[ ] No hero badges/pills
[ ] No generic fonts (Inter, Roboto, Arial)
[ ] No purple/blue gradients on white
[ ] No generic blob shapes
[ ] No excessive rounded corners
[ ] No predictable templates

Check references/design-principles.md:

[ ] Clear visual hierarchy
[ ] Proper alignment
[ ] Sufficient contrast
[ ] Appropriate white space
[ ] Consistent spacing

Check references/accessibility-guidelines.md:

[ ] 4.5:1 contrast ratio for text
[ ] Visible focus states
[ ] Semantic HTML
[ ] Alt text for images
[ ] Form labels

Output Format

Deliver:

Final HTML file
Brief explanation of design choices
List of fonts used (for reference)
Color palette summary

Iteration

If user requests changes:

Note specific feedback
Make targeted adjustments
Re-run self-review
Present updated version

Maximum 3 major iterations, then consolidate feedback.

References

references/design-principles.md - Core design principles with code
references/aesthetics-catalog.md - Full aesthetic catalog
references/anti-patterns.md - What NOT to do
references/accessibility-guidelines.md - WCAG compliance

Related Skills

davepoon/drill-status

development

VerifiedTrustedCommunity

Show drill-me learning progress — topics studied, cards due for review, weakest concepts, and what to study next. Use when the user asks what's due, how their learning is going, or for their drill-me status.

3,050SKILL.mdUpdated Jun 13, 2026

davepoon/drill-status

davepoon/drill-me

development

VerifiedTrustedCommunity

Teach the user a topic as an adaptive tutor — retrieval practice, spaced repetition with decay, and persistent memory in ~/.drill-me/. Use when the user wants to learn or be drilled on something, says "drill me on X", "teach me X", or wants to study a topic, a codebase, or a document.

3,050SKILL.mdUpdated Jun 13, 2026

davepoon/tracedocs

development

VerifiedTrustedCommunity

Turn any codebase into evidence-grounded Markdown docs plus a machine-readable index.json. Every claim cites its source; never invents deployment steps.

3,044SKILL.mdUpdated Jun 11, 2026

davepoon/whats-next

tools

VerifiedTrustedCommunity

Assesses the current state of the startup project and recommends what to focus on next. Use when there is a need or a question from the user to understand what the next steps are or what to focus on next.

3,021SKILL.mdUpdated Jun 5, 2026

Download

For Claude Desktop. Download once, then upload the file in the app — no terminal needed.

Need help? View full Cowork setup guide →

Install manually

Choose your platform

# Clone the repo
git clone https://github.com/davepoon/buildwithclaude.git

# Copy into Claude Code skills folder (global)
cp -r buildwithclaude/plugins/frontend-design-pro/skills/design-wizard ~/.claude/skills/

Claude Code Skills — official skills path docs.

Repository

davepoon/buildwithclaude

2,941 stars

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT