npx claudepluginhub davepoon/buildwithclaude --plugin frontend-design-proThis skill is limited to using the following tools:
Analyze websites to extract design inspiration including colors, typography, layouts, and UI patterns.
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.
Analyze websites to extract design inspiration including colors, typography, layouts, and UI patterns.
When a user provides inspiration URLs, this skill:
// Get or create browser tab
tabs_context_mcp({ createIfEmpty: true })
tabs_create_mcp()
navigate({ url: "https://example.com", tabId: tabId })
Take multiple screenshots to capture the full experience:
// Full page screenshot
computer({ action: "screenshot", tabId: tabId })
// Scroll and capture more
computer({ action: "scroll", scroll_direction: "down", tabId: tabId })
computer({ action: "screenshot", tabId: tabId })
// Mobile view
resize_window({ width: 375, height: 812, tabId: tabId })
computer({ action: "screenshot", tabId: tabId })
From screenshots and page content, extract:
Note hex codes where visible.
Create a structured analysis:
## Website Analysis: [URL]
### Screenshots
[Describe key screenshots taken]
### Color Palette
| Role | Hex | Usage |
|------|-----|-------|
| Primary | #xxx | [Where used] |
| Secondary | #xxx | [Where used] |
| Background | #xxx | [Where used] |
| Text | #xxx | [Where used] |
| Accent | #xxx | [Where used] |
### Typography
- **Headlines**: [Font name/description] - [weight]
- **Body**: [Font name/description] - [weight]
- **Scale**: [Size relationships]
- **Line height**: [Observation]
### Layout Patterns
- Grid: [Description]
- Spacing: [Description]
- Sections: [Description]
### UI Elements
- **Buttons**: [Description]
- **Cards**: [Description]
- **Navigation**: [Description]
- **Footer**: [Description]
### Key Takeaways
1. [What makes this design distinctive]
2. [Pattern worth replicating]
3. [Specific technique to use]
### What to Avoid
- [Any patterns from this site that are overused]
- [Elements that wouldn't translate well]
When analyzing multiple URLs:
If browser tools are unavailable:
The analysis should provide:
See references/extraction-techniques.md for detailed extraction methods.