---
name: laravel-blade-ui
description: >
  Apply for ANY Laravel Blade + Tailwind UI work: layouts, nav, forms, tables, dashboards,
  cards, badges, empty states, alerts. Trigger on "make it look better", "design this page",
  or when editing Blade. Encodes a premium flat aesthetic (Linear/Vercel-like): precise borders,
  restrained color, no decorative gradients/shadows on cards, purposeful hierarchy.
---

# Laravel Blade + Tailwind — Premium UI Skill

## Using this skill in **ngoerp**

This repository already uses **semantic design tokens** (`bg-card`, `border-border`, `text-muted-foreground`, `bg-primary`, etc.) via CSS variables — not raw `gray-100` / `brand-600` from the examples below. When you implement:

- **Map** example `border-gray-100` → `border-border`, `bg-white` → `bg-card`, `text-gray-900` → `text-foreground`, inputs → `border-input bg-background`.
- The **Rail + Panel + Content** shell is a *reference pattern*; do **not** replace the whole workspace in one shot unless the task explicitly asks for a shell migration. Prefer **incremental** upgrades: badges, form field wrapper, tables, empty states.
- **Icons**: examples use `@svg()` / Heroicons — this repo may use inline SVG or other assets; keep icons minimal and consistent.
- **Plugins** (`@tailwindcss/forms`, typography): only add if `package.json` / build pipeline already supports them.

---

## The design standard

- **Flat** — no heavy drop shadows on cards; no decorative gradients on surfaces.
- **Precise** — 1px borders (`border`), consistent spacing scale.
- **Restrained** — fewer ornaments; clear hierarchy (label → control → hint → error).
- **Purposeful color** — color signals status / destructive / success, not decoration.

Ask: *What does the user need to do here, and what is the minimum UI to support that?*

---

## Design tokens (reference — adapt to repo theme)

When extending Tailwind in a greenfield app, the original skill suggests `brand` palette, Inter, `@tailwindcss/forms`, typography plugin. In **ngoerp**, extend `theme.extend` only in line with existing `resources/css/app.css` variables.

---

## Layout architecture (reference)

**Rail (52px) + Panel (220px) + Content** pattern — replicate only when building a new shell or migrating layouts. Structure: dark icon rail, light nav panel, `bg-muted/30` or neutral content canvas, topbar, scrollable `<main>`.

---

## Forms — field wrapper (mandatory pattern for new forms)

Every labelled control should use a shared field wrapper so hints and `@error` stay aligned.

```blade
{{-- resources/views/components/forms/field.blade.php --}}
@props(['label', 'name', 'hint' => null, 'required' => false])

<div class="space-y-1.5">
    <label for="{{ $name }}" class="block text-sm font-medium text-foreground">
        {{ $label }}
        @if($required)
            <span class="text-destructive" aria-hidden="true">*</span>
        @endif
    </label>
    <div>{{ $slot }}</div>
    @if($hint && !$errors->has($name))
        <p class="text-xs text-muted-foreground">{{ $hint }}</p>
    @endif
    @error($name)
        <p class="text-xs text-destructive" role="alert">{{ $message }}</p>
    @enderror
</div>
```

Inputs: `rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`.

---

## Status as badge — not raw text

Map domain statuses to pill styles (semantic tokens). Use `<x-ui.status-pill>` (or equivalent) for leave, travel, approvals.

---

## Cards

`bg-card border border-border rounded-lg` — avoid `shadow-xl` / heavy elevation. Optional subtle `shadow-sm` only if the product already uses it consistently.

---

## Tables

Wrapped table: `overflow-hidden rounded-lg border border-border bg-card`, header row `bg-muted/40 text-muted-foreground text-xs uppercase tracking-wide`, body rows `hover:bg-muted/30`.

---

## Alerts / flash

Use bordered, tinted regions: `border-destructive/40 bg-destructive/5` for errors; success `border-emerald-500/30 bg-emerald-500/10`.

---

## Empty states

Never a bare "No items." — icon + short title + one line of guidance + primary CTA when applicable.

---

## Alpine patterns

Dropdowns: `x-data`, `@click.outside`, small transitions. Inline confirm for destructive actions.

---

## Quality checklist (before shipping Blade)

- [ ] Per-field `@error` (or field component) — not only a generic box.
- [ ] `old()` on inputs after validation failures.
- [ ] Status shown as pill/badge where applicable.
- [ ] Empty states for lists.
- [ ] No random one-off hex colors — stick to theme tokens.
- [ ] `@csrf` on forms; method spoofing for PATCH/DELETE.
- [ ] Focus visible styles on interactive elements.
- [ ] Prefer `rounded-lg` over oversized `rounded-2xl` unless the product pattern says otherwise.

---

## Never

- Naked inputs with ad-hoc `class="border p-2"`.
- Plain text for workflow status in dense tables.
- Large decorative gradients on cards or hero sections (unless explicitly part of brand).
- Omitting loading/disabled states on slow submits when using Livewire/Alpine.

---

## Original skill appendix (Tailwind config + rail/panel/topbar examples)

The following blocks are preserved from the upstream skill for **greenfield** projects or gradual migration. **Re-read the "Using this skill in ngoerp" section before copying classes verbatim.**

```js
// tailwind.config.js (reference only)
const colors = require('tailwindcss/colors');
module.exports = {
  content: [
    './resources/views/**/*.blade.php',
    './app/View/Components/**/*.php',
    './app/Livewire/**/*.php',
  ],
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#E1F5EE',
          100: '#9FE1CB',
          200: '#5DCAA5',
          400: '#1D9E75',
          600: '#0F6E56',
          800: '#085041',
          900: '#04342C',
          950: '#02241A',
        },
      },
      fontFamily: { sans: ['Inter var', 'Inter', 'ui-sans-serif', 'system-ui'] },
      fontSize: { '2xs': ['0.625rem', { lineHeight: '0.875rem' }] },
      borderWidth: { DEFAULT: '1px', '0.5': '0.5px' },
    },
  },
  plugins: [
    require('@tailwindcss/forms')({ strategy: 'class' }),
    require('@tailwindcss/typography'),
  ],
};
```

Rail, Panel, Topbar, Card, Table, Alert, Empty state, Badge, and Alpine snippets from the upstream document are **conceptual references** — implement equivalent structure with **ngoerp** tokens when touching those areas.
