typescript-ui

Use this agent when the user wants to verify that UI code does not look AI-generated — catches AI-default aesthetics (generic gradients, default shadcn, Inter/Roboto, hashtag-purple/teal, Lucide-everywhere, bento-grid-as-default, lorem-ipsum, centered-everything) and produces severity-tagged findings with concrete remediation. The 108-tell catalogue from the plugin references is the floor. Examples: <example> Context: User wants to verify human-like aesthetics before launch. user: "does this look AI-generated?" assistant: "I'll dispatch the ui-anti-slop-auditor agent — it runs a 108-point AI-tell check against the code." <commentary> AI aesthetic detection → this agent's sole purpose. </commentary> </example>

Use this agent when the user wants to design a new UI from scratch — a screen, a flow, a section, a component family, or a full product. Greenfield design work where the agent must commit to a distinctive aesthetic point-of-view, choose token systems (color, typography, spacing, motion), recompose component primitives, and emit production-grade TypeScript + React + Tailwind v4 code that does not look AI-generated. Backed by Opus with read access to the typescript-ui plugin references. Examples: <example> Context: User wants a new dashboard. user: "design the analytics dashboard for this app" assistant: "I'll dispatch the ui-design-architect agent to commit to a POV, generate the token system, and produce the component code." <commentary> Greenfield UI design — this agent's primary use case. </commentary> </example> <example> Context: User wants a marketing landing. user: "design a marketing page that doesn't look AI-generated" assistant: "I'll dispatch the ui-design-architect agent — its anti-AI-tells reference catalogues 108 generic patterns to avoid, and the point-of-view reference gives three distinctive starting templates." <commentary> Anti-AI-aesthetic + greenfield = this agent. </commentary> </example>

Use this agent when the user wants a comprehensive design / UX / accessibility review of existing UI code — components, pages, flows, or design systems. Reviews visual quality (color, typography, spacing, motion, composition), interaction quality (affordances, feedback, keyboard, mouse, touch), accessibility (WCAG 2.2 AA + APCA contrast), and POV coherence (does this product have a recognizable point-of-view, or does it look generic?). Returns severity-tagged findings with concrete code rewrites and citations to the typescript-ui plugin references. Read-only — does not modify files. Examples: <example> Context: User finished a new screen and wants a design review. user: "review this dashboard screen for design quality" assistant: "I'll dispatch the ui-design-reviewer agent — covers visual, interaction, accessibility, and POV coherence." <commentary> Existing UI + design quality concern → this agent. </commentary> </example> <example> Context: User wants pre-launch a11y check. user: "is this accessible?" assistant: "I'll dispatch the ui-design-reviewer agent for a WCAG 2.2 AA pass plus APCA contrast and keyboard-flow review." <commentary> Accessibility review is part of this agent's scope. </commentary> </example>

Use this agent when the user wants a Core Web Vitals / performance audit of UI code — LCP, INP, CLS, bundle size, font loading, image optimization, rendering performance, or React-specific hydration and server component patterns. Read-only review that returns severity-tagged findings with concrete code rewrites. Can run Lighthouse, tsc, and bundle analysis if tooling is available. Examples: <example> Context: User's LCP is above 2.5s. user: "optimize my LCP" assistant: "I'll dispatch the ui-perf-engineer agent — it'll trace the LCP element, audit preloading, SSR, and image format, and propose specific fixes." <commentary> CWV performance diagnosis → this agent. </commentary> </example> <example> Context: User wants a perf audit before launch. user: "check the performance of these pages before we ship" assistant: "I'll dispatch the ui-perf-engineer agent for a full CWV + bundle + rendering review." <commentary> Pre-launch perf review → this agent. </commentary> </example>

Use this agent to orchestrate a comprehensive multi-pass UI improvement that dispatches multiple specialist agents. Used by the `typescript-improve-ui` skill to coordinate a full audit → plan → apply cycle. Dispatches: ui-design-reviewer + ui-anti-slop-auditor + ui-perf-engineer + ui-typescript-engineer in parallel, then merges findings, prioritizes, and presents a unified report. Team-mode orchestrator — only invoke for the full `typescript-improve-ui` workflow, not single-dimension reviews. Examples: <example> Context: User wants a comprehensive UI improvement pass. user: "improve this to god-tier" assistant: "I'll dispatch the ui-team-lead agent — it coordinates the full 5-specialist audit then produces a merged improvement plan." <commentary> Multi-dimensional UI improvement → team lead orchestrates all specialists. </commentary> </example>

Use this agent when the user wants a TypeScript 6 strictness + component-typing review of UI code — type safety of props, state management, branded primitives, discriminated unions, exhaustiveness, strict-mode compliance, and component API design. Reviews the TypeScript quality layer of UI code specifically, not the visual/design layer. Read-only. Can run tsc and eslint/biome. Examples: <example> Context: User wants type safety review of UI components. user: "check the type safety of these components" assistant: "I'll dispatch the ui-typescript-engineer agent — reviews TS6 strictness, component typing, state unions, and branded primitives." <commentary> TypeScript quality of UI code → this agent. </commentary> </example>

Use this skill when the user asks to optimize UI performance — Core Web Vitals (LCP, INP, CLS), bundle size, rendering performance, font loading, image optimization, or React-specific patterns (compiler, RSC, Suspense, hydration). Triggers: "optimize my UI", "make it faster", "fix LCP", "reduce bundle size", "optimize for Core Web Vitals", "performance audit", "speed up the page", "reduce CLS", "fix INP". Dispatches the typescript-ui:ui-perf-engineer Opus agent which measures first (Lighthouse / tsc / bundle analysis if available), then produces severity-tagged findings with estimated metric impact and concrete code fixes.

Use this skill when the user asks to review existing UI code for design quality, accessibility, or AI-generated aesthetic tells. Triggers: "review my UI", "review this component", "check the design quality", "is this accessible?", "does this look AI-generated?", "audit the UI", "check the components for design issues", "a11y check". Dispatches up to 3 typescript-ui specialists in parallel (ui-design-reviewer + ui-anti-slop-auditor + ui-typescript-engineer) and merges findings into a unified report. Read-only — does not modify files.

Use this skill when the user asks to design new UI — a screen, flow, page, component, or full product. Triggers: "design a [thing]", "build me a [screen/page/flow]", "create the UI for", "design the [dashboard/settings/onboarding/landing]", "make this look [distinctive/professional/not AI]". Dispatches the typescript-ui:ui-design-architect Opus agent which commits to a distinctive aesthetic POV, generates a token system (OKLCH + variable fonts + modular spacing + spring motion), and produces production-grade TypeScript + React + Tailwind v4 code that does not look AI-generated. Uses the anti-AI-tells catalogue (108 patterns) as a hard floor and the taste checklist as a pre-ship gate.

Use this skill when the user asks to comprehensively improve existing UI — design + performance + type safety + anti-AI aesthetics in one pass. Triggers: "improve this UI", "make this better", "make this god tier", "polish these components", "refactor the UI", "level up the design", "make this look like a human team built it", "full UI pass", "improve everything". Dispatches the typescript-ui:ui-team-lead Opus orchestrator which coordinates 4 specialist agents in parallel (design reviewer, anti-slop auditor, perf engineer, TS engineer), deduplicates findings, and produces a unified improvement plan ordered by impact. This is the heavy-hitter — use when the user wants the full treatment.