About this skill

What problem it addresses

Useful when a web project needs more than a working UI: Laravel/Livewire/FluxUI component-based front ends, Three.js backgrounds or 3D displays, advanced CSS motion, theme consistency, and first-screen performance. These requirements often create tangled responsibilities, inconsistent stack choices, and dropped animation frames. The skill frames “premium web experience” as concrete targets: 60fps animation, <1.5s first-screen load, responsive interaction, and light/dark/system theme behavior.

How it works

Full-stack implementation: Laravel for the backend, Livewire for interactive components, FluxUI for UI composition.
Visual polish: advanced CSS, micro-interactions, magnetic hover, glassmorphism, plus Three.js particle backgrounds or 3D displays.
Working process: analyze requirements and constraints, implement the premium layer, then validate interactions, responsive layouts, and animation smoothness.
Decision and debugging support: use the technical decision framework and debugging playbook when selecting technology, prioritizing optimization, or diagnosing issues in Laravel, Livewire, or Three.js scenarios.

Boundaries

It is best suited to web front-end and PHP full-stack projects with high visual-quality or performance targets. It does not cover native mobile development, server operations, or general backend architecture. If the project does not need FluxUI, Three.js, or advanced CSS, applying it wholesale can add unnecessary complexity.

Screenshots

Use Cases

Integrate FluxUI into a Laravel admin panel with light/dark/system theme switching and smooth transitions.
Build particle backgrounds and 3D displays with Three.js, then check mobile animation at 60fps.
Refactor legacy CSS with glassmorphism, micro-interactions, and magnetic hover while reducing first-screen load below 1.5s.
Diagnose frame drops caused by Livewire requests, Three.js rendering, and CSS animations using performance metrics.

Best For

Engineers maintaining Laravel + Livewire admin apps who need FluxUI components and theme switching.
Front-end engineers building marketing pages that need Three.js particle backgrounds and 60fps 3D displays.
Engineers debugging slow first-screen loads and dropped animation frames in CSS or Livewire behavior.
Senior developers deciding whether to use FluxUI, Three.js, or performance fixes first during refactors.

Related Skills

Code Error Fixer: Five-Step Workflow

@user_01798a01/code-fix

A systematic code error fixing skill that follows a five-step workflow: Reproduce, Isolate, Understand, Fix, Verify, to help developers resolve code errors.

Development 2026.08.30 ↓ 3.5K

Rapid Architecture & Diagram Drawing Tool

@user_04c33885/diagram-builder

Supports inline SVG/HTML rendering and Mermaid code output, covering common technical diagram creation like architecture and flow diagrams.

Development 2026.08.30 ↓ 25.6K

💻

Browser Automation Assistant

@user_c562f70c/browser-auto

A comprehensive browser automation guide covering navigation, interaction, multi-tab management, and data collection, tailored for domestic web ecosystems and tools like Playwright/Selenium.

Development 2026.08.30 ↓ 4.4K

WeChat Sender Pro

@user_8c002059/wechat-sender-pro

Control Windows WeChat through GUI automation to search contacts and send text, images, or files without official APIs.

Development 2026.08.30 ↓ 1.9K

Senior Developer