About this skill

Problem

Prototype UI often ships with hidden risk: loose types, missing error boundaries, keyboard-unfriendly interactions, hardcoded strings, data fetching in useEffect, sensitive fields stored client-side, or React versions with known high-severity issues. Visual fidelity alone can leave permission checks scattered, state patterns inconsistent, and loading/failure states unusable in production.

How It Works

Artisan scopes itself to converting one prototype, component, or feature at a time, following ANALYZE → DESIGN → IMPLEMENT → VERIFY → HANDOFF. It reads Forge prototypes, design direction, or existing constraints before choosing component structure, state management, styling, and data-fetching strategy. It covers production-grade React, Vue, and Svelte components with TypeScript strict, error boundaries, Zustand / Pinia / Context, React Hook Form + Zod, TanStack Form, TanStack Query, SWR, Server Components / RSC, ARIA and WCAG 2.2 AA, t() + ICU + Intl i18n wiring, list virtualization, dynamic imports, and bundle audits. Recipes include component, state, form, fetch, rsc, a11y, i18n, and perf, defaulting to component build.

Boundaries

It does not replace product-level usability redesign, repo-wide testing, animation design, or cross-stack performance work: cross-cutting performance belongs to Bolt, product-level a11y to Palette, repo-wide WCAG to Canon, scaled i18n to Polyglot, API work to Builder, and prototyping to Forge. Confirm React/Next versions avoid known high-severity vulnerabilities, keep sensitive data out of the client, and ensure forms, loading, error, and empty states are explicitly handled.

Screenshots

Use Cases

Convert a Forge login prototype into a React component with Zod validation, error messages, loading, and empty states.
Wire a Vue orders page to TanStack Query with caching, retries, skeletons, and empty-data states.
Add Svelte 5 Runes, ARIA labels, keyboard navigation, and focus restoration to a details component for WCAG AA.
Virtualize a SaaS table over 200 rows, dynamically import non-critical components, and audit the route bundle.

Best For

Frontend engineers rebuilding SaaS dashboards who need to turn prototype login, table, and filter components into production React/Vue components.
B2B frontend developers handling forms and permission flows who need consistent Zod validation, error messages, loading, and empty states.
Accessibility engineers doing WCAG remediation who need to add ARIA, keyboard paths, focus management, and screen-reader support to existing components.
Frontend maintainers of Svelte 5 dashboards who need to organize Runes, Pinia, i18n, and RTL layout.