WebFront — Distinctive & Production-Grade Frontend Design

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
• Deciding Factors: references/real-estate/deciding-factors.md
• Visual Themes: references/real-estate/themes.md
• SEO & Keywords: 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
• Deciding Factors: references/beautician/deciding-factors.md
• Visual Themes: references/beautician/themes.md
• SEO & Keywords: 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.