artisan

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

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