Frontend Design

What it does

This skill assists in creating distinctive, production-ready frontend interfaces that move beyond generic AI aesthetics. It guides the development of components, pages, applications, or entire user interfaces by focusing on aesthetic details and creative choices while generating functional HTML/CSS/JS (and React) code. The skill emphasizes a clear conceptual direction and meticulous refinement to produce visually striking and memorable results.

When to use it

• You need help designing a specific frontend component or page for an application.
• You want to create a user interface with a unique aesthetic that avoids common AI-generated design patterns.
• You're building a website (e.g., for a community football club) and require guidance on visual style, typography, color schemes, and motion effects.
• You are using Tailwind CSS and Next.js with static site generation (SSG).

Key capabilities

• Aesthetic Direction: Guides users to define a clear aesthetic direction (e.g., minimalist/clean with glassmorphism) before coding.
• Typography Guidance: Provides advice on font selection, sizing, and spacing for modern aesthetics.
• Color & Theme Management: Encourages cohesive color palettes using CSS variables and suggests incorporating team colors with accents like greens and gold.
• Motion Design: Offers suggestions for animations and micro-interactions, prioritizing impactful moments and scroll-triggering effects.
• Spatial Composition Techniques: Promotes unconventional layouts, asymmetry, and the use of negative space or controlled density.
• Background & Visual Detail Creation: Suggests techniques like gradient meshes, textures, shadows, and custom cursors to add depth and atmosphere.
• Code Generation: Produces working HTML/CSS/JS (and React) code implementing the design guidelines.

Example prompts

• "Design a component for displaying football match results with a minimalist aesthetic using Tailwind CSS."
• "Create a page layout for a community football club website, incorporating glassmorphism and team colors."
• "I want to build a Next.js application with SSG. Guide me on creating an unforgettable user experience with unique design elements."

Tips & gotchas

• Define your aesthetic: Clearly articulate the desired tone (e.g., minimalist, maximalist) before starting development.
• Technical Constraints: Be prepared to specify technical requirements like Tailwind CSS and Next.js SSG.
• Avoid generic AI aesthetics: The skill actively discourages overused fonts, cliched color schemes, and predictable layouts.