How the Pre-Flight Check Process in Taste Skill Validates Frontend Code Before Shipping

The Pre-Flight Check process in Taste Skill is a mandatory deterministic gate defined in Section 14 of the skill definition that evaluates every generated frontend asset against a comprehensive matrix of boolean checklist items, rejecting any HTML, CSS, or JavaScript that fails to satisfy all design-system rules, accessibility standards, and performance constraints.

The Pre-Flight Check process in Taste Skill operates as the final validation layer in the Leonxlnx/taste-skill repository, ensuring that AI-generated frontend code meets production-grade standards before it is considered shippable. This systematic approach transforms volatile LLM outputs into deterministic, design-system-aligned deliverables by enforcing a hard gate that must be cleared before any code reaches deployment pipelines.

What Is the Pre-Flight Check Process?

According to the source code in skills/taste-skill/SKILL.md, the Pre-Flight Check is a mandatory "Final Pre-Flight Check" located in Section 14 that functions as a deterministic matrix of boolean items. Every checkbox in this matrix must evaluate to true; if any item remains unchecked, the generation loop restarts and the agent must revise the design. This process runs immediately before any HTML, CSS, or JavaScript is considered shipped, making it a non-negotiable quality gate that guarantees shipping-ready output.

The Boolean Matrix of Verification Steps

The checklist covers nine critical dimensions of frontend quality, each mapped to specific sections of the skill definition and line numbers in the source file.

Brief Inference and Design Dials

The process first verifies that the agent has understood the requirements through a one-line "Design Read" (Section 0.B), ensuring a meta tag or comment confirms brief comprehension before code generation begins. It then validates that the three core dials—DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY—are explicitly configured (Section 1), preventing silent fallback to default values that could compromise layout decisions.

Design-System Selection and Redesign Audits

When applicable, the check confirms that an official design system is selected (Section 2.A), avoiding redundant UI kit reinvention while ensuring accessibility token consistency. For existing sites, the process detects redesign mode and applies audit rules from Section 11 to guarantee SEO, information architecture, and branding continuity.

Mechanical Style Guards

The Pre-Flight Check enforces mechanical style guards through simple code-style scans and count-based formulas. These include prohibitions on em-dashes (Section 4.6), limits on eyebrow label counts relative to section counts, bans on duplicate CTA intents, prevention of zig-zag capitalization patterns, and strict CTA text wrapping rules. These checks target the most common AI-generated sloppiness that leads to broken production pages.

Accessibility and Performance Gates

Accessibility validation includes WCAG AA contrast ratios for buttons and forms, plus reduced-motion fallbacks when MOTION_INTENSITY exceeds 3 (Sections 6.A-6.B). Performance guards enforce Core Web Vitals targets, mandate min-h-[100dvh] over h-screen, and prohibit expensive scroll listeners like window.addEventListener('scroll') (Sections 6.D-9.A). Additionally, the motion-motivation rule requires every animation to document its intent—whether for hierarchy, storytelling, feedback, or state transition—preventing gratuitous motion (Section 5).

Automating the Pre-Flight Check

Developers can implement automated validators that mirror the manual checklist enforced by the Taste Skill agent, integrating these checks into CI/CD pipelines.

JavaScript DOM Validation Utility

The following JavaScript utility parses generated HTML and returns an array of failures, returning an empty array only when the code is ready to ship:

/**
 * Run Taste‑Skill’s final pre‑flight checklist.
 * Returns an array of failed items; an empty array means “ready to ship”.
 */
export function runPreFlightCheck(html) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, "text/html");

  const failures = [];

  // 1️⃣ Brief inference – look for the one‑line design read comment
  if (!doc.querySelector('meta[name="design-read"]')) {
    failures.push("Missing design‑read meta tag");
  }

  // 2️⃣ CTA wrap ban – ensure button text stays on one line (simple heuristic)
  doc.querySelectorAll("button, a[data-cta]").forEach((el) => {
    const style = getComputedStyle(el);
    if (style.whiteSpace !== "nowrap") {
      failures.push(`CTA "${el.textContent.trim()}" may wrap`);
    }
  });

  // 3️⃣ Duplicate CTA intent – normalize intent strings and look for duplicates
  const intents = new Set();
  doc.querySelectorAll("[data-cta-intent]").forEach((el) => {
    const intent = el.dataset.ctaIntent.toLowerCase();
    if (intents.has(intent)) {
      failures.push(`Duplicate CTA intent "${intent}"`);
    }
    intents.add(intent);
  });

  // 4️⃣ Eyebrow count – count elements that match the eyebrow pattern
  const eyebrowEls = doc.querySelectorAll("[class*='uppercase'][class*='tracking']");
  const sections = doc.querySelectorAll("section");
  if (eyebrowEls.length > Math.ceil(sections.length / 3)) {
    failures.push("Too many eyebrow labels");
  }

  // 5️⃣ Em‑dash ban
  if (doc.body.textContent.includes("—") || doc.body.textContent.includes("–")) {
    failures.push("Em‑dash found in visible copy");
  }

  // 6️⃣ Button contrast (simplified – compares computed luminance)
  doc.querySelectorAll("button, a[data-cta]").forEach((el) => {
    const bg = window.getComputedStyle(el).backgroundColor;
    const fg = window.getComputedStyle(el).color;
    // …insert WCAG contrast calculation here…
    // if contrast < 4.5 push failure
  });

  // Additional checks (theme lock, colour consistency, motion intent, etc.)
  // can be added following the same pattern.

  return failures;
}

This implementation mirrors the design-read meta requirement from Section 0.B, the CTA-wrap and duplicate-intent logic from lines 226-227 of SKILL.md, the eyebrow count rule at line 256, and the em-dash ban at line 699.

CI/CD Bash Script for Static Builds

For automated pipelines, the following Bash script validates a static HTML build after compilation but before deployment:

#!/usr/bin/env bash

# pre‑flight.sh – run after `npm run build` and before deployment

HTML_DIR="out"                     # Next.js static export folder

FAILS=0

# 1️⃣ Check for design‑read meta tag

if ! grep -q '<meta name="design-read"' "$HTML_DIR"/*.html; then
  echo "❌ Missing design‑read meta tag"
  ((FAILS++))
fi

# 2️⃣ Detect any em‑dash characters

if grep -q '—\|–' "$HTML_DIR"/*.html; then
  echo "❌ Em‑dash characters found"
  ((FAILS++))
fi

# 3️⃣ Simple duplicate‑CTA‑intent check (assumes data‑cta‑intent attr)

if grep -ho 'data-cta-intent="[^\"]*"' "$HTML_DIR"/*.html \
   | sort | uniq -d | grep -q .; then
  echo "❌ Duplicate CTA intents detected"
  ((FAILS++))
fi

# 4️⃣ Eyebrow count vs. section count

EYEBROWS=$(grep -c 'uppercase.*tracking' "$HTML_DIR"/*.html)
SECTIONS=$(grep -c '<section' "$HTML_DIR"/*.html)
MAX=$(( (SECTIONS + 2) / 3 ))   # ceil(sections/3)

if (( EYEBROWS > MAX )); then
  echo "❌ Too many eyebrows ($EYEBROWS > $MAX allowed)"
  ((FAILS++))
fi

if (( FAILS )); then
  echo "🔴 Pre‑flight failed ($FAILS checks). Fix before shipping."
  exit 1
else
  echo "✅ Pre‑flight passed – ready to deploy!"
fi

This script automates the mechanical checks—em-dash detection, eyebrow count validation, and duplicate CTA intent verification—directly from the Section 14 checklist, ensuring that continuous integration blocks any pull request that violates the Final Pre-Flight Check.

Summary

• The Pre-Flight Check process in Taste Skill is a hard gate defined in skills/taste-skill/SKILL.md Section 14 that blocks shipping until all boolean conditions are satisfied.
• Verification covers brief inference (Section 0.B), design dials (Section 1), design-system selection (Section 2.A), redesign audits (Section 11), mechanical style guards, accessibility (Sections 6.A-6.B), and performance (Sections 6.D-9.A).
• Mechanical guards include specific prohibitions on em-dashes, eyebrow count limits (line 256), duplicate CTA intents (lines 226-227), and zig-zag capitalization patterns.
• The process can be automated through JavaScript DOM utilities or CI/CD Bash scripts that replicate the checklist validation against the source requirements.
• Only when the complete matrix of checkboxes is ticked does the skill consider frontend code production-ready and shippable according to the Leonxlnx/taste-skill specification.

Frequently Asked Questions

What triggers a Pre-Flight Check failure?

A Pre-Flight Check failure occurs when any item in the Section 14 boolean matrix evaluates to false. Common triggers include missing design-read meta tags (violating Section 0.B), em-dash characters in visible copy (Section 4.6), CTA text that may wrap onto multiple lines, duplicate CTA intents across buttons, or eyebrow labels exceeding one-third of the section count. Each failure forces the agent to revise the code and restart the validation loop.

How does the Pre-Flight Check handle motion and animation?

The process enforces the motion-motivation rule from Section 5, requiring every animation to document its specific intent—whether for hierarchy, storytelling, feedback, or state transition. Additionally, when MOTION_INTENSITY exceeds 3, the check mandates reduced-motion fallbacks (Section 6.B) to ensure accessibility. Animations without documented justification or proper accessibility fallbacks will fail the Pre-Flight Check.

Can I customize the Pre-Flight Check rules?

The Pre-Flight Check rules are hard-coded in the deterministic matrix defined in skills/taste-skill/SKILL.md. While the skill definition itself is open-source in the Leonxlnx/taste-skill repository, the validation logic expects specific compliance with Sections 0-14 as documented. Teams can extend the validation by wrapping the core checks with additional organization-specific rules in their automation scripts, but the mandatory boolean conditions in Section 14 must all pass for the skill to consider code shippable.

Where is the Pre-Flight Check defined in the codebase?

The complete Pre-Flight Check specification resides in skills/taste-skill/SKILL.md starting at line 10,114, with Section 14 containing the final checklist. Supporting context appears in the root README.md, which differentiates v2 from earlier releases by highlighting the "strict pre-flight check." The CHANGELOG.md at line 93 documents the introduction of this feature in v2, while skill.sh maps the skill name to the correct definition file for CLI loading.

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