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

> Explore the taste-skill mandatory pre-flight check requirements before shipping. Leonxlnx/taste-skill ensures quality by validating typography and CTA rules automatically.

- Repository: [Leon Lin/taste-skill](https://github.com/Leonxlnx/taste-skill)
- Tags: how-to-guide
- Published: 2026-05-31

---

**The Leonxlnx/taste-skill repository enforces a strict mechanical pre-flight checklist defined in [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/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`](https://github.com/Leonxlnx/taste-skill/blob/main/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

```typescript
// 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

```typescript
// 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

```javascript
// 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`](https://github.com/Leonxlnx/taste-skill/blob/main/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`](https://github.com/Leonxlnx/taste-skill/blob/main/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.