Frontend

Anti UI Slop stops coding agents from shipping generic interfaces by using UIZZE's catalog of 800,000+ real web and iOS screens to define product-specific designs, required states, and a hard finish gate. Use it during web or iOS UI design, implementation, redesign, critique, or pre-ship review.

Artifacts Builder initializes a React + TypeScript + Tailwind project and bundles it into a single self-contained HTML file for use as a claude.ai artifact. Use it for complex artifacts that need state management, routing, or shadcn/ui components.

Analyze Performance Traces audits Chrome, Chromium, Electron, React DevTools, or Perfetto-compatible JSON traces to prove trigger-to-render chains, isolate source-level bottlenecks, classify forced layout and render fanout, and apply safe fixes. Use it for trace files, reported profiling durations, dropped frames, long tasks, jank, render storms, layout thrashing, or interaction latency.

Tutti UI System guides use of the @tutti-os/ui-system component library, including reusing existing components, promoting new shared base or business components, and maintaining metadata and storyboard inventory.

Frontend routes frontend/web UI/UX/visual requests to four rulesets for design taste, performance perfection, UI/UX lookup, and design operations, plus lazyweb real-app research. Use it when building, styling, redesigning pages/components, React setup, performance audits, or visual QA.

Obsidian Layout Adjustment restyles the Obsidian app UI through CSS snippets. Use it when a user asks to tune tabs, sidebars, note surfaces, properties, backlinks, graph panes, file explorer rows, or other visual elements, or when a CSS change didn't have the intended effect.

Frontend Design Review evaluates frontend interfaces for design quality, accessibility, and design system compliance, or creates distinctive production-grade UI from scratch. Use for PR reviews, design reviews, accessibility audits, and design system checks.

Algorithmic Art creates original generative art using p5.js with seeded randomness and interactive parameter exploration. Use it when users request art created with code, flow fields, particle systems, or other algorithmic techniques.

Design Engineering applies interface craft when building or reviewing UI, covering motion, easing, timing, springs, component feel, and visual foundations. Use it when polishing an interface, adding an animation, or reviewing a component so it feels right.

Accessibility audits and improves web accessibility following WCAG 2.2 guidelines. Use when asked to improve accessibility, perform an a11y audit, ensure WCAG compliance, check screen reader support, keyboard navigation, or make a site accessible.

Web Performance improves site speed by optimizing loading, runtime efficiency, and resource delivery. Use it when asked to speed up a site, reduce load time, improve page speed, or run a performance audit.

Creates research-backed design systems and specs for UIs, landing pages, and visual identities. Ensures taste and accessibility without writing code, using real-world references to avoid generic AI aesthetics.