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