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

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, 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.

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.
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, 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.

MOTION_INTENSITY Animation Rules

The MOTION_INTENSITY dial gates every animation decision in Section 5 of 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:

• 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. 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

"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

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

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 — 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 (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 — Surfaces a high-level "Settings" table for quick reference when installing the skill.
• 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 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.

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, 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 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. 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}