# Design Critique

> Evaluate UI/UX against the "Neural Flux" design system and "Wow Factor" requirements. Use when this capability is needed.

- Skill: `tomevault-io/design-critique-2` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/design-critique-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/design-critique-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/design-critique-2

---


# Design Critique Skill

Use this skill to validate every UI component before implementation.

## 🌌 The "Neural Flux" Design System

### Color Palette (CSS Variables from `index.css`)
| Variable | Value | Usage |
|----------|-------|-------|
| `--neon-violet` | `#a855f7` | Primary accent, glows, gradients |
| `--neon-cyan` | `#22d3ee` | Secondary accent, highlights |
| `--neon-blue` | `#3b82f6` | Links, interactive elements |
| `--neon-pink` | `#ec4899` | Tertiary accent |
| `--neon-green` | `#10b981` | Success states |
| `--color-void` | `#030308` | Background base |
| `--text-primary` | `#f0f0f5` | Main text |
| `--text-secondary` | `#9ca3af` | Subdued text |
| `--text-muted` | `#4b5563` | Dimmed labels |
| `--glass-bg` | `rgba(15, 15, 26, 0.45)` | Glass card backgrounds |
| `--glass-border` | `rgba(255,255,255,0.08)` | Glass borders |

> ❌ **NEVER hardcode hex values** in JSX data arrays. Use CSS variables via `style={{ '--project-color': color }}` and reference in CSS as `var(--project-color)`.

### Typography
- **Headers**: `Space Grotesk` (`--font-primary`)
- **Code/Data**: `JetBrains Mono` (`--font-mono`)
- **Fluid scaling**: All sizes use `clamp()` — e.g., `--text-4xl: clamp(2rem, 5vw, 3.5rem)`

### Visual Effects
| Class | Effect |
|-------|--------|
| `.glass` | Glassmorphism: `backdrop-filter: blur(var(--blur-md))` + glass border |
| `.glass-strong` | Heavier glass: `blur(var(--blur-lg))` + stronger border |
| `.gradient-text` | Violet gradient on text via `background-clip: text` |
| `.gradient-text-aurora` | Multi-color aurora gradient text |
| `.mono` | Applies `--font-mono` for data/code feel |

### Layouts
- Asymmetrical, overlapping, "Deconstructed" grids.
- Sections use `min-height: 100vh` with responsive padding.

## 🕵️ Evaluation Criteria

### 1. The "Wow Factor" Check
- [ ] Does this element do something when I hover over it?
- [ ] Does it entrance the user or just sit there?
- [ ] Is the animation curve "springy" (see `motion_guide` for configs)?
- [ ] Does it use `data-cursor` for custom cursor interaction?

### 2. Smoothness Check
- [ ] No layout shifts.
- [ ] Animations run at ≥55fps.
- [ ] Uses `transform`/`opacity` only (no `top/left/width/height`).

### 3. Cohesion Check
- [ ] Are we introducing a new color? **STOP**. Use existing CSS variables.
- [ ] Are we using a new font? **STOP**. Use `--font-primary` or `--font-mono`.
- [ ] Do new components follow the section header pattern? (section-number → section-title → section-subtitle)

## 🔄 Critique Workflow
1. **Observe**: Look at the proposed design/code.
2. **Compare**: Check against the 3 criteria above and actual CSS variables.
3. **Refine**: If it fails "Wow Factor", suggest a stronger interaction (e.g., "Add glow on hover using `--neon-violet`").

---
> Source: [gkrishna247/design-portfolio](https://github.com/gkrishna247/design-portfolio) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-06-04 -->