# Design Taste Frontend

> Senior UI/UX engineering system that enforces metric-based design rules, strict component architecture, CSS hardware acceleration, and balanced design engineering. Use when building premium frontend interfaces, dashboards, or SaaS UIs. Combats generic AI design patterns.

- **Type:** Skill
- **Install:** `agentstack add skill-ariadoss-superskills-design-taste-frontend`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [ariadoss](https://agentstack.voostack.com/s/ariadoss)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [ariadoss](https://github.com/ariadoss)
- **Source:** https://github.com/ariadoss/superskills/tree/main/design-skills/design-taste-frontend

## Install

```sh
agentstack add skill-ariadoss-superskills-design-taste-frontend
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Design Taste Frontend — High-Agency UI/UX Engineering System

A comprehensive frontend architecture guide establishing baseline configurations and engineering directives for premium interface design.

## Core Configuration Dials

Three primary dials (adjustable per request):

| Dial | Default | Range | Effect |
|------|---------|-------|--------|
| **Design Variance** | 8 | 1–10 | How distinctive vs. conventional the design is |
| **Motion Intensity** | 6 | 1–10 | Amount and complexity of animations |
| **Visual Density** | 4 | 1–10 | Information density (4 = comfortable) |

Users can override via explicit requests ("make it more minimal", "less animation").

## Architectural Requirements

- **Framework**: React/Next.js with Server Components as default
- **Styling**: Tailwind CSS for 90% of styling coverage
- **Viewport**: `min-h-[100dvh]` not `h-screen` (prevents iOS Safari layout issues)
- **Dependencies**: Always verify in `package.json` before importing

## Design Engineering Directives

### Typography
- Avoid Inter for premium contexts — choose distinctive alternatives
- Never generic system font stacks for display text
- Establish typographic hierarchy before layout

### Color
- Maximum one accent color below 80% saturation
- No pure black (`#000000`) — use off-black (`#0a0a0a`, `#111111`)
- No purple/blue AI aesthetic gradients (most identifiable AI design fingerprint)

### Layout
- Reject centered Hero sections when Design Variance > 4
- Use asymmetric grids, not three equal columns for feature rows
- Bento grid layouts for dashboard-style content

### Motion
- Spring physics: `stiffness: 100, damping: 20` (Framer Motion)
- Staggered animations with `staggerChildren`
- Perpetual micro-interactions on dashboard cards (not on every click)

## Bias Correction — Anti-AI-Default Patterns

Combat common AI design defaults:
- Liquid Glass refraction effects for depth
- Magnetic micro-physics for interactive elements
- Motion that responds to cursor proximity without React state

## Performance Standards

- Animate exclusively via `transform` and `opacity` (GPU-accelerated)
- Grain/noise filters only on fixed, non-interactive `::before`/`::after` pseudo-elements
- Z-index strictly constrained (document z-index layers at component level)

## Strictly Forbidden

- Emojis anywhere in code, markup, or text content (replace with icon library)
- Pure neon glows or oversaturated accent colors
- Text-fill gradients
- Inter font for premium/display contexts
- Three-column equal card layouts as feature rows
- Generic placeholder names ("John Doe", "Acme Corp")
- AI startup terminology ("Nexus", "Streamline", "Elevate")
- Broken Unsplash image links

## The Bento 2.0 Dashboard Paradigm

Modern SaaS dashboards use five card archetypes:

1. **Intelligent Lists** — sortable, filterable, with status indicators
2. **Command Inputs** — search/filter bars with keyboard shortcuts
3. **Live Status** — real-time indicators with subtle pulse animations
4. **Wide Data Streams** — sparklines, mini-charts, trend indicators
5. **Contextual UI Focus** — detail panels that expand in-place

Each card type has perpetual micro-interactions using spring physics. Cards breathe — they're never static.

## Pre-Flight Checklist

Before delivering any UI:
- [ ] No pure black colors used
- [ ] No Inter font in display/hero contexts
- [ ] Animations use only transform/opacity
- [ ] Design Variance setting respected
- [ ] No emojis present
- [ ] No three-column equal-width feature grid
- [ ] Viewport uses dvh not vh
- [ ] Dependencies verified in package.json

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [ariadoss](https://github.com/ariadoss)
- **Source:** [ariadoss/superskills](https://github.com/ariadoss/superskills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-ariadoss-superskills-design-taste-frontend
- Seller: https://agentstack.voostack.com/s/ariadoss
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.