Context Check

Determine the fidelity tier before running any checks — it controls which rules apply.

Read .tt-impeccable.md from the project root → check ### Fidelity Intent. If found, use it.
If absent or missing, infer from the codebase:
- Canvas ≤ 390px, mobile-first flex, safe area insets → Strict TUX-native
- Desktop-first, 1440px max-width, large display typography, dark #000000 canvas → TT Style
- If still unclear, default to TT Style and note the assumption in the report.

Do not block on missing context. Proceed with the inferred tier.

Token tables and CSS variables: tt-impeccable/reference/tokens.md. Typography scale: tt-impeccable/reference/typography.md.

Fidelity tier determines which checks apply — rules marked below as (TUX-native only) are not violations for TT Style, and vice versa.

A design critique, not a code audit. Evaluate what users see and experience — not just whether the code is correct. Be direct. Vague feedback wastes everyone's time.

Step 1: Gather Assessments

Run two independent assessments. Do not let either influence the other before synthesis.

Assessment A: LLM Design Review

Read the relevant source files and visually inspect the rendered interface if browser tools are available.

Think like a TikTok design director. Evaluate:

TUX Anti-Pattern Detection (CRITICAL — start here)

Check against every ban and DO NOT rule in the tt-impeccable skill. These are the TUX equivalents of AI slop tells:

Hard bans (any one of these is a P0 or P1):

Side-stripe border: border-left or border-right wider than 1px as a colored accent (universal)
Gradient text: background-clip: text + gradient background (universal)
Invented radius: any value not from content radius table (4/6/8/10/12/9999px) or container radius table (8/10/14/16/26px) (universal)
Custom shadow: box-shadow not matching one of the 6 TUX levels (universal)
Glassmorphism: backdrop-filter: blur() used decoratively (universal ban)
Brand red as background: #FE2C55 or equivalent used as section/card/page fill (universal)
OKLCH / HSL palette construction: TUX uses fixed rgba tokens only (universal)

Token drift (P1–P2):

Hard-coded hex or rgba values instead of var(--tux-*) variables (universal)
Off-grid spacing (any px value not in 4/8/12/16/20/24/32) (universal)
Page horizontal padding deviating from 16px (TUX-native only) — TT Style uses responsive padding (80–120px desktop / 24px mobile)
Spacing values exceeding 32px (TUX-native only) — TT Style allows uncapped section spacing
Letter-spacing set to any non-zero value on text below 72px (universal) — TT Style allows negative tracking at 72px+ display text only
Font sizes not in the 12-step TUX scale (TUX-native only) — TT Style allows display scale (48/72/96px+) for hero text
Font weight above 700 (TUX-native only) — TT Style allows 800/900 via TikTokVF for hero display text
Font substitution (anything other than TikTok Sans / system-ui) (universal)
More than 3 distinct type size tiers on one screen (universal)
Neutral-first violation: UI/Shape/Primary or UI/Shape/Secondary on more than one distinct element type per screen, OR on any single non-interactive element (no onClick/href/role) — the count check is a ceiling, not the full test. Teal on a decorative arrow or red on a blockquote tint is a violation even when it's the only instance (universal)
Brand red opacity violation: rgba(254,44,85,*) at any alpha on a content area, blockquote, card fill, or section background — flag regardless of how low the opacity is (universal)
Media color violation: colored (red or teal) tint/overlay on image or video content; colored placeholder on image/video loading state (universal)
Border overuse: border or divider lines used to separate content groups where a background color (UI/Page/Flat 2, UI/Page/Grouped 1/2, UI/Shape/Neutral 4 fill) would work — TUX surfaces define hierarchy through layered backgrounds, not outlines. Flag each unnecessary border as P2 (universal)
Border compensating for low surface contrast: a surface element with both a border AND a background nearly identical to its parent — root cause is wrong background token, not missing border. Fix the background; remove the border (universal)
Hover via border-color: any :hover rule that changes border-color or adds a border — flag as P2. Hover must be expressed through background or opacity only (universal)

The TikTok Native Test:

"If you sent a screenshot to a TikTok designer, would they say 'that's TikTok' or 'that's a clone made by a third party'?"

Apply the criteria matching the declared fidelity tier:

Strict TUX-native:

Is content the most visually dominant element? Chrome should be secondary.
Is there a single clear focal point identifiable in 1 second? (primary CTA or key content)
Do accent colors (red, teal) only appear on interactive elements of the right type?
Does Primary (brand red) appear on more than one distinct interactive element type per screen? (if yes — one should be neutral)
Do any image or video surfaces have a colored (red or teal) overlay or colored placeholder? (must not)
Is the same interaction type styled consistently across all screens?

TT Style:

Is the dark canvas (#000000) used as primary background?
Do Blaze (red) and Glint (teal) appear only in their correct semantic roles?
Does hero typography have presence — bold weight, clear scale hierarchy?
Is negative space used intentionally, not just left empty?
Does motion feel purposeful and brand-forward (no CSS default easings, no bounce)?
Would someone recognize this as TikTok brand, not a TikTok-adjacent third party?

Visual Hierarchy Review

Is the focal point obvious within 1 second?
Does content lead and chrome support — not the reverse?
Are there more than 3 visual weight tiers? (size + color intensity combined)
Do same-level elements use consistent size, weight, and color?
Is the interface predominantly neutral (black/white/gray)? Seeing brand red or teal on more than a handful of distinct elements is a hierarchy problem, not just a token problem.
Does the squint test pass? (blur your eyes — hierarchy should still be readable)

Information Architecture & Cognitive Load

Is the primary action clear without explanation?
Are related items visually grouped (proximity, common region)?
Is there content overload? More than 4–5 options per decision point?
Is complex content progressively disclosed rather than all shown at once?

Interaction & States

Are all 8 states handled: default, hover (web), focus, active, disabled, loading, error, success?
Are touch targets ≥ 44×44px?
Are focus rings visible and sufficient contrast?
Do loading states give clear feedback?
Do empty states teach the interface rather than just saying "nothing here"?

Responsive Behavior (if web adaptation)

Does the layout adapt meaningfully at different viewports, or just shrink?
Are safe area insets handled on mobile viewports?
Is the TUX hierarchy preserved across breakpoints?
Are any interactions hover-dependent and therefore broken on touch?

Microcopy

Are button labels specific (verb + object) or generic (OK / Submit)?
Do error messages follow the three-part formula (what / why / fix)?
Is copy consistent with the TikTok voice (direct, short, action-oriented)?
Are the same things called the same names throughout?

Return structured findings: anti-pattern verdict, hierarchy assessment, IA/cognitive load, interaction state gaps, copy issues, what's working (2–3 items), priority issues (3–5), and open questions.

Assessment B: Token & Pattern Scan

Read the source files systematically. Search for:

Raw hex or rgba values not going through var(--tux-*) — note every instance with file:line
Spacing values not in the TUX grid (4/8/12/16/20/24/32) — flag the off-grid values
letter-spacing set to any value other than 0
border-radius values not in either TUX radius table
box-shadow values not matching the 6 TUX levels
font-family values other than TikTok Sans / system-ui
backdrop-filter usage — flag as P1 regardless of tier (universal ban)
background-clip: text with gradient
border-left or border-right values > 1px used as accents

Also scan for:

border, border-top, border-bottom declarations — assess each: could a background color from UI/Page/* or UI/Shape/Neutral 4 replace it?
border-left or border-right > 1px as colored accent — P0 hard ban

Return: a list of every finding with file, line, current value, and correct TUX value.

Step 2: Generate Critique Report

Synthesize both assessments. Note where they agree, where the token scan found things the LLM missed.

Design Health Score

#	Dimension	Score	Key finding
1	TUX Anti-Patterns	? /4	[specific finding or —]
2	Visual Hierarchy	? /4
3	Information Architecture	? /4
4	Interaction & States	? /4
5	Token Fidelity	? /4
6	Microcopy	? /4
Total		??/24	[rating]

Rating bands: 22–24 Excellent · 17–21 Good · 12–16 Acceptable · 7–11 Poor · 0–6 Critical

Anti-Pattern Verdict

Start here. Does this look like a TUX surface, or a generic app with TikTok colors? List specific patterns found with file:line references.

Overall Impression

One paragraph: what works, what doesn't, and the single biggest opportunity.

What's Working

2–3 specific things done well, and why they work.

Priority Issues

3–5 most impactful problems. Tag each P0–P3:

P0 — blocks task completion or is a hard TUX ban violation
P1 — significant user impact or major TUX fidelity gap
P2 — visible deviation, workaround exists
P3 — subtle; nice to fix

For each:

[P?] Issue name
What: specific element, file, line
Why it matters: user impact or TUX fidelity impact
Fix: exact change needed
Suggested command: /tt-impeccable extract (token fixes), /tt-impeccable craft [feature] (structural rebuild), /tt-polish (micro-detail pass), /tt-adapt (responsive issues)

Minor Observations

Quick notes on smaller issues.

Questions to Consider

Specific provocative questions based on actual findings — not generic design questions.

Step 3: Ask the User

After presenting findings, ask targeted questions based on what was actually found. Maximum 3 questions. Reference specific findings:

Priority direction: "I found issues in [X, Y, Z areas]. Which matters most right now?"
Design intent: If the critique found a TUX pattern violation that might be intentional: "The [element] uses [non-TUX pattern] — was this deliberate, or should it align with TUX?"
Scope: "I found N issues — focus on top 3, or address everything?"

Step 4: Recommended Actions

After receiving answers:

[P?] /tt-impeccable extract — [specific token/component fixes]
[P?] /tt-impeccable craft [feature] — [structural rebuilds]
[P?] /tt-polish — [visual elevation and micro-detail sweep]
[P?] /tt-adapt — [responsive issues]
[P?] /tt-audit — for a code-level technical audit (token values line-by-line, accessibility, performance)

End with /tt-polish as the final step if any fixes were recommended.

tt-critique vs tt-audit: this skill evaluates design quality — hierarchy, UX patterns, IA, copy. /tt-audit checks code correctness — token values, component dimensions, accessibility. Run both for a complete picture.

You can ask me to run these one at a time, all at once, or in any order you prefer.

Re-run /tt-critique after fixes to see your score improve.

Never

Soften criticism — developers need honest feedback
Say "consider exploring..." — give concrete direction
Skip positive findings — knowing what to preserve matters
Mark everything P0 — prioritization is the point
Give generic feedback not tied to specific elements

tt-critique