Frontend

Use automatically when developing, modifying, designing, or reviewing frontend interfaces, websites, dashboards, components, styles, layout, accessibility, or…

Guide design-first website and application creation from visual concept through product discovery, UX/UI sign-off, architecture, budgeting, secure…

Capture before/after screenshots of UI views with Playwright and embed them in a PR.

Agree on the UI structure with a low-fidelity wireframe before writing any production frontend code, then lock it.

Runs react-doctor on React codebases and iteratively fixes diagnosed issues until the project reaches a verified score of 100 without shortcuts.

Compute React Flow (@xyflow) canvas geometry correctly — edge label anchors, bezier control points, handle coordinates, node bounds — so labels and edges land…

Create and edit professional motion graphics videos with Remotion (React-based video).

Reviews a chapter of the user's fiction and produces a two-column HTML critique page beside the manuscript, with the prose on the left and anchored comments…

Reads the justfiles of a repository and, for each level that has one (root, apps/frontend, packages/ui, ...), writes a .claude/rules/use-just-commands.md…

Re-verify the dated platform and harness facts the dev skills pin, and file what changed as issues.

Turns a system-design article URL into a runnable local walkthrough lab: playable frontend, docker-compose services plus viewer UIs, and session-based…

Generate genuinely beautiful, on-brand UI instead of generic "AI slop" — use whenever the user asks to build, design, style, or improve a UI, landing page…

Use when writing or reviewing any UI that renders text in this repo — picking a font size, adding a heading, styling a card, label, badge or table cell…

Deep, multi-agent security audit of a codebase — WordPress plugin, Laravel, Next.js, Node/Express, Django/Rails, or any app.

UI/UX design intelligence.

ego-browser (ego-lite) is a Chromium-based browser designed from the ground up to be friendly to both human users and AI Agents.

Use when Codex needs to create, edit, publish, package, or validate The Colab CourseViewerPlatform course content, including tenant course repos, course.json…

Automate framework migrations with dependency resolution, breaking-change auto-fix, and rollback.

Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or…

Build or fix a frontend (landing page, marketing site, dashboard, app screen, component) so it looks designed, not AI-generated, and prove it in a real…

Explain complex ideas, code, research, or agent work so the reader can understand and inspect it.

Create, review, and maintain evidence-grounded arc42 architecture documentation from implementation evidence, ADRs, and product intent.

Open the project board (Project Hub at .scratch/index.html) in the default browser.

Builds the design system (DESIGN.md with tokens) and a static HTML prototype made from it.