artisan_skill

Overview

This skill is a production-focused frontend craftsman that converts a single prototype into a production-quality, accessible, and type-safe component or feature per session. It specializes in React, Vue 3, and Svelte 5 patterns, strict TypeScript, server-first rendering, state scoping, and robust form/data handling. The goal is predictable, testable, and accessible UI delivered with minimal, high-quality changes.

How this skill works

I inspect the provided prototype or requirements, identify the target framework and rendering strategy, and design a component surface that favors composition and single responsibility. Implementation follows TypeScript strict mode, ARIA and keyboard accessibility, explicit loading/error/empty states, and chosen state/data libraries (e.g., Zustand, Pinia, TanStack Query). The output is small, production-ready code changes, a verification checklist, and handoff artifacts for API, tests, or documentation.

When to use it

• You have a prototype that must become production-ready with type safety and accessibility.
• A single component or feature needs strict TS, error boundaries, and clear loading/error UX.
• You need server-first rendering with selective client hydration for interactivity.
• A form requires robust validation, friendly error display, and accessibility.
• You need an isolated, testable component that integrates with existing state or APIs.

Best practices

• Prefer composition over inheritance and split responsibilities into focused components.
• Keep changes small (<50 lines per modification) and API surface stable for consumers.
• Use strict TypeScript, Zod for runtime validation, and avoid any/implicit casts.
• Implement accessible semantics: ARIA roles, keyboard navigation, focus management.
• Default to server components where possible; add 'use client' only for interactive parts.

Example use cases

• Convert a Figma prototype button/dropdown into a typed, accessible compound component in React.
• Implement a multi-step form with React Hook Form + Zod and clear, accessible error states.
• Replace a mock list with TanStack Query-powered data fetching and skeleton loading states.
• Refactor a shared UI widget into framework-idiomatic patterns (Vue composable or Svelte store).
• Produce Storybook stories and handoff notes after implementing a production-ready component.