mobile-app-design-mastery
Mobile App Design Mastery
Production-grade mobile UI design principles adapted from Refactoring UI for Flutter/native apps.
Core Mobile Design Workflow
1. Start with a Screen, Not a Shell
- Design the core functionality of a single screen first
- Don't start with navigation, tab bars, or app chrome
- Work in greyscale first—add color after hierarchy is clear
- Design for the primary device size, then adapt
2. Establish Mobile Systems
Spacing Scale (dp/logical pixels):
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.
76tailwindcss-design
TailwindCSS implementation patterns for Refactoring UI principles. COMPANION skill for web-design-mastery. ALWAYS activate for: TailwindCSS, Tailwind classes, utility classes, Tailwind config, Tailwind components, Tailwind dark mode, Tailwind responsive, Tailwind spacing, Tailwind typography, Tailwind colors, Tailwind shadows. Provides class recipes, component patterns, dark mode implementation, responsive patterns. Turkish: Tailwind kullanımı, Tailwind class, utility CSS, Tailwind config. English: Tailwind patterns, utility-first CSS, Tailwind best practices.
57web-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