Adoption

Agent Skills are supported by leading AI development tools.

VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory

vuralserhat86/skills/tailwind_mastery

Name: skills/tailwind_mastery
Author: vuralserhat86

skills/tailwind_mastery/SKILL.md

npx skillsauth add vuralserhat86/antigravity-agentic-skills skills/tailwind_mastery

Clean

TrivyContainer and dependency vulnerability scanner

Clean

SemgrepStatic code analysis for vulnerabilities

Clean

mcp-scan (Snyk)Model Context Protocol security validation

Skipped

Snyk (dep)Open source security scanning

Skipped

Socket.devSupply chain security analysis

Skipped

VirusTotalMulti-engine malware detection

Skipped

CrowdStrikeAdvanced threat intelligence

Skipped

OSV-ScannerOpen Source Vulnerability database check

Skipped

OWASP Dep-Check

🎨 Tailwind Mastery

Tailwind CSS v4 ve utility-first CSS best practices rehberi.

📋 İçindekiler

Tailwind v4 Yenilikleri
Design System
Responsive Patterns
Component Patterns
Dark Mode
Performance

1. Tailwind v4 Yenilikleri

CSS-First Configuration

/* app.css */
@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #10b981;
  --font-display: "Inter", sans-serif;
  --spacing-128: 32rem;
}

Otomatik Content Detection

/* v4'te content config'e gerek yok */
/* Otomatik olarak tüm dosyalar taranır */

Native CSS Features

/* Container Queries */
@container (min-width: 400px) {
  .card { /* styles */ }
}

/* v4 utility */
<div class="@container">
  <div class="@md:flex">...</div>
</div>

2. Design System

Spacing Scale

<!-- 4px base (0.25rem) -->
<div class="p-1">  <!-- 4px -->
<div class="p-2">  <!-- 8px -->
<div class="p-4">  <!-- 16px -->
<div class="p-8">  <!-- 32px -->
<div class="p-16"> <!-- 64px -->

Typography Scale

<h1 class="text-4xl font-bold"><!-- 36px -->
<h2 class="text-3xl font-semibold"><!-- 30px -->
<h3 class="text-2xl font-medium"><!-- 24px -->
<p class="text-base"><!-- 16px -->
<small class="text-sm"><!-- 14px -->

Color System

<!-- Primary palette -->
<div class="bg-blue-500 hover:bg-blue-600">
<div class="text-blue-700 dark:text-blue-300">

<!-- Semantic colors -->
<div class="bg-success"> <!-- Custom -->
<div class="text-error">

Custom Theme

@theme {
  /* Colors */
  --color-brand-50: #eff6ff;
  --color-brand-500: #3b82f6;
  --color-brand-900: #1e3a8a;
  
  /* Typography */
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "Fira Code", monospace;
  
  /* Shadows */
  --shadow-soft: 0 2px 15px -3px rgb(0 0 0 / 0.1);
}

3. Responsive Patterns

Breakpoints

<!-- Mobile first -->
<div class="
  w-full          /* base: mobile */
  md:w-1/2        /* 768px+ */
  lg:w-1/3        /* 1024px+ */
  xl:w-1/4        /* 1280px+ */
  2xl:w-1/5       /* 1536px+ */
">

Responsive Grid

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Responsive Typography

<h1 class="text-2xl md:text-4xl lg:text-6xl font-bold">
  Responsive Title
</h1>

Hide/Show

<div class="hidden md:block">Desktop only</div>
<div class="md:hidden">Mobile only</div>

4. Component Patterns

Card

<div class="
  bg-white dark:bg-gray-800
  rounded-2xl
  shadow-lg hover:shadow-xl
  transition-shadow duration-300
  p-6
  border border-gray-100 dark:border-gray-700
">
  <h3 class="text-lg font-semibold">Title</h3>
  <p class="text-gray-600 dark:text-gray-300 mt-2">Content</p>
</div>

Button Variants

<!-- Primary -->
<button class="
  bg-blue-600 hover:bg-blue-700
  text-white font-medium
  px-6 py-3 rounded-lg
  transition-colors
  focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
">
  Primary
</button>

<!-- Secondary -->
<button class="
  bg-gray-100 hover:bg-gray-200
  text-gray-900 font-medium
  px-6 py-3 rounded-lg
  transition-colors
">
  Secondary
</button>

<!-- Outline -->
<button class="
  border-2 border-blue-600
  text-blue-600 hover:bg-blue-50
  font-medium px-6 py-3 rounded-lg
  transition-colors
">
  Outline
</button>

Input

<input class="
  w-full px-4 py-3
  border border-gray-300 rounded-lg
  focus:ring-2 focus:ring-blue-500 focus:border-blue-500
  outline-none transition
  placeholder:text-gray-400
" placeholder="Enter text...">

Flex Patterns

<!-- Center -->
<div class="flex items-center justify-center min-h-screen">

<!-- Space between -->
<div class="flex items-center justify-between">

<!-- Stack (vertical) -->
<div class="flex flex-col gap-4">

5. Dark Mode

Class Strategy

<!-- html'e class ekle -->
<html class="dark">

<!-- Component -->
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">

System Preference

// tailwind.config.js (v3) veya @media (v4)
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.documentElement.classList.add('dark');
}

Toggle Implementation

function toggleDarkMode() {
  document.documentElement.classList.toggle('dark');
  localStorage.theme = document.documentElement.classList.contains('dark') 
    ? 'dark' : 'light';
}

6. Performance

Purge Optimization

/* v4: Otomatik - sadece kullanılan class'lar bundle'a dahil */

Avoid Dynamic Classes

<!-- ❌ YANLIŞ: Dinamik class purge edilebilir -->
<div class={`text-${color}-500`}>

<!-- ✅ DOĞRU: Tam class adı -->
<div class={color === 'red' ? 'text-red-500' : 'text-blue-500'}>

Safelist (Gerekirse)

// tailwind.config.js
module.exports = {
  safelist: [
    'bg-red-500',
    'bg-green-500',
    { pattern: /^bg-(red|green|blue)-/ },
  ],
};

Production Build

# Minified CSS
NODE_ENV=production npx tailwindcss -i input.css -o output.css --minify

🎯 Quick Reference

Spacing: `p-{n}`, `m-{n}`, `gap-{n}`

Sizing: `w-{n}`, `h-{n}`, `size-{n}`

Flex: `flex`, `items-center`, `justify-between`

Grid: `grid`, `grid-cols-{n}`, `gap-{n}`

Text: `text-{size}`, `font-{weight}`, `text-{color}`

Border: `border`, `border-{n}`, `rounded-{size}`

Shadow: `shadow`, `shadow-{size}`

Transition: `transition`, `duration-{ms}`, `ease-{type}`

🔄 Workflow

Kaynak: Tailwind CSS v4.0 Release & Adam Wathan's Design Tips

Aşama 1: Foundation & Theme Setup

[ ] V4 Configuration: tailwind.config.js yerine CSS-first (@theme) konfigürasyonunu kurgula.
[ ] Design Tokens Ingestion: Renk paleti, typography scale ve spacing değerlerini CSS değişkenleri olarak tanımla.
[ ] Base Style Reset: @layer base kullanarak global stil sıfırlama (Preflight) ve font yüklemelerini yap.

Aşama 2: Utility-First Implementation

[ ] Layout Orchestration: Sayfa yapısını Grid ve Flex kullanarak duyarlı (Responsive) şekilde kur.
[ ] Interaction Variants: Hover, focus, active ve group-hover state'lerini kullanarak etkileşimi artır.
[ ] Modern CSS Utilities: @container queries ve logical properties (margin-inline vb.) kullanımını önceliklendir.

Aşama 3: Polish & Optimization

[ ] Visual Hierarchy Audit: shadow, opacity ve z-index values'larının hiyerarşiye uygunluğunu kontrol et.
[ ] Dark Mode Sync: dark: variant'larının semantik renklerle uyumlu olduğunu doğrula.
[ ] Bundle Check: Production build sonrası CSS boyutunu ve gereksiz class kullanımını (Unused CSS) denetle.

Kontrol Noktaları

| Aşama | Doğrulama | |-------|-----------| | 1 | Karmaşık komponentler için @apply yerine "extract to component" stratejisi mi kullanıldı? | | 2 | Yazı tipi (Typography) okunabilirliği kontrast testinden geçiyor mu? | | 3 | Responsive kırılmalar (sm, md, lg) içerik odaklı mı? |

Tailwind Mastery v1.5 - With Workflow

vuralserhat86/skills/tailwind_mastery

skills/tailwind_mastery/SKILL.md

--- name: tailwind_mastery router_kit: AIKit description: Tailwind CSS v4, design tokens, responsive patterns ve utility-first CSS best practices. metadata: skillport: category: design tags: [agents, algorithms, artificial intelligence, automation, chatbots, cognitive services, deep learning, embeddings, frameworks, generative ai, inference, large language models, llm, machine learning, model fine-tuning, natural language processing, neural networks, nlp, openai, prompt engineering, ra

42 stars

tools

Updated Apr 22, 2026

$ install --global

skillsauth

npx skillsauth add vuralserhat86/antigravity-agentic-skills skills/tailwind_mastery

Install this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.

Security Scan Results

3 of 9 scanners reported clean

Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.

Scanners Passed

Scanners in report

Clean

TrivyContainer and dependency vulnerability scanner

95%

Clean

SemgrepStatic code analysis for vulnerabilities

95%

Clean

mcp-scan (Snyk)Model Context Protocol security validation

95%

Skipped

Snyk (dep)Open source security scanning

50%

Skipped

Socket.devSupply chain security analysis

50%

Skipped

VirusTotalMulti-engine malware detection

50%

Skipped

CrowdStrikeAdvanced threat intelligence

50%

Skipped

OSV-ScannerOpen Source Vulnerability database check

50%

Skipped

OWASP Dep-Check

50%

Last scanned: Apr 22, 2026, 6:10 AM126.9s1 file scanned

SKILL.md

name:: tailwind_mastery
router_kit:: AIKit
description:: Tailwind CSS v4, design tokens, responsive patterns ve utility-first CSS best practices.
category:: design
tags:: [agents, algorithms, artificial intelligence, automation, chatbots, cognitive services, deep learning, embeddings, frameworks, generative ai, inference, large language models, llm, machine learning, model fine-tuning, natural language processing, neural networks, nlp, openai, prompt engineering, rag, retrieval augmented generation, tailwind mastery, tools, vector databases, workflow automation] - responsive

🎨 Tailwind Mastery

Tailwind CSS v4 ve utility-first CSS best practices rehberi.

📋 İçindekiler

Tailwind v4 Yenilikleri
Design System
Responsive Patterns
Component Patterns
Dark Mode
Performance

1. Tailwind v4 Yenilikleri

CSS-First Configuration

/* app.css */
@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #10b981;
  --font-display: "Inter", sans-serif;
  --spacing-128: 32rem;
}

Otomatik Content Detection

/* v4'te content config'e gerek yok */
/* Otomatik olarak tüm dosyalar taranır */

Native CSS Features

/* Container Queries */
@container (min-width: 400px) {
  .card { /* styles */ }
}

/* v4 utility */
<div class="@container">
  <div class="@md:flex">...</div>
</div>

2. Design System

Spacing Scale

<!-- 4px base (0.25rem) -->
<div class="p-1">  <!-- 4px -->
<div class="p-2">  <!-- 8px -->
<div class="p-4">  <!-- 16px -->
<div class="p-8">  <!-- 32px -->
<div class="p-16"> <!-- 64px -->

Typography Scale

<h1 class="text-4xl font-bold"><!-- 36px -->
<h2 class="text-3xl font-semibold"><!-- 30px -->
<h3 class="text-2xl font-medium"><!-- 24px -->
<p class="text-base"><!-- 16px -->
<small class="text-sm"><!-- 14px -->

Color System

<!-- Primary palette -->
<div class="bg-blue-500 hover:bg-blue-600">
<div class="text-blue-700 dark:text-blue-300">

<!-- Semantic colors -->
<div class="bg-success"> <!-- Custom -->
<div class="text-error">

Custom Theme

@theme {
  /* Colors */
  --color-brand-50: #eff6ff;
  --color-brand-500: #3b82f6;
  --color-brand-900: #1e3a8a;
  
  /* Typography */
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "Fira Code", monospace;
  
  /* Shadows */
  --shadow-soft: 0 2px 15px -3px rgb(0 0 0 / 0.1);
}

3. Responsive Patterns

Breakpoints

<!-- Mobile first -->
<div class="
  w-full          /* base: mobile */
  md:w-1/2        /* 768px+ */
  lg:w-1/3        /* 1024px+ */
  xl:w-1/4        /* 1280px+ */
  2xl:w-1/5       /* 1536px+ */
">

Responsive Grid

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Responsive Typography

<h1 class="text-2xl md:text-4xl lg:text-6xl font-bold">
  Responsive Title
</h1>

Hide/Show

<div class="hidden md:block">Desktop only</div>
<div class="md:hidden">Mobile only</div>

4. Component Patterns

Card

<div class="
  bg-white dark:bg-gray-800
  rounded-2xl
  shadow-lg hover:shadow-xl
  transition-shadow duration-300
  p-6
  border border-gray-100 dark:border-gray-700
">
  <h3 class="text-lg font-semibold">Title</h3>
  <p class="text-gray-600 dark:text-gray-300 mt-2">Content</p>
</div>

Button Variants

<!-- Primary -->
<button class="
  bg-blue-600 hover:bg-blue-700
  text-white font-medium
  px-6 py-3 rounded-lg
  transition-colors
  focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
">
  Primary
</button>

<!-- Secondary -->
<button class="
  bg-gray-100 hover:bg-gray-200
  text-gray-900 font-medium
  px-6 py-3 rounded-lg
  transition-colors
">
  Secondary
</button>

<!-- Outline -->
<button class="
  border-2 border-blue-600
  text-blue-600 hover:bg-blue-50
  font-medium px-6 py-3 rounded-lg
  transition-colors
">
  Outline
</button>

Input

<input class="
  w-full px-4 py-3
  border border-gray-300 rounded-lg
  focus:ring-2 focus:ring-blue-500 focus:border-blue-500
  outline-none transition
  placeholder:text-gray-400
" placeholder="Enter text...">

Flex Patterns

<!-- Center -->
<div class="flex items-center justify-center min-h-screen">

<!-- Space between -->
<div class="flex items-center justify-between">

<!-- Stack (vertical) -->
<div class="flex flex-col gap-4">

5. Dark Mode

Class Strategy

<!-- html'e class ekle -->
<html class="dark">

<!-- Component -->
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">

System Preference

// tailwind.config.js (v3) veya @media (v4)
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.documentElement.classList.add('dark');
}

Toggle Implementation

function toggleDarkMode() {
  document.documentElement.classList.toggle('dark');
  localStorage.theme = document.documentElement.classList.contains('dark') 
    ? 'dark' : 'light';
}

6. Performance

Purge Optimization

/* v4: Otomatik - sadece kullanılan class'lar bundle'a dahil */

Avoid Dynamic Classes

<!-- ❌ YANLIŞ: Dinamik class purge edilebilir -->
<div class={`text-${color}-500`}>

<!-- ✅ DOĞRU: Tam class adı -->
<div class={color === 'red' ? 'text-red-500' : 'text-blue-500'}>

Safelist (Gerekirse)

// tailwind.config.js
module.exports = {
  safelist: [
    'bg-red-500',
    'bg-green-500',
    { pattern: /^bg-(red|green|blue)-/ },
  ],
};

Production Build

# Minified CSS
NODE_ENV=production npx tailwindcss -i input.css -o output.css --minify

🎯 Quick Reference

Spacing: `p-{n}`, `m-{n}`, `gap-{n}`

Sizing: `w-{n}`, `h-{n}`, `size-{n}`

Flex: `flex`, `items-center`, `justify-between`

Grid: `grid`, `grid-cols-{n}`, `gap-{n}`

Text: `text-{size}`, `font-{weight}`, `text-{color}`

Border: `border`, `border-{n}`, `rounded-{size}`

Shadow: `shadow`, `shadow-{size}`

Transition: `transition`, `duration-{ms}`, `ease-{type}`

🔄 Workflow

Kaynak: Tailwind CSS v4.0 Release & Adam Wathan's Design Tips

Aşama 1: Foundation & Theme Setup

[ ] V4 Configuration: tailwind.config.js yerine CSS-first (@theme) konfigürasyonunu kurgula.
[ ] Design Tokens Ingestion: Renk paleti, typography scale ve spacing değerlerini CSS değişkenleri olarak tanımla.
[ ] Base Style Reset: @layer base kullanarak global stil sıfırlama (Preflight) ve font yüklemelerini yap.

Aşama 2: Utility-First Implementation

[ ] Layout Orchestration: Sayfa yapısını Grid ve Flex kullanarak duyarlı (Responsive) şekilde kur.
[ ] Interaction Variants: Hover, focus, active ve group-hover state'lerini kullanarak etkileşimi artır.
[ ] Modern CSS Utilities: @container queries ve logical properties (margin-inline vb.) kullanımını önceliklendir.

Aşama 3: Polish & Optimization

[ ] Visual Hierarchy Audit: shadow, opacity ve z-index values'larının hiyerarşiye uygunluğunu kontrol et.
[ ] Dark Mode Sync: dark: variant'larının semantik renklerle uyumlu olduğunu doğrula.
[ ] Bundle Check: Production build sonrası CSS boyutunu ve gereksiz class kullanımını (Unused CSS) denetle.

Kontrol Noktaları

Tailwind Mastery v1.5 - With Workflow

Related Skills

vuralserhat86/zustand_state

tools

VerifiedTrustedCommunity

Production-tested setup for Zustand state management in React. Includes patterns for persistence, devtools, and TypeScript patterns. Prevents hydration mismatches and render loops.

42SKILL.mdUpdated Apr 22, 2026

vuralserhat86/zustand_state

vuralserhat86/xlsx

development

VerifiedTrustedCommunity

Comprehensive spreadsheet creation, editing, and analysis with support for formulas, formatting, data analysis, and visualization. When Claude needs to work with spreadsheets (.xlsx, .xlsm, .csv, .tsv, etc) for: (1) Creating new spreadsheets with formulas and formatting, (2) Reading or analyzing data, (3) Modify existing spreadsheets while preserving formulas, (4) Data analysis and visualization in spreadsheets, or (5) Recalculating formulas

42SKILL.mdUpdated Apr 22, 2026

vuralserhat86/skills/websocket_engineer

development

VerifiedTrustedCommunity

--- name: websocket_engineer router_kit: FullStackKit description: WebSocket specialist for real-time communication systems. Invoke for Socket.IO, WebSocket servers, bidirectional messaging, presence systems. Keywords: WebSocket, Socket.IO, real-time, pub/sub, Redis. triggers: - WebSocket - Socket.IO - real-time communication - bidirectional messaging - pub/sub - server push - live updates - chat systems - presence tracking role: specialist scope: implementation output-format:

42SKILL.mdUpdated Apr 22, 2026

vuralserhat86/skills/websocket_engineer

vuralserhat86/webapp_testing

tools

VerifiedTrustedCommunity

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

42SKILL.mdUpdated Apr 22, 2026

vuralserhat86/webapp_testing

Download

For Claude Desktop. Download once, then upload the file in the app — no terminal needed.

Need help? View full Cowork setup guide →

Install manually

Choose your platform

# Clone the repo
git clone https://github.com/vuralserhat86/antigravity-agentic-skills.git

# Copy into Claude Code skills folder (global)
cp -r antigravity-agentic-skills/skills/tailwind_mastery ~/.claude/skills/

Claude Code Skills — official skills path docs.

Repository

vuralserhat86/antigravity-agentic-skills

42 stars

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT

Adoption

vuralserhat86/skills/tailwind_mastery

$ install --global

Security Scan Results

SKILL.md

🎨 Tailwind Mastery

📋 İçindekiler

1. Tailwind v4 Yenilikleri

CSS-First Configuration

Otomatik Content Detection

Native CSS Features

2. Design System

Spacing Scale

Typography Scale

Color System

Custom Theme

3. Responsive Patterns

Breakpoints

Responsive Grid

Responsive Typography

Hide/Show

4. Component Patterns

Card

Button Variants

Input

Flex Patterns

5. Dark Mode

Class Strategy

System Preference

Toggle Implementation

6. Performance

Purge Optimization

Avoid Dynamic Classes

Safelist (Gerekirse)

Production Build

🎯 Quick Reference

Spacing: p-{n}, m-{n}, gap-{n}

Sizing: w-{n}, h-{n}, size-{n}

Flex: flex, items-center, justify-between

Grid: grid, grid-cols-{n}, gap-{n}

Text: text-{size}, font-{weight}, text-{color}

Border: border, border-{n}, rounded-{size}

Shadow: shadow, shadow-{size}

Transition: transition, duration-{ms}, ease-{type}

🔄 Workflow

Aşama 1: Foundation & Theme Setup

Aşama 2: Utility-First Implementation

Aşama 3: Polish & Optimization

Kontrol Noktaları

Related Skills

vuralserhat86/zustand_state

vuralserhat86/xlsx

vuralserhat86/skills/websocket_engineer

vuralserhat86/webapp_testing

vuralserhat86/skills/tailwind_mastery

$ install --global

Security Scan Results

SKILL.md

🎨 Tailwind Mastery

📋 İçindekiler

1. Tailwind v4 Yenilikleri

CSS-First Configuration

Otomatik Content Detection

Native CSS Features

2. Design System

Spacing Scale

Typography Scale

Color System

Custom Theme

3. Responsive Patterns

Breakpoints

Responsive Grid

Responsive Typography

Hide/Show

4. Component Patterns

Card

Button Variants

Input

Flex Patterns

5. Dark Mode

Spacing: `p-{n}`, `m-{n}`, `gap-{n}`

Sizing: `w-{n}`, `h-{n}`, `size-{n}`

Flex: `flex`, `items-center`, `justify-between`

Grid: `grid`, `grid-cols-{n}`, `gap-{n}`

Text: `text-{size}`, `font-{weight}`, `text-{color}`

Border: `border`, `border-{n}`, `rounded-{size}`

Shadow: `shadow`, `shadow-{size}`

Transition: `transition`, `duration-{ms}`, `ease-{type}`

Spacing: `p-{n}`, `m-{n}`, `gap-{n}`

Sizing: `w-{n}`, `h-{n}`, `size-{n}`

Flex: `flex`, `items-center`, `justify-between`

Grid: `grid`, `grid-cols-{n}`, `gap-{n}`

Text: `text-{size}`, `font-{weight}`, `text-{color}`

Border: `border`, `border-{n}`, `rounded-{size}`

Shadow: `shadow`, `shadow-{size}`

Transition: `transition`, `duration-{ms}`, `ease-{type}`