skills.rest
tommylower
tommylowerCOMMUNITY
Explore all skills by this author →
Website𝕏@tommylowerGitHub

preflight

Reviews UI code for accessibility, visual consistency, and AI-generated pattern issues before shipping.

2|Updated Apr 15, 2026
Search Tags:#accessibility#visual consistency#wcag#design review#preflight#ui audit#ai slop detection
One-click install
npx skills add https://github.com/tommylower/cortex --skill preflight-tommylower
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: preflight
Source: https://github.com/tommylower/cortex/tree/main/design/review/preflight
Command: npx skills add https://github.com/tommylower/cortex --skill preflight-tommylower

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Shipping UI code without a final design audit leads to accessibility violations, visual inconsistencies, and generic AI-generated interface patterns that degrade product quality and user experience. ## Core Features & Use Cases - Accessibility Audit: Detects missing alt text, unlabeled inputs, poor contrast ratios, missing focus states, and other WCAG violations with line numbers and fix suggestions. - Visual Consistency Checks: Flags inconsistent spacing, z-index conflicts, mixed font families, missing font smoothing, and URL/state mismatches. - AI-Slop Detection: Identifies common AI-generated design tells such as purple gradients, nested cards, gradient text, and overused fonts like Inter or Roboto. - Use Case: After building a new settings page, run a preflight review to get a scored report out of 100 with specific code snippets, fix suggestions, and WCAG references before merging. ## Quick Start Ask the agent to run a preflight design review on your component or page to receive a scored audit with fixes.

Frequently Asked Questions about preflight

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I run a design review on a UI component before shipping?▼

Run the preflight command on your component or page to get a scored audit out of 100. Each issue includes the line number, code snippet, explanation, fix suggestion, and WCAG reference where applicable.

What accessibility issues does a preflight audit check for?▼

The audit checks for missing alt text, icon-only buttons without aria-labels, unlabeled form inputs, missing keyboard handlers, contrast ratios below 4.5:1, touch targets under 44x44px, and skipped heading levels.

How can I detect AI-generated design patterns in my UI?▼

The review flags common AI tells including purple/violet gradients, nested cards, gradient text, overused fonts like Inter and Roboto, side-tab borders, and monotonous spacing across the interface.

Does the preflight review check form accessibility?▼

Yes, it verifies inputs have name, type, and autocomplete attributes, errors are linked via aria-describedby, disabled submit buttons explain why, and critical errors are not shown only in toasts.

When should I run a preflight design audit?▼

Run it after building components and before shipping. It serves as a final design audit covering accessibility, visual consistency, AI pattern detection, typography quality, and form correctness.

Related Skills

Explore More Design & Creative Skills→
first-flukefirst-fluke
218

frontend-agent

Automate React, Next.js, and TypeScript frontend UI development tasks.

Official
Intermediate
AzrinPutraAzrinPutra

code-review

Review code changes, auto-fix mechanical issues, and suggest improvements.

Community
Advanced
kevindreekevindree

browser-testing-with-devtools

Inspect live DOM, console, network, and accessibility data via Chrome DevTools MCP.

Community
Advanced
gaiastudio-aigaiastudio-ai
2

gaia-test-a11y

Run automated accessibility tests on deployed web applications with axe-core, pa11y, and Lighthouse.

Official
Advanced