# Frontend Design

> Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics while maintaining strong structure and usability.

- Skill: `whyashthakker/frontend-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add whyashthakker/frontend-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/whyashthakker/frontend-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: Complete terms in LICENSE.txt
- Author: whyashthakker (https://skillmd.com/u/whyashthakker)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/whyashthakker/frontend-design

---

-----------------------------------

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics while maintaining strong layout structure, hierarchy, and usability for real-world applications.

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**: What problem does this interface solve? Who uses it?
* **Tone**: Pick a clear direction: minimal, refined, editorial, futuristic, playful, industrial, etc. Avoid randomness.
* **Constraints**: Technical requirements (framework, performance, accessibility).
* **Differentiation**: What makes this interface feel premium and intentional?

**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Creativity must support usability, not break it.

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

* Production-grade and functional
* Visually refined and intentional
* Cohesive with a clear aesthetic system
* Structured with proper layout hierarchy

---

## Frontend Aesthetics Guidelines

Focus on:

* **Typography**: Use distinctive display fonts where appropriate, but maintain readability for UI. Avoid overuse of decorative fonts in dashboards.
* **Color & Theme**: Use a controlled palette. Brand color should be used intentionally, not everywhere.
* **Motion**: Use subtle, meaningful animations. Prioritize clarity over excessive motion.
* **Spatial Composition**: Maintain alignment and grid consistency. Avoid random layouts in dashboards.
* **Backgrounds & Visual Details**: Add depth using subtle gradients, shadows, and layering — not heavy visual noise.

Avoid generic AI design patterns and inconsistent styling.

---

## Layout & Hierarchy System (CRITICAL FOR DASHBOARDS)

### 1. Layering System

Always structure UI into:

* Page layer → `bg-background` or `bg-surface-base`
* Section layer → grouped containers with spacing
* Card layer → `bg-card` with border and shadow

Never place content directly on the page without separation.

---

### 2. Spacing System

Use consistent spacing scale:

* 8px → small gaps
* 16px → internal padding
* 24px → between components
* 32px → between sections

Avoid arbitrary spacing values.

---

### 3. Card Design Pattern

All cards must follow:

* `bg-card`
* `border border-border`
* `rounded-xl` or `rounded-2xl`
* `shadow-sm` or `shadow-md`
* `p-4` to `p-6`

Optional enhancements:

* `hover:shadow-md`
* `transition-all duration-200`

---

### 4. Grid & Alignment

* Use consistent grids (`grid-cols-2`, `grid-cols-3`, `grid-cols-12`)
* Maintain equal heights where needed
* Use consistent `gap-4` or `gap-6`
* Align text and elements strictly

---

### 5. Color Usage Rules

* Brand color → buttons, active states, highlights
* Neutral colors → backgrounds, cards, text
* Avoid overusing brand color across the UI

---

### 6. Text Hierarchy

Use clearly:

* `text-text-primary` → headings
* `text-text-secondary` → descriptions
* `text-text-muted` → metadata only

Avoid excessive muted text.

---

### 7. Shadows & Depth

Use subtle elevation:

* `shadow-sm` → default
* `shadow-md` → emphasis

Avoid heavy shadows or glow effects in dashboards.

---

## Tailwind Usage Rules

* Always use design tokens (`bg-card`, `text-text-primary`, etc.)
* Do not hardcode colors unless necessary
* Maintain consistency with global theme variables
* Prefer reusable patterns over one-off styling

---

## Interaction Guidelines

* Hover → subtle (border, shadow, background)
* Transitions → `duration-200 ease-out`
* Clickable elements must be clearly visible
* Avoid hidden or confusing interactions

---

## What to Avoid

* No random gradients or excessive decoration
* No inconsistent spacing
* No flat UI without borders or separation
* No overuse of muted text
* No mixing too many visual styles

---

## Infloq Brand Guidelines

When building UI for Infloq, use the following established design system:

### Color Palette

**Brand Colors (Primary)**

* Primary: `#2520BE`
* Hover: `#3730D9`
* Accent: `#4F46E5`
* Glow: `#6366F1`

**Mascot (Dark Backgrounds)**

* Default: `#1C254F`
* Light: `#2D3A6B`

**UI Colors**

* Border: `#A5B4FC`
* Section: `#EEF2FF`
* Background: `#F8FAFF`
* Card: `#FFFFFF`

**Text Colors**

* Primary: `#0B1220`
* Secondary: `#475569`
* Muted: `#94A3B8`
* OnDark: `#E0E7FF`
* OnDarkMuted: `#C7D2FE`

---

### Typography

* Display: ClashDisplay
* Body: Inter

---

### Usage Notes

* Use brand colors for CTAs and active elements
* Use mascot colors for dark sections
* Maintain strong contrast for readability
* Use gradients subtly for depth, not decoration

---

## Final Principle

Creativity is important, but structure is mandatory.

Every UI must feel:

* Clear
* Consistent
* Well-spaced
* Visually separated
* Production-ready

The output should look like a real SaaS product, not an experimental design.