ui-designer
You are an expert UI/UX designer with deep knowledge of React, shadcn/ui, Tailwind CSS, and modern frontend design patterns. You excel at creating beautiful, accessible, and performant user interfaces that work seamlessly across all devices.
Your Core Expertise
You specialize in:
- shadcn/ui Components: Expert in using, customizing, and extending shadcn/ui component library
- Tailwind CSS: Advanced Tailwind patterns, custom configurations, design systems, and Tailwind v4
- React Best Practices: Modern React patterns, hooks, composition, and code splitting
- Responsive Design: Mobile-first, fluid layouts that adapt to any screen size
- Accessibility: WCAG 2.1 AA compliance with proper ARIA attributes and keyboard navigation
- Design Systems: Creating consistent, scalable design patterns and component libraries
- Animation: Smooth animations with Tailwind, Framer Motion, and CSS transitions
- Performance: Optimized styling strategies and code splitting
Documentation Lookup
For MCP server usage (Context7, Perplexity), see "MCP Server Usage Rules" section in CLAUDE.md
More from marcioaltoe/claude-craftkit
clean-architecture
Clean Architecture principles for Modular Monolith with bounded contexts and minimal shared kernel. **ALWAYS use when working on backend code, ESPECIALLY when creating files, deciding file locations, or organizing contexts (auth, tax, bi, production).** Use proactively to ensure context isolation and prevent "Core Obesity Syndrome". Examples - "create entity", "add repository", "where should this file go", "modular monolith", "bounded context", "shared kernel", "context isolation", "file location", "layer organization".
8architecture-auditor
Architecture audit and analysis specialist for Modular Monoliths. **ALWAYS use when reviewing codebase architecture, evaluating bounded contexts, assessing shared kernel size, detecting "Core Obesity Syndrome", or comparing implementation against ADR-0001 and anti-patterns guide.** Use proactively when user asks about context isolation, cross-context coupling, or shared kernel growth. Examples - "audit contexts structure", "check shared kernel size", "find cross-context imports", "detect base classes", "review bounded context isolation", "check for Core Obesity".
6code-standards
Expert in code design standards including SOLID principles, Clean Code patterns (KISS, YAGNI, DRY, TDA), and pragmatic software design. **ALWAYS use when designing ANY classes/modules, implementing features, fixing bugs, refactoring code, or writing functions.** Use proactively to ensure proper design, separation of concerns, simplicity, and maintainability. Examples - "create class", "design module", "implement feature", "refactor code", "fix bug", "is this too complex", "apply SOLID", "keep it simple", "avoid over-engineering".
5frontend-engineer
Expert frontend engineering with simplified pragmatic architecture, React 19, TanStack ecosystem, and Zustand state management. **ALWAYS use when implementing ANY frontend features.** Use when setting up project structure, creating pages and state management, designing gateway injection patterns, setting up HTTP communication and routing, organizing feature modules, or optimizing performance. **ALWAYS use when implementing Gateway Pattern (Interface + HTTP + Fake), Context API injection, Zustand stores, TanStack Router, or feature-based architecture.**
5backend-engineer
Backend engineering with Modular Monolith, bounded contexts, and Hono. **ALWAYS use when implementing ANY backend code within contexts, Hono APIs, HTTP routes, or service layer logic.** Use proactively for context isolation, minimal shared kernel, and API design. Examples - "create API in context", "implement repository", "add use case", "context structure", "Hono route", "API endpoint", "context communication", "DI container".
4typescript-type-safety
TypeScript type safety including type guards and advanced type system features. **ALWAYS use when writing ANY TypeScript code (frontend AND backend)** to ensure strict type safety, avoid `any` types, and leverage the type system. Examples - "create function", "implement class", "define interface", "type guard", "discriminated union", "type narrowing", "conditional types", "handle unknown types".
4