skills.rest
nikhil02032022
nikhil02032022COMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Guide consistent, accessible UI design across Laravel Blade, Tailwind CSS, Alpine.js, and Livewire components.

Updated Apr 7, 2026
Search Tags:#ui#tailwind#ux#design-system#livewire#alpine#blade
One-click install
npx skills add https://github.com/nikhil02032022/AICRM --skill ui-ux-pro-max-nikhil02032022
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/nikhil02032022/AICRM/tree/main/.github/skills/ui-ux-pro-max
Command: npx skills add https://github.com/nikhil02032022/AICRM --skill ui-ux-pro-max-nikhil02032022

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI/UX consistency and design guidance for the A2A-CRM stack (Laravel Blade + Tailwind CSS + Alpine.js + Livewire), enabling faster, accessible, and visually coherent interfaces across features.

Core Features & Use Cases

  • Comprehensive design system including 67 styles, 161 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types, adapted for the Laravel Blade + Tailwind CSS + Alpine.js + Livewire v3 stack.
  • Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code.
  • Elements include button, modal, navbar, sidebar, card, table, form, data table, chart, Livewire component.
  • Style categories cover glassmorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, flat design.
  • Topics include color systems, accessibility, animation, layout, typography, spacing, interaction states, WCAG, DPDP-safe UI.

Quick Start

Apply the UI/UX Pro Max guidelines to design a new dashboard page in Laravel Blade + Tailwind CSS + Alpine.js that follows accessibility and style targets.

Frequently Asked Questions about ui-ux-pro-max

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a consistent UI design system using Laravel Blade and Tailwind CSS?▼

To build a consistent UI design system for Laravel Blade and Tailwind CSS, apply predefined typography, color tokens, and spacing rules across feature creation and UI reviews, ensuring accessible and visually coherent interfaces.

What is the best way to ensure WCAG accessibility in Livewire and Alpine.js components?▼

The best way to ensure WCAG accessibility in Livewire and Alpine.js components is to enforce accessibility checks and interaction state guidelines throughout the UI pipeline, validating modal, form, and data table elements.

Can I use glassmorphism and bento grid styles with Tailwind CSS in a CRM?▼

Yes, you can use glassmorphism and bento grid styles with Tailwind CSS in a CRM by applying the 67 style categories and 161 color palettes adapted specifically for the Livewire v3 and Blade stack.

How do I implement responsive layout and animation guidelines across Blade views?▼

To implement responsive layout and animation guidelines across Blade views, apply the UI pipeline checks during component creation, enforcing rule categories, dark mode targets, and interaction states throughout the views.

Does this UI/UX design guidance cover DPDP-safe UI and chart types?▼

Yes, this UI/UX design guidance covers DPDP-safe UI requirements and includes 25 chart types, ensuring data visualization and privacy compliance are maintained across Tailwind styling and Livewire components.

Related Skills

Explore More Design & Creative Skills→
sasabajicsasabajic
1

laravel-frontend

Enforce Laravel frontend best practices for Blade, Livewire, Inertia.js, Vite, Tailwind CSS, and Alpine.js.

Community
Intermediate
nikhil02032022nikhil02032022

crm-module-builder

Generate Laravel and Blade CRM modules from BRD requirements.

Community
Advanced
HubDigitalEPNHubDigitalEPN
1

fluxui-development

Create and customize Livewire UI components with Flux UI and Tailwind CSS.

Official
Intermediate
stephanjstephanj
9

design-system-starter

Create design systems with design tokens, atomic components, and WCAG 2.1 AA compliance.

Community
Advanced