gandazgul/runwield/frontend-framework

Front-End Framework Use

Convention-first browser frontend work starts from the project's source, framework conventions, and design basis. Preserve and extend what exists before inventing. Use this skill as a compact reference index, not as an execution loop; hard sequencing remains with the active agent definition.

Design-basis invariant

Discover the design system before visual invention:

• Treat formal systems, component libraries, token files, CSS variables, utility scales, style guides, and neighboring

UI as an existing design basis.

• Name the tokens, primitives, typography, layout, motion, states, and adjacent patterns you are reusing.
• Extend incomplete systems minimally with project-native reusable tokens, primitives, utilities, or component variants.
• Use the creative visual branch only when no coherent system exists, or when the User Request explicitly authorizes a

redesign. For redesigns, inspect the existing system and treat it as a compatibility and migration input.

• In RunWield browser UI, start from the canonical docs/design-system.md; follow its implementation pointers before

changing Workspace or other browser surfaces.

Read this when...

• Read ENGINEERING.md when changing components, routing, state, runtime boundaries, styling systems,

i18n, performance-sensitive frontend code, tests, or browser-side safety.

• Read UX-DESIGN.md when the change affects a user's goal, information hierarchy, interface copy, forms,

accessibility, responsive/content behavior, or loading/empty/error/success flows.

• Read DESIGN-CRAFT.md when refining composition, typography, spacing, color roles, or visual quality

within an existing system. Its heuristics also support new designs; they do not authorize a restyle.

• Read VISUAL-DESIGN.md only for greenfield UI or explicitly authorized visual redesign.
• Invoke agent-browser-use when the work needs real-browser interaction, screenshots, accessibility snapshots,

console/network diagnostics, or visual comparison. Browser commands and session lifecycle live there.

Completion for this skill's reference use: every rule relevant to the active branch is applied or consciously ruled out, and every visual decision traces back to either the discovered design basis or the authorized visual direction.