frontend-design

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

Design Thinking

Before coding, understand the context and commit to a BOLD aesthetic direction:

• Purpose: The purpose of this interface is to allow users to interact with a community football club's website to reach useful information efficiently.
• Tone: Tone should be a mix between minimalist / clean design with glassmorphism lots of space and easy to read font.
• Constraints: Technical requirements for building frontend includes tailwindcss and Nextjs targeting SSG (static site generation).
• Differentiation: What makes this UNFORGETTABLE? Ease of use, accessibility and unique design elements.

CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.

Then implement working code (HTML/CSS/JS, React) that is:

• Production-grade and functional
• Visually striking and memorable