opencode-plugin

Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.

Use when adding skeleton loaders, loading placeholders, shimmer states, or structure-aware loading UI with the @aejkatappaja/phantom-ui Web Component. Applies to React, Next.js, Vue, Svelte, Angular, Solid, Qwik, HTMX, and plain HTML frontend apps.

Use when restyling, redesigning, polishing, or fixing the look of an existing web UI, and before claiming any visual change is done. Enforces fixing in place over rewrites, confirming direction before a big redesign, and verifying every change across all viewports AND locales with screenshots. Bundles a headless-Chromium screenshot harness for this machine plus Next.js/Tailwind/framer-motion gotchas.

Use when building, installing, debugging, or configuring MCP servers, MCP clients, tool schemas, stdio transports, SSE/HTTP MCP endpoints, or OpenCode mcp entries.

Use when the user asks for vault daydream, Obsidian vault synthesis, roadmap brainstorming, project ideas, future planning, or strategy that should be grounded in their notes.

Use when working with Cloudflare Workers, Pages, DNS, tunnels, Access, R2, D1, KV, Durable Objects, Queues, cache rules, or Wrangler configuration.

Use when testing websites or web apps with browser automation, Playwright, Chrome DevTools, accessibility checks, responsive behavior, console logs, network requests, or end-to-end user flows.