runelight

Install, upgrade, or ensure Runelight preview/capture integration in a TypeScript React project or TypeScript Vue 3 project. Use when a project asks for "install Runelight", "set up Runelight", "upgrade Runelight", or "update Runelight"; this bootstrap skill detects the host, wires the integration, and verifies end-to-end.

Write, edit, or review Runelight React components in .g.tsx files. Use when working on React/TSX .g protocol components, GFrames, createGScopeHook, createGProvider, provider variants, JSX branch coverage, or React Runelight authoring diagnostics.

Write, edit, or review Runelight Vue SFC components in .g.vue files. Use when working on Vue .g protocol components, <g:frames>, template-first scope frames, Vite Vue preview, or Vue Runelight authoring diagnostics.

Polish Runelight-covered GUI through a required explicit sync before editing, then a red-team observe-edit-reobserve loop that works from product surface model down to details one confirmed point at a time. Use when the user asks to polish, refine, improve visual quality, clean up UI details, or make an existing `.g.tsx` / `.g.vue` interface feel better.

Refactor existing React TSX into production .g.tsx UI models without preview wrappers.

Refactor existing Vue 3 TypeScript SFCs into production .g.vue UI models without preview wrappers.

Ask the agent to do agent-driven end-to-end validation for this Runelight repo. Use when the user mentions intelligence test, `.it.md`, agent-driven E2E, or wants confidence beyond unit/type/build checks.

Write or revise `intelligence-tests/*.it.md` task cards for agent-driven end-to-end validation in this Runelight repo. Use when the user asks to add, edit, or design `.it.md` intelligence test scenarios or expected user experiences.