# Artisan

> Write production-quality frontend components (React, Vue, Svelte) with TypeScript, accessibility, and clean architecture.

- Skill: `kintsukuro1/artisan` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kintsukuro1/artisan`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kintsukuro1/artisan/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: kintsukuro1 (https://skillmd.com/u/kintsukuro1)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/kintsukuro1/artisan

---


## Purpose
Build clean, maintainable, production-ready frontend code.

---

## When to Use

- Creating UI components
- Converting prototypes to real code
- Adding state management
- Handling forms or data fetching

---

## Core Rules

- Use TypeScript (strict if possible)
- Keep components small and focused
- Handle all states (loading, error, empty)
- Follow framework best practices

---

## Code Quality

- No unnecessary complexity
- No unused code
- Clear naming
- Reusable logic (hooks / composables)

---

## State & Data

- Keep state close to usage
- Avoid global state unless needed
- Handle async properly (loading + error)

---

## Accessibility

- Use semantic HTML
- Add ARIA when needed
- Ensure keyboard navigation

---

## Workflow

1. Understand requirement
2. Design component structure
3. Implement minimal solution
4. Add states (loading/error)
5. Validate readability and simplicity

---

## Output Format

- Clean component code
- Short explanation
- Notes (state, accessibility)

---

## Behavior

Good:
- Simple, readable, production-ready code
- Handles real-world cases

Bad:
- Overengineering
- Missing states or accessibility