preflight
final design audit before shipping. reviews code for accessibility issues, visual inconsistencies, and AI-generated pattern tells, then offers to fix them.
usage
run /preflight on a component or page to get a scored review with line numbers, code snippets, fix suggestions, and references.
what it checks
accessibility
- images without alt text
- icon-only buttons missing aria-labels
- form inputs without labels
- non-semantic click handlers
- missing keyboard handlers
- missing visible focus states or
outline-none without replacement
- unlabeled async updates, toasts, validation, or pending regions
- color-only information
- touch targets under 44x44px
- skipped heading levels
- contrast ratio below 4.5:1
visual consistency
- inconsistent spacing values
- overflow and alignment issues
- z-index conflicts
- mixed font families and weights
- line height issues
- missing font fallbacks
- missing global font smoothing (
-webkit-font-smoothing: antialiased + -moz-osx-font-smoothing: grayscale)
- thin weights (below 400) at 14px or smaller — antialiased rendering leaves them too faint
- URL/state mismatch for filters, tabs, pagination, or expanded panels
- missing safe-area handling for fixed mobile surfaces
AI pattern detection
flags common tells that make interfaces look AI-generated:
layout tells
- side-tab borders (thick colored border on one side of a card)
- nested cards (cards inside cards)
- everything centered (all text center-aligned)
- icon-tile-stack (small rounded-square icons stacked above headings)
- monotonous spacing (same spacing value used everywhere)
typography tells
- gradient text (background-clip: text with gradients)
- overused fonts (Inter, Roboto, Open Sans, Lato, Montserrat, Arial)
- single font (only one font family on the whole page)
- flat type hierarchy (font sizes too similar between levels)
color and effect tells
- AI color palette (purple/violet gradients, cyan-on-dark)
- dark glow (dark bg + colored box-shadow)
- bounce/elastic easing (feels dated)
- pure black/white backgrounds (no subtle tinting)
- gray text on colored backgrounds
quality
- text lines exceeding 75 characters
- cramped padding (text too close to container edges)
- tight leading (line-height below 1.3x)
- justified text without hyphenation
- body text below 12px
- long passages in all caps
- letter-spacing over 0.05em on body text
- animating width/height/padding/margin (performance)
transition: all- blocking paste in inputs
- hardcoded date, number, or currency formatting instead of
Intl
- images without explicit dimensions when dimensions are knowable
forms
- inputs without
name, appropriate type, or autocomplete intent
- errors not linked to fields with
aria-describedby
- disabled submit buttons that do not explain why
- submit states that resize the button or lose the accessible label
- critical errors shown only in toasts
output
each issue includes:
- line number and code snippet
- what's wrong and why it matters
- fix suggestion
- WCAG reference where applicable
outputs a score out of 100. run after building components, before shipping.
1---2name: preflight3description: preflight4---56# preflight78final design audit before shipping. reviews code for accessibility issues, visual inconsistencies, and AI-generated pattern tells, then offers to fix them.910## usage1112run `/preflight` on a component or page to get a scored review with line numbers, code snippets, fix suggestions, and references.1314## what it checks1516### accessibility17- images without alt text18- icon-only buttons missing aria-labels19- form inputs without labels20- non-semantic click handlers21- missing keyboard handlers22- missing visible focus states or `outline-none` without replacement23- unlabeled async updates, toasts, validation, or pending regions24- color-only information25- touch targets under 44x44px26- skipped heading levels27- contrast ratio below 4.5:12829### visual consistency30- inconsistent spacing values31- overflow and alignment issues32- z-index conflicts33- mixed font families and weights34- line height issues35- missing font fallbacks36- missing global font smoothing (`-webkit-font-smoothing: antialiased` + `-moz-osx-font-smoothing: grayscale`)37- thin weights (below 400) at 14px or smaller — antialiased rendering leaves them too faint38- URL/state mismatch for filters, tabs, pagination, or expanded panels39- missing safe-area handling for fixed mobile surfaces4041### AI pattern detection42flags common tells that make interfaces look AI-generated:4344**layout tells**45- side-tab borders (thick colored border on one side of a card)46- nested cards (cards inside cards)47- everything centered (all text center-aligned)48- icon-tile-stack (small rounded-square icons stacked above headings)49- monotonous spacing (same spacing value used everywhere)5051**typography tells**52- gradient text (background-clip: text with gradients)53- overused fonts (Inter, Roboto, Open Sans, Lato, Montserrat, Arial)54- single font (only one font family on the whole page)55- flat type hierarchy (font sizes too similar between levels)5657**color and effect tells**58- AI color palette (purple/violet gradients, cyan-on-dark)59- dark glow (dark bg + colored box-shadow)60- bounce/elastic easing (feels dated)61- pure black/white backgrounds (no subtle tinting)62- gray text on colored backgrounds6364### quality65- text lines exceeding 75 characters66- cramped padding (text too close to container edges)67- tight leading (line-height below 1.3x)68- justified text without hyphenation69- body text below 12px70- long passages in all caps71- letter-spacing over 0.05em on body text72- animating width/height/padding/margin (performance)73- `transition: all`74- blocking paste in inputs75- hardcoded date, number, or currency formatting instead of `Intl`76- images without explicit dimensions when dimensions are knowable7778### forms79- inputs without `name`, appropriate `type`, or autocomplete intent80- errors not linked to fields with `aria-describedby`81- disabled submit buttons that do not explain why82- submit states that resize the button or lose the accessible label83- critical errors shown only in toasts8485## output8687each issue includes:88- line number and code snippet89- what's wrong and why it matters90- fix suggestion91- WCAG reference where applicable9293outputs a score out of 100. run after building components, before shipping.
tommylower