Taste-Skill Mandatory Pre-Flight Check Requirements Before Shipping: A Complete Technical Guide

The Leonxlnx/taste-skill repository enforces a strict mechanical pre-flight checklist defined in skills/taste-skill/SKILL.md that automatically blocks shipping if any mandatory rule—from typography constraints to CTA limitations—fails validation.

The taste-skill embeds a rigid quality gate that treats every design rule as a binary pass/fail mechanism. Before any page ships, it must satisfy all taste-skill mandatory pre-flight check requirements listed in Section 14 of the specification (line 910), with the agent runtime mechanically auditing each constraint and treating violations as "Pre-Flight Fail" events that force rewrites.

Dependency Verification and Build Integrity

Every project must pass Dependency Verification as outlined in §3.F of skills/taste-skill/SKILL.md (line 156). This requires declaring and version-pinning all runtime dependencies to guarantee reproducible builds. Missing or floating versions trigger an immediate pre-flight failure that halts the deployment pipeline.

Visual System Consistency Locks

The specification enforces strict visual cohesion through three mechanical locks that prevent accidental design drift.

Color Consistency Lock

Only one accent color may appear across the entire page. As defined at line 190, the Color consistency lock (mandatory) rule specifies that mixing accent hues results in automatic rejection to eliminate identity shifts and maintain coherent visual branding.

Shape Consistency Lock

The Shape consistency lock at line 217 mandates a single corner-radius scale for every component. Whether using rounded-lg or rounded-[12px], the entire page must commit to one value to avoid mismatched UI textures.

Italic Descender Clearance

Typography must prevent clipping of descenders (y, g, j, p, q) by maintaining minimum line-height. The Italic descender clearance requirement (line 183) requires leading-[1.1] minimum for any italic display text to ensure legibility.

Layout and Component Constraints

Specific layout patterns carry hard prohibitions designed to enforce professional composition standards.

Hero and Header Restrictions

The Hero top-padding cap (line 238) limits desktop padding to pt-24 (≈6rem) maximum to prevent content from being pushed below the fold. Additionally, the Split-header ban at line 258 disallows the left-big-headline/right-small-paragraph pattern, enforcing single-focus headers for immediate clarity.

Bento Grid Requirements

Bento grids must satisfy two mechanical rules: the Bento cell count rule (line 250) requires the number of cells to exactly match content items—empty placeholders are prohibited. Furthermore, Bento background diversity (line 259) mandates 2-3 visually distinct cell types (images, gradients, or patterns) per grid to prevent bland text-walls.

Zig-Zag Pattern Limits

The Zigzag alternation cap at line 252 prevents monotony by allowing no more than two consecutive sections with the same image-text orientation (left-image/right-text or vice versa).

Call-to-Action and Interaction Standards

CTAs and interactive elements face strict behavioral constraints that preserve hierarchy and user clarity.

CTA Button Wrap Ban

Primary CTA buttons must fit on a single line at desktop breakpoints. The CTA button wrap ban (line 226) limits text to ≤3 words; longer labels trigger a pre-flight failure because wrapped CTAs appear broken and disrupt visual hierarchy.

Unique CTA Intent

The No duplicate CTA intent rule at line 227 permits only one button per semantic purpose (e.g., "contact", "signup", "portfolio"). Multiple buttons targeting the same intent create ambiguity and automatically fail validation.

Form Contrast and Accessibility

All form UI elements must meet WCAG AA contrast standards. This Form contrast check ensures accessibility for users with low vision and is categorized as a mandatory a11y requirement within the specification.

Animation and Motion Policies

Motion must serve communication rather than decoration, with strict limits on kinetic elements.

Motivated Motion Requirement

Every animation requires a clear communicative purpose per the Motion must be motivated (mandatory) rule at line 360. Gratuitous motion that lacks functional justification results in pre-flight rejection.

Marquee Limitations

Pages may contain only one horizontal scrolling marquee according to the Marquee max-one-per-page rule (line 361). Additional marquees are treated as kinetic filler that distracts from core content.

Reduced Motion Fallback

The Reduced-motion mode requirement at line 525 mandates a low-motion fallback for users with motion-sensitivity preferences, aligning with prefers-reduced-motion accessibility standards.

Content Quality and Logo Wall Rules

Mandatory Copy Self-Audit

Before shipping, developers must execute a Copy self-audit to re-read every visible string. Defined at line 321, this audit flags fake numbers, mixed typographic registers, improper em-dashes, and factual inaccuracies. This is the final content gate in Section 14.

Logo-Only Walls

Logo walls may contain logos exclusively; industry labels or supplementary copy violate the Logo-only rule at line 281. This preserves the component's function as a concise credibility cue without diluting its impact.

Implementation Examples

Enforcing these rules in code requires mechanical validation that mirrors the agent's runtime checks.

CTA Wrap Ban Validation

// components/PrimaryCTA.tsx
export default function PrimaryCTA({label}: {label: string}) {
  // Enforce ≤3 word limit per taste-skill spec line 226
  if (label.split(/\s+/).length > 3) {
    throw new Error('CTA label exceeds 3-word limit (pre-flight fail).');
  }
  return (
    <button className="px-6 py-3 font-medium rounded-md bg-indigo-600 text-white">
      {label}
    </button>
  );
}

Shape Consistency Token

// lib/designTokens.ts
// Single source of truth for shape lock (line 217)
export const radius = 'rounded-[12px]';

// Usage in components/Card.tsx
export const Card = ({children}) => (
  <div className={`bg-white p-6 ${radius} shadow-sm`}>{children}</div>
);

Copy Audit Script

// scripts/copy-audit.js
const fs = require('fs');
const glob = require('fast-glob');

const files = glob.sync('src/**/*.tsx');
files.forEach((file) => {
  const content = fs.readFileSync(file, 'utf8');
  
  // Check for em-dashes in copy strings (line 321)
  if (/["'`][^"'`]*[–—][^"'`]*["'`]/.test(content)) {
    console.warn(`Em-dash violation in ${file}`);
  }
  
  // Detect unrealistic precise percentages
  if (/\b\d{1,3}%\b/.test(content)) {
    console.warn(`Fake number pattern in ${file}`);
  }
});

Summary

• Dependency Verification at line 156 requires version-pinned runtime dependencies to prevent shipping with floating versions.
• Visual Locks enforce single accent colors (line 190), unified corner-radii (line 217), and proper italic descender clearance (line 183).
• Layout Rules cap hero padding at pt-24 (line 238), ban split headers (line 258), and regulate bento cell counts (line 250) and zig-zag alternation (line 252).
• CTA Standards limit button text to ≤3 words (line 226) and prohibit duplicate semantic intents (line 227).
• Motion Policies require purposeful animation (line 360), limit marquees to one per page (line 361), and mandate reduced-motion fallbacks (line 525).
• Content Gates include mandatory copy self-audits (line 321) and logo-only walls (line 281).
• Final Pre-Flight Check in Section 14 (line 910) mechanically validates every block; a single failure aborts shipping.

Frequently Asked Questions

What happens if a pre-flight check fails?

The agent runtime treats any violated mandatory rule as a "Pre-Flight Fail" and blocks the output from shipping. According to the specification in skills/taste-skill/SKILL.md, the developer must rewrite the affected code or design until all checks in Section 14 pass validation.

Where are the taste-skill pre-flight requirements documented?

All rules reside in skills/taste-skill/SKILL.md within the Leonxlnx/taste-skill repository. Section 14 specifically defines the Final Pre-Flight Check (line 910), while individual constraints like CTA limits and color locks appear throughout the document with (mandatory) tags referencing specific line numbers.

How is the CTA button wrap ban enforced mechanically?

The specification at line 226 requires runtime validation that button text contains ≤3 words. Violations throw a pre-flight error similar to the TypeScript validation example, ensuring CTAs remain unwrapped at desktop breakpoints and maintain proper hierarchy.

Are there accessibility requirements in the pre-flight checklist?

Yes. The checklist mandates WCAG AA contrast for all form elements and requires a reduced-motion mode fallback at line 525 for users with motion sensitivity. These requirements satisfy both the Form contrast check and modern accessibility best practices.

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