agentleFS
Sign inStart free
syofyanzuhadsyofyanzuhad/uptime-kita/.agents/skills/tailwindcss-development/SKILL.md

tailwindcss-development

Skill184 starsChanged 2 months agoApache-2.0View on GitHub

Always invoke when the user's message includes 'tailwind' in any form. Also invoke for: building responsive grid layouts (multi-column card grids, product grids), flex/grid page structures (dashboards with sidebars, fixed topbars, mobile-toggle navs), styling UI components (cards, tables, navbars, pricing sections, forms, inputs, badges), adding dark mode variants, fixing spacing or typography, and Tailwind v3/v4 work. The core use case: writing or fixing Tailwind utility classes in HTML templates (Blade, JSX, Vue). Skip for backend PHP logic, database queries, API routes, JavaScript with no HTML/CSS component, CSS file audits, build tool configuration, and vanilla CSS.

We split this skill into the rules it gives an agent

6 rules. 3 are common, 0 are distinctive, and 3 are very specific to this project.

  • 3

    Common

    Most of the 20 edited versions we read keep these.

  • 0

    Distinctive

    This author's own choices. Worth a look.

  • 3

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Very specific:

    Use search-docs for detailed Tailwind CSS v4 patterns and documentation.

    line 13
  2. Common:

    Use Tailwind CSS classes to style HTML.

    line 17
  3. Common:

    Consider class placement, order, priority, and defaults.

    line 19
  4. Common:

    Always use Tailwind CSS v4 and avoid deprecated utilities.

    line 23
  5. Very specific:

    Use gap utilities instead of margins for spacing between siblings:

    line 69
  6. Very specific:

    If existing pages and components support dark mode, new pages and components must support it the same way, typically using the dark: …

    line 81

“Common” is measured: kept by at least 6 in 10 of the 20 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Tailwind CSS Development

Documentation

Use search-docs for detailed Tailwind CSS v4 patterns and documentation.

Basic Usage

  • Use Tailwind CSS classes to style HTML. Check and follow existing Tailwind conventions in the project before introducing new patterns.
  • Offer to extract repeated patterns into components that match the project's conventions (e.g., Blade, JSX, Vue).
  • Consider class placement, order, priority, and defaults. Remove redundant classes, add classes to parent or child elements carefully to reduce repetition, and group elements logically.

Tailwind CSS v4 Specifics

  • Always use Tailwind CSS v4 and avoid deprecated utilities.
  • corePlugins is not supported in Tailwind v4.

CSS-First Configuration

In Tailwind v4, configuration is CSS-first using the @theme directive — no separate tailwind.config.js file is needed:

<!-- CSS-First Config -->
@theme {
  --color-brand: oklch(0.72 0.11 178);
}

Import Syntax

In Tailwind v4, import Tailwind with a regular CSS @import statement instead of the @tailwind directives used in v3:

<!-- v4 Import Syntax -->
- @tailwind base;
- @tailwind components;
- @tailwind utilities;
+ @import "tailwindcss";

Replaced Utilities

Tailwind v4 removed deprecated utilities. Use the replacements shown below. Opacity values remain numeric.

DeprecatedReplacement
bg-opacity-*bg-black/*
text-opacity-*text-black/*
border-opacity-*border-black/*
divide-opacity-*divide-black/*
ring-opacity-*ring-black/*
placeholder-opacity-*placeholder-black/*
flex-shrink-*shrink-*
flex-grow-*grow-*
overflow-ellipsistext-ellipsis
decoration-slicebox-decoration-slice
decoration-clonebox-decoration-clone

Spacing

Use gap utilities instead of margins for spacing between siblings:

<!-- Gap Utilities -->
<div class="flex gap-8">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

Dark Mode

If existing pages and components support dark mode, new pages and components must support it the same way, typically using the dark: variant:

<!-- Dark Mode -->
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
    Content adapts to color scheme
</div>

Common Patterns

Flexbox Layout

<!-- Flexbox Layout -->
<div class="flex items-center justify-between gap-4">
    <div>Left content</div>
    <div>Right content</div>
</div>

Grid Layout

<!-- Grid Layout -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <div>Card 1</div>
    <div>Card 2</div>
    <div>Card 3</div>
</div>

Common Pitfalls

  • Using deprecated v3 utilities (bg-opacity-, flex-shrink-, etc.)
  • Using @tailwind directives instead of @import "tailwindcss"
  • Trying to use tailwind.config.js instead of CSS @theme directive
  • Using margins for spacing between siblings instead of gap utilities
  • Forgetting to add dark mode variants when the project uses dark mode

Download now (ZIP)

  • Other versions25 projects use a version of this.

    Word for word · 5

    1. whisper-money/whisper-money★ 1.1k100% same
    2. m3ue/m3u-editor★ 870100% same
    3. sparkison/m3u-editor★ 870100% same
    4. owlchester/kanka★ 358100% same
    5. RiprLutuk/PasPapan★ 88100% same

    Edited · 20

    1. coollabsio/coolify★ 65k100% same
    2. anonaddy/anonaddy★ 4.9k100% same
    3. yaojingang/GEOFlow★ 3.8k100% same
    4. relaticle/relaticle★ 1.8k86% same
    5. Relaticle/relaticle★ 1.8k86% same
    6. nasirkhan/laravel-starter★ 1.4k100% same
    7. Blair2004/NexoPOS★ 1.3k71% same
    8. filamentphp/demo★ 1.2k83% same
    9. WINBIGFOX/TimeScribe★ 913100% same
    10. trypostit/trypost★ 79286% same

    10 more not listed

    Wrote their own version · 0

    None found.

    How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.

  • Used alongsideProjects with it also use ai-sdk-development, passport-development and 3 more.

    Other files people use alongside this one.

    Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
    • m3ueSkill

      ai-sdk-development

      TRIGGER when working with ai-sdk which is Laravel official first-party AI SDK. Activate when building, editing AI agents, chatbots, text generation, image generation, audio/TTS, transcription/STT, embeddings, RAG, vector stores, reranking, structured output, streaming, conversation memory, tools, queueing, broadcasting, and provider failover across OpenAI, Anthropic, Gemini, Azure, Groq, xAI, DeepSeek, Mistral, Ollama, ElevenLabs, Cohere, Jina, and VoyageAI. Invoke when the user references ai-sdk, the `Laravel\Ai\` namespace, or this project's AI features — not for Prism PHP or other AI packages used directly.

      Also in 9 projects that use this

    • datashamanSkill

      passport-development

      Develops OAuth2 API authentication with Laravel Passport. Activates when installing or configuring Passport; setting up OAuth2 grants (authorization code, client credentials, personal access tokens, device authorization); managing OAuth clients; protecting API routes with token authentication; defining or checking token scopes; configuring SPA cookie authentication; handling token lifetimes and refresh tokens; or when the user mentions Passport, OAuth2, API tokens, bearer tokens, or API authentication. Make sure to use this skill whenever the user works with OAuth2, API tokens, or third-party API access, even if they don't explicitly mention Passport.

      Also in 7 projects that use this

    • whisper-moneySkill

      cashier-stripe-development

      Handles Laravel Cashier Stripe integration including subscriptions, webhooks, Stripe Checkout, invoices, charges, refunds, trials, coupons, metered billing, and payment failure handling. Triggered when a user mentions Cashier, Billable, IncompletePayment, stripe_id, newSubscription, Stripe subscriptions, or billing. Also applies when setting up webhooks, handling SCA/3DS payment failures, testing with Stripe test cards, or troubleshooting incomplete subscriptions, CSRF webhook errors, or migration publish issues.

      Also in 5 projects that use this

    • datashamanSkill

      livewire-development

      Use for any task or question involving Livewire. Activate if user mentions Livewire, wire: directives, or Livewire-specific concepts like wire:model, wire:click, wire:sort, or islands, invoke this skill. Covers building new components, debugging reactivity issues, real-time form validation, drag-and-drop, loading states, migrating from Livewire 3 to 4, converting component formats (SFC/MFC/class-based), and performance optimization. Do not use for non-Livewire reactive UI (React, Vue, Alpine-only, Inertia.js) or standard Laravel forms without Livewire.

      Also in 7 projects that use this

    • gdarkoSkill

      fortify-development

      ACTIVATE when the user works on authentication in Laravel. This includes login, registration, password reset, email verification, two-factor authentication (2FA/TOTP/QR codes/recovery codes), profile updates, password confirmation, or any auth-related routes and controllers. Activate when the user mentions Fortify, auth, authentication, login, register, signup, forgot password, verify email, 2FA, or references app/Actions/Fortify/, CreateNewUser, UpdateUserProfileInformation, FortifyServiceProvider, config/fortify.php, or auth guards. Fortify is the frontend-agnostic authentication backend for Laravel that registers all auth routes and controllers. Also activate when building SPA or headless authentication, customizing login redirects, overriding response contracts like LoginResponse, or configuring login throttling. Do NOT activate for Laravel Passport (OAuth2 API tokens), Socialite (OAuth social login), or non-auth Laravel features.

      Also in 8 projects that use this

  • In this repository33 other files it gives its agents.

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

Reviews can't be read right now.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free