codymaster 4.4.4 → 4.5.1

package/skills/skill-creator-ultra/scripts/validate_skill.py

@@ -1,411 +0,0 @@
-#!/usr/bin/env python3
-"""
-validate_skill.py — Kiểm tra tính hợp lệ của file SKILL.md
-
-Sử dụng:
-    python validate_skill.py /path/to/SKILL.md
-    python validate_skill.py /path/to/skill-folder/
-
-Script sẽ kiểm tra:
-  1. YAML frontmatter có hợp lệ không
-  2. Có đầy đủ các section bắt buộc không (Goal, Instructions)
-  3. Có Examples không (khuyến khích mạnh)
-  4. Có Constraints không (khuyến khích)
-  5. Description có đủ chi tiết không
-  6. Cấu trúc thư mục có chuẩn không
-"""
-
-import sys
-import os
-import re
-from pathlib import Path
-
-
-# ============================================================
-# CONSTANTS
-# ============================================================
-
-REQUIRED_SECTIONS = ['goal', 'instructions']
-RECOMMENDED_SECTIONS = ['examples', 'constraints']
-MIN_DESCRIPTION_LENGTH = 30    # Ký tự tối thiểu cho description
-MIN_DESCRIPTION_WORDS = 5      # Từ tối thiểu cho description
-MAX_SKILL_NAME_LENGTH = 50     # Ký tự tối đa cho tên skill
-VALID_SUBFOLDERS = {'scripts', 'resources', 'examples'}
-
-
-# ============================================================
-# COLOR OUTPUT (Windows + Unix compatible)
-# ============================================================
-
-class Colors:
-    """ANSI color codes cho terminal output."""
-    PASS = '\033[92m'       # Green
-    FAIL = '\033[91m'       # Red
-    WARN = '\033[93m'       # Yellow
-    INFO = '\033[96m'       # Cyan
-    BOLD = '\033[1m'
-    RESET = '\033[0m'
-
-    @staticmethod
-    def enable_windows():
-        """Bật ANSI colors cho Windows terminal."""
-        if os.name == 'nt':
-            try:
-                import ctypes
-                kernel32 = ctypes.windll.kernel32
-                kernel32.SetConsoleMode(kernel32.GetStdHandle(-11), 7)
-            except Exception:
-                pass
-
-
-def print_result(status, message):
-    """In kết quả kiểm tra với màu sắc."""
-    if status == 'PASS':
-        icon = f"{Colors.PASS}✅ PASS{Colors.RESET}"
-    elif status == 'FAIL':
-        icon = f"{Colors.FAIL}❌ FAIL{Colors.RESET}"
-    elif status == 'WARN':
-        icon = f"{Colors.WARN}⚠️  WARN{Colors.RESET}"
-    else:
-        icon = f"{Colors.INFO}ℹ️  INFO{Colors.RESET}"
-    
-    print(f"  {icon}  {message}")
-
-
-# ============================================================
-# YAML FRONTMATTER PARSER
-# ============================================================
-
-def parse_frontmatter(content):
-    """
-    Trích xuất YAML frontmatter từ nội dung SKILL.md.
-    
-    Returns:
-        tuple: (frontmatter_dict, body_content) hoặc (None, content) nếu không có frontmatter
-    """
-    # Tìm YAML frontmatter (giữa 2 dấu ---)
-    pattern = r'^---\s*\n(.*?)\n---\s*\n(.*)$'
-    match = re.match(pattern, content, re.DOTALL)
-    
-    if not match:
-        return None, content
-    
-    yaml_content = match.group(1)
-    body = match.group(2)
-    
-    # Parse YAML đơn giản (hỗ trợ multi-line block scalar `|` và `>`)
-    frontmatter = {}
-    lines = yaml_content.strip().split('\n')
-    i = 0
-    while i < len(lines):
-        line = lines[i]
-        stripped = line.strip()
-        if ':' in stripped and not stripped.startswith('#'):
-            key, _, value = stripped.partition(':')
-            key = key.strip()
-            value = value.strip().strip('"').strip("'")
-            
-            # Xử lý multi-line block scalar (| hoặc >)
-            if value in ('|', '>', '|+', '|-', '>+', '>-'):
-                multi_lines = []
-                i += 1
-                while i < len(lines):
-                    next_line = lines[i]
-                    # Dòng tiếp theo phải có indent (bắt đầu bằng space/tab)
-                    if next_line and (next_line[0] == ' ' or next_line[0] == '\t'):
-                        multi_lines.append(next_line.strip())
-                        i += 1
-                    else:
-                        break
-                value = ' '.join(multi_lines)
-            
-            frontmatter[key] = value
-        i += 1
-    
-    return frontmatter, body
-
-
-def find_sections(body):
-    """
-    Tìm tất cả heading sections (# Level 1) trong body.
-    Bỏ qua headings nằm trong fenced code blocks (``` ... ```).
-    
-    Returns:
-        dict: {section_name_lowercase: section_content}
-    """
-    sections = {}
-    current_section = None
-    current_content = []
-    in_code_block = False
-    
-    for line in body.split('\n'):
-        stripped = line.strip()
-        
-        # Phát hiện bắt đầu/kết thúc code block
-        if stripped.startswith('```'):
-            in_code_block = not in_code_block
-            current_content.append(line)
-            continue
-        
-        # Bỏ qua headings trong code block
-        if in_code_block:
-            current_content.append(line)
-            continue
-        
-        # Tìm heading level 1 (# Title)
-        heading_match = re.match(r'^#\s+(.+)$', stripped)
-        if heading_match:
-            # Lưu section trước
-            if current_section:
-                sections[current_section] = '\n'.join(current_content)
-            current_section = heading_match.group(1).strip().lower()
-            current_content = []
-        else:
-            current_content.append(line)
-    
-    # Lưu section cuối cùng
-    if current_section:
-        sections[current_section] = '\n'.join(current_content)
-    
-    return sections
-
-
-def count_examples(body):
-    """Đếm số ví dụ (heading ## Ví dụ hoặc ## Example). Bỏ qua code blocks."""
-    # Xóa nội dung trong code blocks trước khi đếm
-    clean_body = re.sub(r'```.*?```', '', body, flags=re.DOTALL)
-    pattern = r'^##\s+(?:Ví dụ|Example)\s*\d*'
-    return len(re.findall(pattern, clean_body, re.MULTILINE | re.IGNORECASE))
-
-
-def count_constraints(body):
-    """Đếm số constraint (dòng bắt đầu bằng - KHÔNG ĐƯỢC hoặc - LUÔN LUÔN)."""
-    pattern = r'^[-*]\s*(?:KHÔNG ĐƯỢC|LUÔN LUÔN|NEVER|ALWAYS|🚫|⚠️)'
-    return len(re.findall(pattern, body, re.MULTILINE | re.IGNORECASE))
-
-
-# ============================================================
-# VALIDATORS
-# ============================================================
-
-def validate_frontmatter(frontmatter):
-    """Kiểm tra YAML frontmatter."""
-    results = []
-    
-    if frontmatter is None:
-        results.append(('FAIL', 'Không tìm thấy YAML frontmatter (--- đầu và cuối)'))
-        return results, False
-    
-    results.append(('PASS', 'YAML frontmatter hợp lệ'))
-    
-    # Check description (BẮT BUỘC)
-    desc = frontmatter.get('description', '')
-    if not desc:
-        results.append(('FAIL', 'Thiếu trường `description` — Đây là phần QUAN TRỌNG NHẤT'))
-    elif len(desc) < MIN_DESCRIPTION_LENGTH:
-        results.append(('WARN', f'Description quá ngắn ({len(desc)} ký tự) — Nên ≥{MIN_DESCRIPTION_LENGTH} ký tự'))
-    elif len(desc.split()) < MIN_DESCRIPTION_WORDS:
-        results.append(('WARN', f'Description quá ít từ ({len(desc.split())} từ) — Nên ≥{MIN_DESCRIPTION_WORDS} từ'))
-    else:
-        results.append(('PASS', f'Description đầy đủ ({len(desc)} ký tự, {len(desc.split())} từ)'))
-    
-    # Check name (TÙY CHỌN)
-    name = frontmatter.get('name', '')
-    if name:
-        if ' ' in name or any(c.isupper() for c in name):
-            results.append(('WARN', f'Tên skill `{name}` nên dùng kebab-case (vd: my-skill-name)'))
-        elif len(name) > MAX_SKILL_NAME_LENGTH:
-            results.append(('WARN', f'Tên skill quá dài ({len(name)} ký tự) — Nên ≤{MAX_SKILL_NAME_LENGTH}'))
-        else:
-            results.append(('PASS', f'Tên skill: `{name}` (hợp lệ)'))
-    else:
-        results.append(('INFO', 'Không có trường `name` — AI sẽ dùng tên thư mục'))
-    
-    return results, True
-
-
-def validate_sections(sections, body):
-    """Kiểm tra các sections bắt buộc và khuyến khích."""
-    results = []
-    
-    # Check required sections
-    for section in REQUIRED_SECTIONS:
-        found = any(section in key for key in sections.keys())
-        if found:
-            results.append(('PASS', f'Có section `# {section.title()}`'))
-        else:
-            results.append(('FAIL', f'Thiếu section bắt buộc `# {section.title()}`'))
-    
-    # Check recommended sections
-    for section in RECOMMENDED_SECTIONS:
-        found = any(section in key for key in sections.keys())
-        if found:
-            results.append(('PASS', f'Có section `# {section.title()}`'))
-        else:
-            results.append(('WARN', f'Thiếu section khuyến khích `# {section.title()}`'))
-    
-    # Check examples count
-    example_count = count_examples(body)
-    if example_count >= 2:
-        results.append(('PASS', f'Có {example_count} ví dụ (đạt chuẩn ≥2)'))
-    elif example_count == 1:
-        results.append(('WARN', f'Chỉ có {example_count} ví dụ — Nên có ≥2 ví dụ để giảm hallucination'))
-    else:
-        results.append(('WARN', 'Không tìm thấy ví dụ nào — Rất khuyến khích thêm ≥2 ví dụ'))
-    
-    # Check constraints count
-    constraint_count = count_constraints(body)
-    if constraint_count >= 1:
-        results.append(('PASS', f'Có {constraint_count} constraint(s)'))
-    else:
-        results.append(('WARN', 'Không tìm thấy constraint nào — Nên có ít nhất 1 quy tắc "KHÔNG ĐƯỢC"'))
-    
-    return results
-
-
-def validate_directory(skill_dir):
-    """Kiểm tra cấu trúc thư mục skill."""
-    results = []
-    skill_path = Path(skill_dir)
-    
-    # Check SKILL.md exists
-    skill_md = skill_path / 'SKILL.md'
-    if skill_md.exists():
-        results.append(('PASS', f'File `SKILL.md` tồn tại ({skill_md.stat().st_size} bytes)'))
-    else:
-        results.append(('FAIL', 'Không tìm thấy `SKILL.md` trong thư mục'))
-        return results, None
-    
-    # Check subfolders
-    for item in skill_path.iterdir():
-        if item.is_dir():
-            folder_name = item.name
-            if folder_name in VALID_SUBFOLDERS:
-                file_count = len(list(item.rglob('*')))
-                results.append(('PASS', f'Thư mục `{folder_name}/` ({file_count} items)'))
-            elif folder_name.startswith('.'):
-                continue  # Bỏ qua hidden folders
-            else:
-                results.append(('WARN', f'Thư mục `{folder_name}/` không phải chuẩn (scripts/resources/examples)'))
-    
-    return results, skill_md
-
-
-# ============================================================
-# MAIN
-# ============================================================
-
-def validate_skill(target_path):
-    """Chạy toàn bộ kiểm tra cho skill."""
-    Colors.enable_windows()
-    
-    target = Path(target_path)
-    all_results = []
-    
-    print(f"\n{Colors.BOLD}{'='*60}{Colors.RESET}")
-    print(f"{Colors.BOLD}🔍 SKILL VALIDATOR — Kiểm tra chất lượng AI Skill{Colors.RESET}")
-    print(f"{Colors.BOLD}{'='*60}{Colors.RESET}")
-    print(f"{Colors.INFO}📁 Target: {target.absolute()}{Colors.RESET}\n")
-    
-    # ---- Phần 1: Kiểm tra thư mục (nếu là folder) ----
-    skill_md_path = None
-    
-    if target.is_dir():
-        print(f"{Colors.BOLD}📂 Kiểm tra cấu trúc thư mục:{Colors.RESET}")
-        dir_results, skill_md_path = validate_directory(target)
-        all_results.extend(dir_results)
-        for status, msg in dir_results:
-            print_result(status, msg)
-        print()
-        
-        if skill_md_path is None:
-            print(f"\n{Colors.FAIL}💀 KHÔNG THỂ TIẾP TỤC — Thiếu SKILL.md{Colors.RESET}\n")
-            return False
-    elif target.is_file() and target.name == 'SKILL.md':
-        skill_md_path = target
-    else:
-        print(f"{Colors.FAIL}❌ Target phải là thư mục skill hoặc file SKILL.md{Colors.RESET}")
-        return False
-    
-    # ---- Phần 2: Đọc và parse SKILL.md ----
-    try:
-        content = skill_md_path.read_text(encoding='utf-8')
-    except UnicodeDecodeError:
-        content = skill_md_path.read_text(encoding='utf-8', errors='ignore')
-    
-    frontmatter, body = parse_frontmatter(content)
-    sections = find_sections(body)
-    
-    # ---- Phần 3: Kiểm tra frontmatter ----
-    print(f"{Colors.BOLD}📝 Kiểm tra YAML Frontmatter:{Colors.RESET}")
-    fm_results, fm_valid = validate_frontmatter(frontmatter)
-    all_results.extend(fm_results)
-    for status, msg in fm_results:
-        print_result(status, msg)
-    print()
-    
-    # ---- Phần 4: Kiểm tra sections ----
-    print(f"{Colors.BOLD}📋 Kiểm tra nội dung Sections:{Colors.RESET}")
-    sec_results = validate_sections(sections, body)
-    all_results.extend(sec_results)
-    for status, msg in sec_results:
-        print_result(status, msg)
-    print()
-    
-    # ---- Phần 5: Thống kê ----
-    total_lines = len(content.split('\n'))
-    total_words = len(content.split())
-    
-    print(f"{Colors.BOLD}📊 Thống kê:{Colors.RESET}")
-    print_result('INFO', f'Tổng: {total_lines} dòng, {total_words} từ, {len(content)} bytes')
-    print_result('INFO', f'Sections tìm thấy: {", ".join(sections.keys()) if sections else "(không có)"}')
-    print()
-    
-    # ---- Phần 6: Tổng kết ----
-    fails = sum(1 for s, _ in all_results if s == 'FAIL')
-    warns = sum(1 for s, _ in all_results if s == 'WARN')
-    passes = sum(1 for s, _ in all_results if s == 'PASS')
-    
-    print(f"{Colors.BOLD}{'='*60}{Colors.RESET}")
-    print(f"{Colors.BOLD}📋 KẾT QUẢ:{Colors.RESET}")
-    print(f"  {Colors.PASS}✅ PASS: {passes}{Colors.RESET}")
-    print(f"  {Colors.WARN}⚠️  WARN: {warns}{Colors.RESET}")
-    print(f"  {Colors.FAIL}❌ FAIL: {fails}{Colors.RESET}")
-    
-    if fails == 0 and warns == 0:
-        print(f"\n  {Colors.PASS}{Colors.BOLD}🎉 TUYỆT VỜI! Skill đạt chuẩn hoàn hảo!{Colors.RESET}")
-        grade = 'A+'
-    elif fails == 0 and warns <= 2:
-        print(f"\n  {Colors.PASS}{Colors.BOLD}👍 TỐT! Skill hợp lệ, có thể cải thiện thêm.{Colors.RESET}")
-        grade = 'A'
-    elif fails == 0:
-        print(f"\n  {Colors.WARN}{Colors.BOLD}⚠️ ĐẠT! Nhưng nên sửa các cảnh báo.{Colors.RESET}")
-        grade = 'B'
-    elif fails <= 2:
-        print(f"\n  {Colors.FAIL}{Colors.BOLD}❌ CHƯA ĐẠT! Cần sửa {fails} lỗi.{Colors.RESET}")
-        grade = 'C'
-    else:
-        print(f"\n  {Colors.FAIL}{Colors.BOLD}💀 KHÔNG ĐẠT! Cần sửa {fails} lỗi nghiêm trọng.{Colors.RESET}")
-        grade = 'F'
-    
-    print(f"\n  {Colors.BOLD}📊 Grade: {grade}{Colors.RESET}")
-    print(f"{Colors.BOLD}{'='*60}{Colors.RESET}\n")
-    
-    return fails == 0
-
-
-if __name__ == '__main__':
-    if len(sys.argv) < 2:
-        print("Sử dụng: python validate_skill.py <path-to-SKILL.md-or-skill-folder>")
-        print("Ví dụ:   python validate_skill.py ./my-skill/")
-        print("         python validate_skill.py ./my-skill/SKILL.md")
-        sys.exit(1)
-    
-    target = sys.argv[1]
-    
-    if not os.path.exists(target):
-        print(f"❌ Không tìm thấy: {target}")
-        sys.exit(1)
-    
-    success = validate_skill(target)
-    sys.exit(0 if success else 1)

package/skills/tailwind-mastery/SKILL.md

@@ -1,229 +0,0 @@
----
-name: tailwind-mastery
-description: 'Master Tailwind CSS utilities, responsive design, and accessibility patterns. Use when the user mentions "Tailwind", "Tailwind CSS", "utility-first", "responsive design", "dark mode", "focus-visible", "motion-reduce", or "Tailwind v4". Covers utility patterns, layout, responsive design, components, accessibility, and performance. For React styling, see react-mastery. For design systems, see refactoring-ui.'
-license: MIT
-metadata:
-  author: todyle
-  version: "1.0.0"
----
-
-# Tailwind CSS Mastery Framework
-
-A comprehensive guide to building production UIs with Tailwind CSS utilities, responsive patterns, accessibility, and performance optimization. Apply these principles when styling web applications, building component libraries, implementing dark mode, or optimizing CSS output.
-
-## Core Principle
-
-**Utility-first CSS means composing designs directly in HTML with small, single-purpose classes.** Instead of writing custom CSS for every component, you combine utilities (`flex`, `items-center`, `p-4`, `text-lg`) to build designs. This eliminates naming fatigue, CSS specificity wars, and dead CSS. Every class you see describes exactly what it does.
-
-**The foundation:** Tailwind works because most CSS is repeated — the same spacing, colors, and typography patterns appear throughout an application. Utilities express these patterns directly. The build tool strips unused classes, resulting in tiny production CSS. The key is working within Tailwind's design system (spacing scale, color palette, breakpoints) rather than escaping it with arbitrary values.
-
-## Scoring
-
-**Goal: 10/10.** When reviewing Tailwind code, rate 0-10:
-
-- **9-10:** Mobile-first responsive, dark mode, focus-visible, motion-reduce, semantic color naming, consistent spacing scale
-- **7-8:** Good utility usage with minor issues (arbitrary values for scale values, missing dark mode, inconsistent spacing)
-- **5-6:** Working styles but overusing @apply, arbitrary values abundant, no responsive design
-- **3-4:** Tailwind as CSS-in-HTML (every value arbitrary), no dark mode, no accessibility
-- **1-2:** Fighting Tailwind with custom CSS, important! everywhere, no design system
-
-## The Tailwind Mastery Framework
-
-Six disciplines for production Tailwind CSS:
-
-### 1. Utility Patterns & Design System
-
-**Core concept:** Use Tailwind's design tokens (spacing scale, color palette, font sizes) instead of arbitrary values. The spacing scale (4px increments: `p-1`=4px, `p-2`=8px, `p-4`=16px) creates visual consistency. Extend the design system via `tailwind.config.js` for brand colors, not with arbitrary `[]` values.
-
-**Why it works:** Constraints breed consistency. When everyone uses `gap-4` instead of `gap-[15px]`, spacing is uniform across the entire application. The predefined scale means fewer design decisions and faster development. Custom theme values (`bg-primary`, `text-success`) encode brand semantics.
-
-**Key insights:**
-- Spacing scale: `p-1`=4px, `p-2`=8px, `p-4`=16px, `p-6`=24px, `p-8`=32px
-- Use scale values over arbitrary: `gap-6` not `gap-[23px]`
-- Color opacity: `bg-black/50` (50% opacity) instead of separate `opacity-50`
-- `space-y-4` for vertical lists — adds margin between children
-- `size-6` shorthand for equal width+height (Tailwind v4)
-- `shrink-0` shorthand (v4) instead of `flex-shrink-0`
-- Extend theme for brand colors: `bg-primary`, `text-cta`, `border-success`
-- `bg-linear-to-r` (v4) replaces `bg-gradient-to-r`
-
-**Code applications:**
-
-| Context | Pattern | Example |
-|---------|---------|---------|
-| **Spacing** | Scale values | `p-4 m-6 gap-8` |
-| **Color opacity** | Slash syntax | `bg-black/50 text-white/80` |
-| **List spacing** | space-y | `<div class="space-y-4">` |
-| **Brand color** | Theme extend | `bg-primary text-on-primary` |
-| **Square element** | size utility | `size-8` (= `h-8 w-8`) |
-| **Gradient** | bg-linear (v4) | `bg-linear-to-r from-blue-500 to-purple-500` |
-
-### 2. Layout
-
-**Core concept:** Container with `max-w-7xl mx-auto` for content width. `flex` for one-dimensional, `grid` for two-dimensional layouts. Responsive padding `px-4 md:px-6 lg:px-8`. Container queries `@container` for component-level responsiveness.
-
-**Why it works:** `max-w-7xl mx-auto` prevents content from stretching to unreadable widths on large screens. `gap-*` replaces manual margins on grid/flex children, simplifying layout code. Container queries enable components to respond to their container size rather than the viewport — essential for reusable components.
-
-**Key insights:**
-- `max-w-7xl mx-auto px-4` for main content container
-- `flex items-center justify-between` — most common header pattern
-- `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6` for responsive grid
-- `gap-*` on flex/grid containers, not margins on children
-- Responsive padding: `px-4 sm:px-6 lg:px-8`
-- `@container` + `@lg:grid-cols-2` for component-level responsive (v3.2+)
-- Negative margins sparingly: `-mt-8` for intentional overlapping effects
-
-**Code applications:**
-
-| Context | Pattern | Example |
-|---------|---------|---------|
-| **Container** | max-w + padding | `<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">` |
-| **Flex row** | items-center | `<nav class="flex items-center justify-between h-16">` |
-| **Grid** | Responsive cols | `<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">` |
-| **Container query** | @container | `<div class="@container"><div class="@lg:grid-cols-2">` |
-
-### 3. Responsive Design
-
-**Core concept:** Mobile-first — write base styles for mobile, add breakpoints for larger screens via `sm:`, `md:`, `lg:`, `xl:`, `2xl:` prefixes. Test at all breakpoints: 320, 375, 768, 1024, 1280, 1536px. Use `hidden md:block` for visibility control.
-
-**Why it works:** Mobile-first ensures the smallest, most constrained screens get attention first. Adding complexity for larger screens is natural — hiding sidebar on mobile, showing it on desktop. This approach also results in smaller CSS because mobile styles don't need breakpoint prefixes.
-
-**Key insights:**
-- Base styles = mobile. Breakpoints add desktop enhancements
-- `text-sm md:text-base lg:text-lg` — progressive text sizing
-- `hidden md:flex` — hide on mobile, show on desktop
-- `flex-col md:flex-row` — stack on mobile, row on desktop
-- Test at 320px (smallest iPhone SE) — don't ignore small screens
-- `aspect-video` with `object-cover` for responsive media
-- `srcset` with `sizes` attribute for responsive images (HTML, not Tailwind)
-
-**Code applications:**
-
-| Context | Pattern | Example |
-|---------|---------|---------|
-| **Mobile-first** | Base + breakpoint | `<h1 class="text-2xl md:text-4xl lg:text-5xl">` |
-| **Show/hide** | hidden + display | `<nav class="hidden md:flex">` (mobile menu alternative) |
-| **Stack → row** | Direction change | `<div class="flex flex-col md:flex-row gap-4">` |
-| **Responsive image** | aspect + object | `<img class="aspect-video object-cover w-full rounded-xl">` |
-| **Responsive padding** | Breakpoint padding | `<main class="px-4 sm:px-6 lg:px-8">` |
-
-### 4. Components
-
-**Core concept:** Buttons need consistent sizing (`px-4 py-2`), minimum touch targets on mobile (`min-h-[44px]`), loading states, and proper icon button labels. Cards use `rounded-lg shadow-md` with hover feedback. Forms need visible focus indicators (`focus:ring-2`), disabled states, and keyboard accessibility.
-
-**Why it works:** Consistency in component sizing creates visual rhythm. Touch targets of 44px minimum (Apple HIG standard) prevent frustrating tap misses on mobile. Focus indicators are essential for keyboard navigation and WCAG compliance. Interactive elements must provide feedback — hover, focus, active, disabled states.
-
-**Key insights:**
-- Buttons: `px-4 py-2 rounded-lg font-medium transition-colors`
-- Touch targets: `min-h-[44px] min-w-[44px]` on all interactive mobile elements
-- Loading button: `disabled + opacity-50 + spinner icon`
-- Cards: `rounded-2xl shadow-lg p-6 hover:shadow-xl transition-shadow`
-- Inputs: `h-10 w-full px-3 rounded-md border focus:ring-2 focus:ring-blue-500`
-- Disabled: `disabled:opacity-50 disabled:cursor-not-allowed`
-- Icon buttons: always include `aria-label`
-
-**Code applications:**
-
-| Context | Pattern | Example |
-|---------|---------|---------|
-| **Button** | Standard | `<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">` |
-| **Touch target** | Mobile minimum | `<button class="min-h-[44px] min-w-[44px]">` |
-| **Card** | Hover feedback | `<div class="rounded-2xl shadow-lg p-6 hover:shadow-xl transition-shadow">` |
-| **Input** | Focus ring | `<input class="h-10 px-3 rounded-md border focus:ring-2 focus:ring-blue-500">` |
-| **Disabled** | Opacity + cursor | `<button disabled class="disabled:opacity-50 disabled:cursor-not-allowed">` |
-| **Icon button** | aria-label | `<button aria-label="Close"><XIcon class="size-5"/></button>` |
-
-### 5. Accessibility
-
-**Core concept:** `sr-only` for screen reader text, `focus-visible:ring-2` for keyboard-only focus indicators, `motion-reduce:animate-none` for motion sensitivity, semantic HTML always. Accessibility is not optional — it's a legal requirement in many jurisdictions.
-
-**Why it works:** `focus-visible` shows focus rings only for keyboard users (not mouse clicks), improving both aesthetics and accessibility. `motion-reduce` respects OS-level reduced motion preferences — essential for users with vestibular disorders. `sr-only` provides context to screen readers without affecting visual design.
-
-**Key insights:**
-- `sr-only` for text visible only to screen readers
-- `focus-visible:ring-2` instead of `focus:ring-2` — keyboard-only focus
-- `motion-reduce:animate-none` respects prefers-reduced-motion
-- `motion-reduce:transition-none` for transition-heavy components
-- Never `outline-none` without a replacement focus indicator
-- Always `aria-label` on icon-only buttons
-- Dark mode: `dark:bg-gray-900 dark:text-gray-100` — ensure sufficient contrast
-- SVG explicit dimensions: `<svg class="size-6" width="24" height="24">` to prevent layout shift
-
-**Code applications:**
-
-| Context | Pattern | Example |
-|---------|---------|---------|
-| **Screen reader** | sr-only | `<span class="sr-only">Close menu</span>` |
-| **Keyboard focus** | focus-visible | `<button class="focus-visible:ring-2 focus-visible:ring-blue-500">` |
-| **Reduced motion** | motion-reduce | `<div class="animate-pulse motion-reduce:animate-none">` |
-| **Dark mode** | dark: prefix | `<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">` |
-| **Icon a11y** | aria-label | `<button aria-label="Delete item"><TrashIcon class="size-5"/></button>` |
-| **SVG dims** | Explicit w/h | `<svg class="size-6" width="24" height="24">` |
-
-### 6. Performance & Configuration
-
-**Core concept:** Configure `content` paths correctly so Tailwind can tree-shake unused classes. Avoid overusing `@apply` — it defeats the purpose of utility-first CSS. Use JIT mode (default in v3+) for development performance. Custom utilities in theme config for repeated one-off values.
-
-**Why it works:** Tailwind's production CSS is tiny because it only includes classes actually used in your source files. Incorrect `content` configuration results in either missing styles (too narrow) or bloated CSS (too broad). `@apply` creates abstraction layers that Tailwind's utility-first approach was designed to eliminate.
-
-**Key insights:**
-- `content: ['./src/**/*.{js,ts,jsx,tsx}']` — must cover all template files
-- `@apply` sparingly — prefer direct utilities in HTML/JSX
-- Custom utilities in `tailwind.config.js` for repeated arbitrary values
-- `@tailwindcss/forms` for consistent form element reset
-- `@tailwindcss/typography` (`prose`) for markdown/CMS content
-- Group and Peer for parent/sibling state: `group-hover:text-blue-500`
-- `peer-checked:bg-blue-100` for checkbox/radio state styling
-
-**Code applications:**
-
-| Context | Pattern | Example |
-|---------|---------|---------|
-| **Content config** | Glob patterns | `content: ['./src/**/*.{js,ts,jsx,tsx,html}']` |
-| **Custom utility** | Theme extend | `extend: { boxShadow: { card: '0 4px 20px rgba(0,0,0,.08)' } }` |
-| **Plugin** | Official | `plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')]` |
-| **Group hover** | Parent state | `<div class="group"><span class="group-hover:text-blue-500">` |
-| **Peer** | Sibling state | `<input class="peer"><label class="peer-checked:font-bold">` |
-| **Prose** | Typography | `<article class="prose prose-lg max-w-none dark:prose-invert">` |
-
-## Common Mistakes
-
-| Mistake | Why It Fails | Fix |
-|---------|-------------|-----|
-| **Arbitrary values for scale values** | Inconsistent spacing/sizing | Use `p-4` not `p-[15px]` |
-| **Heavy @apply usage** | Creates CSS abstractions that defeat utility-first | Use utilities directly in HTML |
-| **No dark mode** | Poor UX in low-light, not respecting OS preference | Add `dark:` variants |
-| **outline-none without replacement** | Keyboard users can't see focus | `focus-visible:ring-2` |
-| **No motion-reduce** | Harms vestibular disorder users | `motion-reduce:animate-none` |
-| **Small touch targets** | Frustrating mobile experience | `min-h-[44px]` minimum |
-| **Missing content paths** | Styles missing in production | Verify all template file paths |
-| **Desktop-first approach** | Complex mobile overrides | Start with mobile, add `md:` `lg:` |
-| **bg-gradient-to in v4** | Deprecated syntax | Use `bg-linear-to-r` in Tailwind v4 |
-| **SVGs without explicit dimensions** | Layout shift before CSS loads | Add `width` and `height` attributes |
-
-## Quick Diagnostic
-
-| Question | If No | Action |
-|----------|-------|--------|
-| Using Tailwind's spacing scale? | Inconsistent spacing | Replace arbitrary values with scale tokens |
-| Mobile-first responsive? | Complex overrides | Start with mobile base, add breakpoints |
-| Dark mode implemented? | Missing OS preference respect | Add `dark:` variants for all colors |
-| Focus indicators visible? | Keyboard a11y broken | Add `focus-visible:ring-2` |
-| Motion preferences respected? | A11y violation | Add `motion-reduce:` variants |
-| Touch targets ≥44px? | Mobile tap frustration | Add `min-h-[44px]` |
-| Content paths correct? | Missing production styles | Audit tailwind.config.js content |
-| Using semantic colors? | Hard to rebrand | Move to `bg-primary` theme tokens |
-| Icon buttons labeled? | Screen reader fails | Add `aria-label` to all icon buttons |
-| SVGs have explicit dimensions? | Layout shift | Add `width` and `height` attributes |
-
-## Further Reading
-
-- [Tailwind CSS Documentation](https://tailwindcss.com/docs) — Official reference
-- [Tailwind CSS v4 Migration](https://tailwindcss.com/docs/upgrade-guide) — v3 to v4 changes
-- [Refactoring UI](https://www.refactoringui.com/) — Design principles from Tailwind creators
-- [@tailwindcss/typography](https://tailwindcss.com/docs/typography-plugin) — Prose styling
-- [Heroicons](https://heroicons.com/) — SVG icons from Tailwind Labs
-
-## About
-
-This skill synthesizes patterns from Adam Wathan (Tailwind creator), Steve Schoger (Refactoring UI), and the Tailwind CSS community. For visual design principles, see refactoring-ui. For top-tier web design, see top-design. For React integration, see react-mastery.