chaiui-review

ChaiUI review

Check work against the ChaiUI rules and report what breaks them. Do not restyle anything while reviewing; list the findings, then fix them only if the user asks.

The rules come from the ChaiUI design system (https://ui.chaicode.com). If the chaiui skill is installed, its rules are the full version of this list.

1. Search the code

Run these over the files that changed (adjust the path). Each hit is a finding unless the exception applies.

# Em dashes, anywhere: code, comments, copy. Always a finding.
grep -rn "$(printf '\342\200\224')" src/

# Orange as a fill. Allowed only on a segmented control's active segment
# (bg-orange-100 / bg-orange-900/40) and the footer's 1px before: hairline.
grep -rnE "bg-orange-|bg-\[#(FF7D0C|ff7d0c|FE9332|fe9332)\]" src/

# Drop shadows. ChaiUI has none: depth is the warm hairline and the fill.
grep -rnE "shadow-(sm|md|lg|xl|2xl)|drop-shadow" src/

# Gradient text. Only the ShinyText component may do this.
grep -rnE "bg-clip-text|text-transparent" src/

# All-caps eyebrows and labels. Caps are only for data labels (table heads,
# footer column heads, status chips).
grep -rnE "uppercase|tracking-widest" src/

2. Read for the rules a search cannot catch

• One highlight per paragraph. The cream Montserrat phrase (<Highlight> or className="highlight") appears at most once in any paragraph. Two in one paragraph is a finding.
• One solid button per screen. The white asymmetric button (variant="solid") is the single main action. A second one is a finding. Buttons on cards are the soft default, never solid.
• One central element in a hero. No floating, tilted cards or badges around the hero media.
• Status is text and outline. No filled status pills, no coloured card borders. Green, red, yellow and one purple, as text or thin strokes.
• Sentence case in headings, buttons and labels ("View details", not "View Details"). The highlight phrase is the one place words are capitalised, and the CSS does that.
• Copy is plain. Professional and friendly, no hype, no em dashes.
• Dark first. The page works in dark by default and in light.
• Accessible. Icon-only buttons have an aria-label; form fields have labels; every motion respects prefers-reduced-motion; everything works from the keyboard.
• Prefer the registry. A hand-rolled navbar, hero, card, dialog or table that duplicates a @chaiui/* item is a finding: suggest npx shadcn@latest add @chaiui/<name>.

3. Look at it, if it runs

• Dark and light: in light mode the background stays warm (not blue), and nothing is unreadable.
• Phone width (375px): no sideways scroll, nothing clipped.
• The header is transparent at the top and blurs only after scrolling.

4. Report

One list, most serious first. For each finding give the file and line, the rule it breaks, and the fix in one line:

1. src/pages/pricing.tsx:42  Orange fill on the "Buy" button (bg-orange-500).
   Rule: orange is never a fill. Fix: variant="solid" (white on dark).
2. src/components/hero.tsx:18  Two highlighted phrases in the lead.
   Rule: one highlight per paragraph. Fix: keep "community-driven learning".

End with what passed, in one line, so the user knows what was checked. If nothing breaks a rule, say so plainly.