tailwindcss-design
TailwindCSS Design Patterns
TailwindCSS implementation companion for web-design-mastery skill. Translates Refactoring UI principles into Tailwind utility classes.
Prerequisite: This skill provides Tailwind-specific syntax. For design theory and decision-making, reference
web-design-masteryskill.
⚠️ CRITICAL: Project Brand Colors First
ALWAYS check tailwind.config.js for custom colors before using generic colors.
If the project defines primary, secondary, brand, or similar custom colors, USE THEM:
// tailwind.config.js
colors: {
primary: { 50: '...', 500: '...', 900: '...' },
secondary: { ... },
More from anilcancakir/my-claude-code
flutter-design
Flutter/Dart implementation patterns for Refactoring UI principles. COMPANION skill for mobile-app-design-mastery. ALWAYS activate for: Flutter theming, ThemeData, ColorScheme, TextTheme, BoxDecoration, Material 3, Flutter shadows, Flutter spacing, Flutter typography, Flutter dark mode, Flutter components, Flutter styling, Dart UI, Widget decoration. Provides ThemeData setup, color schemes, typography styles, spacing utilities, decoration patterns. Turkish: Flutter tema, Flutter renk, Flutter tasarım, Dart UI, widget stil. English: Flutter theming, Material Design, Flutter styling, widget decoration.
76mobile-app-design-mastery
Production-grade mobile application UI design based on Refactoring UI principles. ALWAYS activate for: Flutter app, mobile app, iOS app, Android app, mobile UI, app screens, mobile navigation, bottom sheets, mobile forms, touch targets, mobile typography, app color scheme, mobile cards, list views, mobile modals, tab bars, app bars, floating action buttons. Provides mobile design workflow, touch-optimized spacing, mobile typography scale, platform-aware patterns. Turkish: mobil uygulama tasarımı, Flutter tasarım, uygulama arayüzü, mobil UI, telefon uygulaması, Android tasarım, iOS tasarım. English: app design, mobile interface, touch-friendly, native feel, mobile UX.
36web-design-mastery
Production-grade web application UI design based on Refactoring UI principles. ALWAYS activate for: landing page, dashboard, auth screens, hero sections, card design, button design, form inputs, navigation, layouts, spacing decisions, typography hierarchy, color selection, shadows, depth, empty states, background decoration. Provides design workflow, visual hierarchy, spacing systems (4px grid), type scale, HSL color systems, shadow elevation, finishing touches. Turkish: sayfa tasarımı, UI/UX, frontend tasarım, web tasarım, güzel arayüz, modern tasarım, card tasarımı, buton stili, form tasarımı, renk paleti, tipografi. English: beautiful interface, sleek design, premium feel, visual hierarchy, whitespace, color palette, typography scale.
34laravel-api-architect
Laravel API development, REST endpoints, JSON responses, Sanctum/Passport authentication, Service-Repository pattern. ALWAYS activate when: working with routes/api.php, app/Http/Controllers/Api/, API endpoints, token authentication, mobile backend, API Resource, JsonResponse, FormRequest, Policy. Triggers on: endpoint çalışmıyor, API hatası, API error, 401 unauthorized, 403 forbidden, 422 validation, token expired, login endpoint, register API, CRUD operations, postman, fetch request, axios, mobile backend, webhook, OAuth, JWT, auth guard, rate limit, throttle, response format, pagination API.
10laravel-infrastructure
Laravel Horizon queues, Octane performance, Reverb WebSockets, Redis caching, PostgreSQL database. ALWAYS activate when: working with queue jobs, cache, sessions, broadcasting, database performance, supervisor, worker. Triggers on: job failed, queue stuck, cache not clearing, Redis connection, broadcast event, WebSocket, real-time, Horizon dashboard, Octane memory leak, slow query, N+1, database timeout, connection refused, kuyruk çalışmıyor, cache temizlenmiyor, job başarısız, worker durdu, broadcast çalışmıyor, real-time gelmiyor.
10laravel-fullstack
Laravel Blade views, Alpine.js, Vue.js integration, TailwindCSS styling, Vite assets. ALWAYS activate when: working with resources/views/, Blade components, frontend forms, UI elements, modals, dropdowns, forms. Triggers on: görünmüyor, gösterilmiyor, sayfa yüklenmiyor, sayfa açılmıyor, form çalışmıyor, form gönderilmiyor, buton çalışmıyor, button not working, style bozuk, CSS bozuk, renk yanlış, color wrong, responsive bozuk, mobile görünüm, dark mode çalışmıyor, layout bozuk, component çalışmıyor, modal açılmıyor, dropdown çalışmıyor, asset yüklenmiyor, image not loading, JS error, JavaScript hatası.
10