frontend-design

The frontend-design skill is a specialized tool for developers and designers who need to generate high-quality, memorable web interfaces that bypass the limitations of 'AI slop' aesthetics. Instead of relying on common font families like Inter or Roboto, or predictable purple-gradient layouts, this skill encourages the adoption of bold, intentional design directions ranging from brutalist and maximalist to refined minimalist and retro-futuristic styles.

This skill is ideal for building React components, HTML/CSS layouts, full landing pages, dashboards, and interactive web artifacts. It functions by requiring a strict 'Design Thinking' process before code generation, ensuring that the visual output matches the specific purpose, target audience, and atmospheric goals of the project. It focuses heavily on typography, creative spatial composition, advanced motion design, and sophisticated background treatments such as noise textures and gradient meshes.

• Executes production-grade, functional code across major frameworks including React, Vue, and vanilla HTML/CSS/JS.

• Enforces a design-first methodology that mandates choosing an extreme aesthetic direction (e.g., editorial, organic, industrial, art deco) to avoid generic outputs.

• Prioritizes high-impact visual details, such as custom font pairings, staggered animation reveals, and grid-breaking layouts.

• Provides guidelines for implementing CSS variables for consistency and maintainability in complex UIs.

• Uses advanced CSS techniques to create depth and atmosphere, including layered transparencies, grain overlays, and unique shadows.

• Ensures technical constraints like accessibility and performance are integrated into the creative design process.

• Users should provide specific context such as the intended purpose, brand tone, or technical constraints to achieve the best results.

• For complex interfaces, specify the required tech stack (e.g., Tailwind, Framer Motion, or plain CSS).

• Best used when the goal is to differentiate a product's visual identity or build a polished, professional-grade interface that feels handcrafted.

• Avoid requesting generic UI patterns; instead, specify the emotional or stylistic goal (e.g., 'brutalist/raw' or 'luxury/refined') to trigger the most effective design responses.

• Ensure all generated code is reviewed for browser compatibility and responsive design logic, as the skill prioritizes stylistic impact alongside technical functionality.