From frontend-design-pro
Interactive wizard guiding frontend design process: discovery questions, trend research, moodboard creation, aesthetic selection, and code generation for production-ready UI.
npx claudepluginhub davepoon/buildwithclaude --plugin frontend-design-proThis skill is limited to using the following tools:
An interactive wizard that guides you through creating distinctive, production-ready frontend designs.
Guides Payload CMS config (payload.config.ts), collections, fields, hooks, access control, APIs. Debugs validation errors, security, relationships, queries, transactions, hook behavior.
Builds scalable data pipelines, modern data warehouses, and real-time streaming architectures using Spark, dbt, Airflow, Kafka, and cloud platforms like Snowflake, BigQuery.
Builds production Apache Airflow DAGs with best practices for operators, sensors, testing, and deployment. For data pipelines, workflow orchestration, and batch job scheduling.
An interactive wizard that guides you through creating distinctive, production-ready frontend designs.
This skill orchestrates the complete design process:
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ Discovery │ ──▶ │ Research │ ──▶ │ Moodboard │
└─────────────┘ └─────────────┘ └─────────────┘
│
┌─────────────┐ ┌─────────────┐ ▼
│ Review │ ◀── │ Generate │ ◀── ┌─────────────┐
└─────────────┘ └─────────────┘ │ Colors/Type │
└─────────────┘
Ask the user about their project:
Based on answers, optionally invoke:
trend-researcher - For current design trendsinspiration-analyzer - For specific URLs providedInvoke moodboard-creator to:
Based on discovery and moodboard, suggest aesthetics from catalog:
For Modern/Premium:
For Bold/Distinctive:
For Minimal/Clean:
For Playful/Creative:
See references/aesthetics-catalog.md for full catalog.
Invoke specialized skills:
color-curator - Browse Coolors or select from fallbackstypography-selector - Browse Google Fonts or use pairingsMap selections to Tailwind config.
Generate single HTML file with:
<!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>
Check against references/anti-patterns.md:
Check references/design-principles.md:
Check references/accessibility-guidelines.md:
Deliver:
If user requests changes:
Maximum 3 major iterations, then consolidate feedback.
references/design-principles.md - Core design principles with codereferences/aesthetics-catalog.md - Full aesthetic catalogreferences/anti-patterns.md - What NOT to doreferences/accessibility-guidelines.md - WCAG compliance