---
name: webfront
description: Create highly distinctive, production-grade frontend interfaces with exceptional aesthetic quality and strong creative direction. Activates for requests to build/design web UIs—components, pages, landing pages, dashboards, posters, full apps, styling passes, and visual artifacts. Generates memorable, non-generic code that feels intentionally designed rather than default AI output.
---

# WebFront — Distinctive & Production-Grade Frontend Design

```bash
npx skills add https://github.com/JMWinsta/Winston-s-Skills --skill webfront
```

> [!TIP]
> This skill forces the creation of **visually striking, cohesive, and memorable** frontend work that deliberately escapes generic "AI slop" aesthetics.

## Activation Triggers
Use `/frontend-design` or let auto-activate when asking to:
- "build / create / design / make" a component, page, screen, layout, dashboard, landing page, app UI, poster, or visual artifact.
- "style / beautify / redesign / polish" any existing UI code.
- "improve the design of" or "make this look better / more modern / distinctive".
- Generate HTML/CSS/JS, React/Vue/Svelte components, Tailwind + custom CSS, shadcn/ui extensions, Framer Motion animations, etc.
- Auto-activate ONLY for frontend/UI/visual work. Do NOT activate for backend, APIs, infra, or data tasks.


## Domain Knowledge & References
This skill uses a **Progressive Disclosure** system. For specific industry standards, themes, and deciding factors, you MUST reference the following materials:

### Real Estate / Property Tech
When building for real estate, property listings, or developer pages:
- **Core Instructions**: [references/real-estate/instructions.md](references/real-estate/instructions.md)
- **Deciding Factors**: [references/real-estate/deciding-factors.md](references/real-estate/deciding-factors.md)
- **Visual Themes**: [references/real-estate/themes.md](references/real-estate/themes.md)
- **SEO & Keywords**: [references/real-estate/seo-references.md](references/real-estate/seo-references.md)

### Beauty / Aesthetics / Salon
When building for beauticians, salons, spas, or luxury beauty brands:
- **Core Instructions**: [references/beautician/instructions.md](references/beautician/instructions.md)
- **Deciding Factors**: [references/beautician/deciding-factors.md](references/beautician/deciding-factors.md)
- **Visual Themes**: [references/beautician/themes.md](references/beautician/themes.md)
- **SEO & Keywords**: [references/beautician/seo-references.md](references/beautician/seo-references.md)

## Step-by-Step Process

1. **Quick Context Absorption**
   Identify purpose, audience, and technical stack. Identify the domain (Real Estate, Beautician, etc.) and load the relevant reference file.

2. **Commit to One Bold Aesthetic Direction**
   Pick **one** clear conceptual lane (e.g., Brutalist, Museumcore, Hyper-minimal Industrial, Retro-futurist). **Never neutral, safe, or default ‘modern minimal’ unless explicitly requested.**

3. **Execute with Precision**
   - **Typography**: Pair distinctive fonts (e.g., Playfair Display + JetBrains Mono). Avoid Inter/system-ui defaults.
   - **Color**: Use vivid accents and CSS variables + HSL. Add subtle texture overlays.
   - **Motion**: Prefer CSS-first or Framer Motion. One orchestrated entrance > scattered wiggles.
   - **Layout**: Break grids intentionally. Use asymmetry, diagonal flow, and bleed.

4. **Output Rules**
   - Deliver **complete, copy-paste-ready code**.
   - Use modern syntax (ESM, container queries, `:has()`).
   - Include accessibility basics (ARIA, focus states).
   - Wrap code in appropriate language tags.

Make every interface feel **unmistakably designed**, never accidentally generated. Commit fully to the chosen direction. Vary aesthetics aggressively — no convergence toward a house style.