---

name: web-frontend description: "Onyx web frontend guidance for Next.js 16, React 19, Opal UI, API proxying, chat/admin/Craft surfaces, Jest, and Playwright." disable-model-invocation: true metadata: disco-role: operating license: NOASSERTION

Web Frontend

Use this sub-skill when the task is mainly in the Onyx web app: Next.js app routes, React components, Opal design system usage, frontend data fetching, /api proxy behavior, chat/admin/Craft UI, Jest/RTL tests, or Playwright E2E.

Stay inside this scope. Route mobile React Native patterns to the mobile-client sibling skill, backend route/model/task implementation to backend-platform or agents-craft-and-tools, and CLI/deployment tooling to cli-deployment-devtools.

Read references/frontend-architecture.md when you need route layout, app/admin/chat/Craft surface ownership, frontend API proxy behavior, feature hooks/services, or generated type guidance.

Read references/opal-and-ui-standards.md before selecting components, writing visible UI, changing layout/spacing/colors, adding icons, or organizing frontend hooks and types.

Read references/testing.md when choosing or writing Jest/React Testing Library tests, Playwright E2E, visual regression, auth setup, or frontend verification commands.

Read references/troubleshooting.md when Bun/dependencies, proxy/auth cookies, stale types, flaky Playwright waits, browser binaries, Opal/shared builds, or forbidden legacy UI patterns block progress.

Primary working surfaces are web/src/app/**, web/src/lib/**, web/src/sections/**, web/src/layouts/**, web/lib/opal/**, web/lib/shared/**, and web/tests/**. Future agents should use the bundled references first, then inspect only the current checkout files needed for the requested change.