Frontend UI Mastery

## Overview

Frontend UI Mastery bundles three production-grade frontend skills — **frontend-accessibility**, **frontend-components**, and **frontend-responsive** — into one plugin. Together they cover the full UI lifecycle: build composable components, make them accessible to every user, and adapt them seamlessly across devices. One author, consistent conventions across React, Vue, and Svelte.

## Quick Start

1. Install the plugin in your OpenClaw workspace.
2. When scaffolding a new UI, invoke **frontend-components** to define reusable, single-responsibility components with clean props and minimal local state.
3. Layer in **frontend-accessibility** for semantic HTML, ARIA, keyboard navigation, focus management, and color contrast — then run a screen-reader pass to confirm WCAG compliance.
4. Finish with **frontend-responsive** to apply mobile-first breakpoints, fluid containers, and touch-friendly sizing so the same components adapt from phone to desktop.

## Key Commands

- `frontend-components` — Design composable React/Vue/Svelte components with clear interfaces and proper encapsulation.
- `frontend-accessibility` — Audit and fix semantic HTML, ARIA, keyboard navigation, and screen-reader compatibility for WCAG conformance.
- `frontend-responsive` — Build mobile-first responsive layouts with media queries, relative units, and standard breakpoints.

## Tips

- Build the component shell first (`frontend-components`), then immediately run an accessibility pass (`frontend-accessibility`) before adding responsive styles — fixing a11y after the fact is much more expensive than baking it in.
- Pair `frontend-responsive` with a real device test (or DevTools device emulation at `375px`, `768px`, `1280px`) to catch touch-target and reflow issues that desktop-first layouts miss.
- Combine with a backend or DB plugin to ship a full vertical slice: the UI plugin handles the user-facing layer end-to-end.