frontend-design

Files (1)

• SKILL.md

SKILL.md (first lines)

# frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

## Overview

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.

## Design Thinking

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

* **Purpose**: What problem does this interface solve? Who uses it?
* **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc.
* **Constraints**: Technical requirements (framework, performance, accessibility).
* **Differentiation**: What makes this UNFORGETTABLE?

**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work—intentionality matters more than intensity.

## Frontend Aesthetics Guidelines

Focus on:

* **Typography**: Use beautiful, unique, distinctive fonts. Avoid generic choices like Arial and Inter. Pair display fonts with refined body fonts.
* **Color & Theme**: Commit to cohesive aesthetics using CSS variables. Dominant colors with sharp accents outperform timid palettes.
* **Motion**: Use animations strategically. CSS-only for HTML; Motion library for React. Orchestrate page loads with staggered reveals and scroll-triggered interactions.
* **Spatial Composition**: Unexpected layouts, asymmetry, overlap, diagonal flow, grid-breaking elements, generous negative space or controlled density.
* **Backgrounds & Visual Details**: Create atmosphere through gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.

## What to Avoid

Never use generic AI aesthetics:
* Overused font families (Inter, Roboto, Arial, system fonts)
* Cliched color schemes (purple gradients on white)
* Predictable layouts and component patterns
* Cookie-cutter designs lacking context-specific character

Interpret creatively and vary between light/dark themes, different fonts, and distinctive aesthetics for each project.

## Implementation Principle

Match implementation complexity to the aesthetic vision. Maximalist designs require elaborate code with extensive animations; minimalist designs demand restraint and precision in spacing and typography. Elegance emerges from executing the vision thoroughly.

From Ntmib/jarvis-architect, MIT.

More from Ntmib/jarvis-architect