tailadmin-patterns_skill

This skill enables building consistent admin dashboards by applying TailAdmin UI patterns and Tailwind classes with verified usage from the official source.

Shell

6

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill kaakati/rails-enterprise-dev --skill tailadmin-patterns

SKILL.md33.9 KB

Overview

This skill provides TailAdmin dashboard UI patterns and the exact Tailwind CSS classes used by TailAdmin. It is the authoritative guide for building admin panels, tables, cards, charts, forms, and navigation that must match TailAdmin styling. Always verify classes from the official TailAdmin source before applying them.

How this skill works

The skill inspects TailAdmin layout patterns (sidebar, header, main wrapper), component patterns (cards, KPI cards, tables, forms, modals), and the Tailwind configuration for custom colors, spacing, and shadows. It requires fetching the official TailAdmin source first and then verifying any class against HTML templates, the Tailwind config, and custom CSS. If a class cannot be found in those sources, the class must not be used.

When to use it

When building any dashboard or admin panel interface.
When creating data tables, product lists, KPI/stat cards, or chart containers.
When implementing form controls, buttons, alerts, or modal dialogs.
When designing navigation: sidebar, header, breadcrumbs, or top bars.
For any UI work that needs to follow TailAdmin visual language and utility classes.

Best practices

Always fetch and inspect the official TailAdmin source before coding UI to avoid inventing classes.
Verify classes exist in HTML templates, tailwind.config.js, or custom CSS before use.
Prefer TailAdmin component patterns (card, stats, table) as-is and adapt content, not structure.
Use the custom color, spacing, and shadow tokens from the config to maintain visual consistency.
Keep layout wrappers (sidebar + content + header) intact to preserve responsive behavior.

Example use cases

Implementing a responsive sidebar and header using the TailAdmin main layout wrapper.
Building a KPI dashboard with stats cards that use meta color tokens and KPI markup.
Creating paginated data tables with grid headers, responsive columns, and action cells.
Styling forms and inputs by matching the form input and form-strokedark tokens from the config.
Adding charts inside card components using the chart container patterns and spacing utilities.

FAQ

Do not use it. Search templates, tailwind.config.js, and custom CSS; if it’s absent, choose an existing token or create a validated extension in the config.

Is it acceptable to modify spacing or colors?

Yes, but changes must be applied via the Tailwind config so all derived classes and tokens remain consistent across the dashboard.