TAC Express — uipro Bridge (ui-ux-pro-max → Violet Grid filter)

The ui-ux-pro-max skill is a breadth tool. The Violet Grid is a constraint identity. This bridge keeps both true at once: use uipro for accessibility checklists, font-pairing reference, animation timing tokens, anti-pattern lookup — but never as a style picker, never as a palette source, never as a font selector.

---

0. Hard Filter — what uipro can NEVER override

Before reading anything from uipro CSV results, apply this filter:

uipro category	Allowed in tac-express?	Why
Style: brutalism	✅ allowed (this IS the system)	Violet Grid IS brutalist offset shadows, sharp corners
Style: minimalism	✅ allowed (compatible companion)	Reduction is the system's premium read
Style: dark mode	✅ allowed (default)	Dark-first design
Style: bento grid	⚠️ allowed only in marketing surfaces	Compatible with sharp corners; never on dashboard
Style: glassmorphism	❌ FORBIDDEN	LAW 13 — solid surfaces only
Style: neumorphism	❌ FORBIDDEN	Soft shadows banned (LAW 9)
Style: claymorphism	❌ FORBIDDEN	Curves + soft shadows
Style: skeuomorphism	❌ FORBIDDEN	Visual realism contradicts mission-control
Style: flat design	⚠️ degrades to minimalism	Strip the "no shadow" advice — we use offsets
Palette: any	❌ NEVER pick from uipro	LAW 1 — only globals.css colors
Font pair: any	❌ NEVER pick from uipro	LAW 4 — Plus Jakarta Sans + IBM Plex Mono + Lora only
Charts: any uipro suggestion	❌ FORBIDDEN	Use TAC Orbital primitives only (docs/CHARTS-ORBITAL.md)
Accessibility rules	✅ ALWAYS use	uipro ≥ tac-accessibility on breadth
Animation timing	⚠️ cross-check	uipro suggests 150-300ms; we have --duration-fast/base/slow — map, don't replace
Touch targets	✅ ALWAYS use	44×44px minimum is universal
Layout patterns	⚠️ adopt the structure, not the visuals	Take grid templates, ignore styling

Rule: if a uipro CSV row's style column is anything other than brutalism, minimalism, dark mode, or bento grid, discard the entire row. Do not mention it to the user.

---

1. The 4 Legitimate Uses of uipro in tac-express

1.1 Accessibility checklist lookup

python3 .claude/skills/ui-ux-pro-max/scripts/search.py --domain ux --priority 1

Output: WCAG-grounded rules. Cross-reference with tac-accessibility — if uipro lists a rule we don't enforce, add it to tac-accessibility.

1.2 Anti-pattern lookup (uipro's banned-patterns DB)

Use uipro's anti-pattern data to expand the "premium-killers" list in tac-design-tokens. Always re-state in Violet Grid terms.

1.3 Font-pairing reference (NOT selection)

We are locked to Plus Jakarta Sans / IBM Plex Mono / Lora. uipro's 57 pairings tell you which weights and tracking ranges other premium pairings use — borrow the kerning math, not the family choice.

1.4 Animation timing & easing reference

Cross-reference uipro's duration-timing rule with our --duration-fast/base/slow and --ease-smooth/spring/linear tokens. If uipro suggests a timing we don't have a token for, add a token rather than hardcoding.

---

2. The Translation Table

When uipro returns advice, translate it before applying:

uipro phrase	Violet Grid translation
"Use a card with soft shadow"	tac-fui-panel (border + brutalist offset)
"Add a gradient background"	DO NOT — solid surfaces. Exception: t-gradient-hero on hero h1 only
"Round the corners 8px"	DO NOT — --radius: 0rem always (LAW 13)
"Use a primary blue"	bg-primary (resolves to Violet Grid violet)
"Use a CTA orange"	bg-accent-warning if status; bg-primary if action
"Inter / Geist / Space Grotesk"	font-sans (Plus Jakarta Sans)
"Add a hover glow"	tac-signal-glow (1px ring + 8px primary bloom)
"Use a 12px radius modal"	--radius: 0rem — sharp modal, brutalist offset shadow
"Skeleton with soft pulse"	animate-skeleton-pulse (defined in globals.css)
"Make it feel premium with depth"	Use --surface-base/elevated/floating tiers, NOT shadow-blur

---

3. Pre-Flight Before Surfacing uipro Output to the User

[ ] Filtered out forbidden styles (glassmorphism / claymorphism / neumorphism / skeuomorphism)
[ ] Did NOT recommend a palette from uipro — referenced globals.css instead
[ ] Did NOT recommend a font from uipro — referenced LAW 4 fonts only
[ ] Translated all "rounded-*" / "shadow-*" / "blur-*" advice to Violet Grid equivalents
[ ] Cross-checked accessibility advice against tac-accessibility (loaded together)
[ ] Animation timing maps to --duration-fast / --duration-base / --duration-slow (not raw ms)
[ ] If chart suggested: load tac-design-tokens § "Charts — TAC Orbital" and use Orbital primitives only

If any check fails, drop that uipro recommendation and do not relay it.

---

4. When NOT to Use uipro at All

uipro is off-limits for:

• New feature design (use tac-brainstorming → tac-design-tokens → tac-premium-patterns)
• Picking a color (only globals.css)
• Picking a font (only LAW 4)
• Charts (only docs/CHARTS-ORBITAL.md + @workspace/ui/components/charts)
• Form layout (only tac-forms)
• Component structure (only tac-ui-authoring)
• Auth UI (only tac-auth)

uipro is on-limits for:

• "What does uipro say about [accessibility / touch / animation timing / anti-pattern X]?"
• "What's the WCAG rule for [...]?"
• "What's a premium kerning value for a 3rem display heading?" (cross-reference, then apply our .t-display)
• "List CSS chart anti-patterns" (then we ignore everything except the structural advice)

---

5. Quick Recipe — Using uipro Safely

# Step 1: Search a focused domain
python3 .claude/skills/ui-ux-pro-max/scripts/search.py --domain accessibility

# Step 2: Apply the Filter (§0)
# Step 3: Apply the Translation Table (§2)
# Step 4: Cross-check against the relevant tac-* skill (tac-accessibility, tac-design-tokens)
# Step 5: Restate the advice in Violet Grid terms before showing it to the user

Never paste raw uipro output. Always translate first.