frontend-design
Create distinctive, production-grade frontend interfaces. Implement real working code with exceptional aesthetic attention.
Workflow Selection
Choose workflow based on input type:
| Input | Workflow | Reference |
|---|---|---|
| Screenshot | Replicate exactly | ./references/workflow-screenshot.md |
| Video | Replicate with animations | ./references/workflow-video.md |
| Screenshot/Video (describe only) | Document for devs | ./references/workflow-describe.md |
| 3D/WebGL request | Three.js immersive | ./references/workflow-3d.md |
| Quick task | Rapid implementation | ./references/workflow-quick.md |
| Complex/award-quality | Full immersive | ./references/workflow-immersive.md |
| From scratch | Design Thinking below | - |
All workflows: Activate ui-ux-pro-max skill FIRST for design intelligence.
Screenshot/Video Replication (Quick Reference)
More from hotriluan/alkana-dashboard
ui-ux-pro-max
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
3frontend-dev-guidelines
Build React/TypeScript frontends with modern patterns. Use for components, Suspense, lazy loading, useSuspenseQuery, MUI v7 styling, TanStack Router, performance optimization.
3copywriting
Conversion copywriting formulas, headline templates, email copy patterns, landing page structures, CTA optimization, and writing style extraction. Activate for writing high-converting copy, crafting headlines, email campaigns, landing pages, or applying custom writing styles from assets/writing-styles/ directory.
3ui-styling
Style UIs with shadcn/ui components (Radix UI + Tailwind CSS). Use for accessible components, themes, dark mode, responsive layouts, design systems, color customization.
3media-processing
Process media with FFmpeg (video/audio), ImageMagick (images), RMBG (AI background removal). Use for encoding, format conversion, filters, thumbnails, batch processing, HLS/DASH streaming.
3devops
Deploy to Cloudflare (Workers, R2, D1), Docker, GCP (Cloud Run, GKE), Kubernetes (kubectl, Helm). Use for serverless, containers, CI/CD, GitOps, security audit.
3