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/anti-ui-slop

development

VerifiedTrustedCommunity

Stop coding agents from shipping generic UI. Use UIZZE's 800,000+ real web and iOS screens to build product-specific interfaces, define a design contract, cover required states, and run a hard finish gate. Use for web or iOS UI design, implementation, redesign, critique, and pre-ship review in Codex, Claude Code, Cursor, Copilot, and other coding agents.

3,220SKILL.mdUpdated Jul 27, 2026

davepoon/anti-ui-slop

davepoon/theboardroom

development

VerifiedTrustedCommunity

Convene an AI executive board of directors (CEO, CFO, COO, CLO, CISO sub-agent personas) to vet a business idea, product concept, new service offering, M&A target, or operational initiative — and deliver an integrated board memo with a Go/No-Go recommendation. Use this skill whenever the user wants an idea vetted, stress-tested, or reviewed from multiple executive perspectives; asks to "present this to the board," "run this by the boardroom," "vet this idea," "poke holes in this plan," or "prep me for a board meeting"; or shares a business plan, pitch, proposal, or initiative document and asks for structured executive feedback. Also trigger when the user asks for a Go/No-Go decision, risk review across finance/legal/security/operations, or preparation for presenting an initiative to real leadership.

3,183SKILL.mdUpdated Jul 16, 2026

davepoon/theboardroom

davepoon/travel-agent-skill

data-ai

VerifiedTrustedCommunity

私人旅行管家 — 从出发地到目的地的完整行程规划+攻略导出。输入出发地、目的地、天数、预算、风格偏好，自动输出闭环行程，包含交通推荐、酒店推荐、美食路线、每日预算，并可选生成攻略。当用户提到「做攻略」「旅行规划」「旅游计划」「行程安排」时使用。

3,180SKILL.mdUpdated Jul 15, 2026

davepoon/travel-agent-skill

davepoon/ontoly-software-graph

tools

VerifiedTrustedCommunity

Use Ontoly's deterministic Software Graph and MCP server for codebase architecture, request tracing, dependency analysis, and impact analysis.

3,180SKILL.mdUpdated Jul 15, 2026

davepoon/ontoly-software-graph

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