# How the Three-Dial System Works in Taste Skill: Variance, Motion, and Density Explained

> Master the three-dial system in Taste Skill. Understand how VARIANCE, MOTION, and DENSITY control your design experimentation, animation, and information density on a 1-10 scale.

- Repository: [Leon Lin/taste-skill](https://github.com/Leonxlnx/taste-skill)
- Tags: deep-dive
- Published: 2026-06-06

---

**The three-dial system in Leonxlnx/taste-skill governs every design decision through three global numeric variables—DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY—that control layout experimentation, animation depth, and information density on a 1-to-10 scale.**

The `Leonxlnx/taste-skill` repository encodes aesthetic choices as measurable constraints rather than subjective preferences. According to the source code in [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md), these runtime dials are read directly by the skill's parser and referenced throughout generated code, with no aliases such as `LAYOUT_VARIANCE`. The values determine whether an interface becomes a symmetric dashboard or an asymmetric masonry layout, a static form or a physics-driven experience, and an airy gallery or a packed cockpit.

## What the Three Dials Control

- **DESIGN_VARIANCE** (1–10, baseline 8): Layout experimentation. Low values enforce strict symmetry and centered 12-column grids. High values produce "artsy-chaos" masonry, fractional tracks, and deliberate empty zones.
- **MOTION_INTENSITY** (1–10, baseline 6): Animation depth. Low values restrict the UI to hover and active states. High values trigger cinematic scroll choreography via GSAP/ScrollTrigger or Motion with `useMotionValue`.
- **VISUAL_DENSITY** (1–10, baseline 4): Information density. Low values yield generous vertical spacing (`py-32`–`py-48`). High values produce tight paddings, line-based data tables, and monospaced numbers for dense dashboards.

## Baseline and Override Flow

The skill assigns dial values through a structured inference pipeline defined in Section 1.A of [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md).

1. **Brief inference.** The skill analyzes the project brief to produce a design read.
2. **Dial assignment.** It maps that read to numeric ranges using the inference table in [`SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/SKILL.md).
3. **User override.** The user may change any dial conversationally, and the new value replaces the baseline for the rest of the generation.

## How Each Dial Drives Output

Each dial's numeric range maps to concrete layout, motion, and density rules that the parser enforces during code generation.

### DESIGN_VARIANCE Layout Rules

In [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md), the DESIGN_VARIANCE dial selects grid behavior through three bands:

- **1–3:** Symmetric 12-column grids and centered layouts.
- **4–7:** Modest offsets, mixed aspect ratios, and left-aligned headers.
- **8–10:** Masonry-style layouts with fractional grid tracks and large empty zones, subject to the mobile override below.

Mobile guardrail: Asymmetric layouts must collapse to a single column on viewports narrower than `768px`. The parser reads this rule from the **DIAL DEFINITIONS** in Section 7 of [`SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/SKILL.md).

### MOTION_INTENSITY Animation Rules

The MOTION_INTENSITY dial gates every animation decision in Section 5 of [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md):

- **1–3:** Hover and active states only; no scroll-based animation.
- **4–7:** CSS transitions, simple entrance fades, and spring-based Motion values.
- **8–10:** Complex scroll-triggered choreography.

Accessibility guardrail: Any value above **3** must respect the user's `prefers-reduced-motion` setting. If `MOTION_INTENSITY > 4`, the page must contain at least one real animation—such as a hero entry, scroll-reveal, or hover physics—to satisfy the motion rules.

### VISUAL_DENSITY Spacing Rules

VISUAL_DENSITY scales visible UI chrome according to Section 4.9 of [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md):

- **1–3:** Airy gallery style with `py-32`–`py-48` spacing and few elements per viewport.
- **4–7:** Standard application spacing around `py-16`–`py-24`.
- **8–10:** Cockpit-style interfaces with tight paddings, line-based data tables, and monospaced numbers.

## Use-Case Preset Matrices

Taste Skill ships a preset matrix in Section 1.B of [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md). This matrix maps project archetypes directly to dial triples, letting the skill adopt a proven configuration without manual tuning. For example, an agency landing page maps to **9 · 8 · 3**—high variance, high motion, low density.

## Reading the Dials in Generated Code

The skill injects a `DialContext` that exposes the three values to React components. The following snippets show how generated projects consume these globals.

### Conditional Tailwind Layouts

```tsx
"use client";
import { useContext } from "react";
import { DialContext } from "./dial-context";

/* The skill injects a DialContext that provides the three numbers */
export function Hero() {
  const { DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY } =
    useContext(DialContext);

  // Choose a grid layout based on variance
  const gridClass =
    DESIGN_VARIANCE > 7
      ? "grid grid-cols-[2fr_1fr_1fr] gap-8"
      : DESIGN_VARIANCE > 4
      ? "grid grid-cols-2 gap-6"
      : "grid grid-cols-1 gap-4";

  // Choose animation intensity
  const animate = MOTION_INTENSITY > 5;
  const motionProps = animate
    ? { initial: { opacity: 0, y: 30 }, whileInView: { opacity: 1, y: 0 } }
    : {};

  // Choose spacing based on visual density
  const spacingClass = VISUAL_DENSITY > 7 ? "py-4" : "py-12";

  return (
    <section className={`${gridClass} ${spacingClass}`}>
      <motion.div {...motionProps}>
        <h1 className="text-5xl font-bold">Welcome</h1>
        <p className="mt-4 text-lg">
          A landing page that respects the three‑dial system.
        </p>
      </motion.div>
    </section>
  );
}

```

This component demonstrates how the three-dial system drives layout, spacing, and animation choices in a React/Tailwind project.

### Motion-Gated Component Rendering

```tsx
import { StickyStack } from "./StickyStack";

/* Only enable the sticky‑stack when motion intensity is high */
export function FeatureSection({ cards }) {
  const { MOTION_INTENSITY } = useContext(DialContext);

  return MOTION_INTENSITY > 6 ? (
    <StickyStack cards={cards} />
  ) : (
    <div className="grid gap-8">{cards.map((c, i) => <div key={i}>{c}</div>)}</div>
  );
}

```

When `MOTION_INTENSITY` is low, the heavy GSAP ScrollTrigger component is omitted entirely. This satisfies the "no unnecessary motion" rule and keeps bundle size down.

### Density-Based Content Pruning

```tsx
export function FeatureList({ items }) {
  const { VISUAL_DENSITY } = useContext(DialContext);
  // Keep only the top N items where N scales with density
  const maxItems = VISUAL_DENSITY < 4 ? 3 : VISUAL_DENSITY < 7 ? 6 : 10;
  const displayed = items.slice(0, maxItems);

  return (
    <ul className="grid gap-4">
      {displayed.map((it) => (
        <li key={it.id} className="text-base">{it.title}</li>
      ))}
    </ul>
  );
}

```

Higher `VISUAL_DENSITY` values surface more list items, while lower values enforce a sparser, gallery-like presentation.

## Key Source Files in Leonxlnx/taste-skill

- **[`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md)** — The central source of truth. Contains the three-dial definitions, baseline values, inference tables in Section 1.A, and preset matrices in Section 1.B. Layout sections such as **ANTI-CENTER BIAS** and **BENTO BACKGROUND DIVERSITY** read these values to conditionally enable patterns.
- **[`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md) (Section 7)** — The **DIAL DEFINITIONS** subsection. Supplies the parser with constant ranges and the mobile-override behavior that collapses asymmetric layouts below `768px`.
- **[`README.md`](https://github.com/Leonxlnx/taste-skill/blob/main/README.md)** — Surfaces a high-level "Settings" table for quick reference when installing the skill.
- **[`CHANGELOG.md`](https://github.com/Leonxlnx/taste-skill/blob/main/CHANGELOG.md)** — Documents the v2 rewrite that introduced the dial-driven architecture, explaining why the three-dial system replaced earlier design logic.

## Summary

- The three-dial system in `Leonxlnx/taste-skill` replaces arbitrary design choices with three global numeric variables: **DESIGN_VARIANCE**, **MOTION_INTENSITY**, and **VISUAL_DENSITY**.
- Values are set during brief inference via Section 1.A of [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md) and can be overridden conversationally at any time.
- Each dial uses a 1–10 scale with concrete thresholds for grid symmetry, animation complexity, and vertical spacing.
- Preset matrices in Section 1.B map common project types to dial triples for instant, validated configurations.
- The parser enforces mobile overrides and `prefers-reduced-motion` compliance by reading the dial definitions in Section 7 of [`SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/SKILL.md).

## Frequently Asked Questions

### What is the range and default baseline for each dial?

Each dial accepts an integer from 1 to 10. According to [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md), the typical baselines are **DESIGN_VARIANCE = 8**, **MOTION_INTENSITY = 6**, and **VISUAL_DENSITY = 4**. These defaults favor experimental layouts, moderate motion, and relatively airy interfaces.

### Can a user override the dials after generation has started?

Yes. The skill supports conversational overrides. Once a user requests a new value, the overridden dial replaces the baseline for the remainder of the generation session. There are no aliases such as `LAYOUT_VARIANCE`; the override applies directly to the global variable.

### How does Taste Skill handle reduced motion preferences?

When **MOTION_INTENSITY** exceeds 3, the skill must respect the user's `prefers-reduced-motion` setting. This guardrail is encoded in the motion rules of [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md) and applies to all scroll-triggered choreography and physics-driven animations.

### Where are the dial definitions and mobile rules documented?

The dial definitions, technical ranges, and mobile-override behaviors are documented in Section 7 of [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md). This section supplies the parser with the constant ranges needed to enforce behaviors such as collapsing asymmetric layouts to a single column below 768 pixels.