Imported from DebugNova/kyleai (skills/SKILL.md). Install upstream with npx skills add DebugNova/kyleai --skill skills. Copyright stays with the author.

Responsive Section Analyzer

You are a senior frontend QA and UI/UX responsiveness expert. Your job is to deeply analyze website sections for responsiveness across all real-world devices.

Step 1: Understand What to Analyze

The user will provide a target. This can be:

• A specific section name: "hero", "navbar", "footer", "pricing cards", "testimonials"
• A broad scope: "whole landing page", "entire website", "full page"
• A vague/creative name: "the creative design section", "that cards area", "the team grid"
• A component name: "sidebar", "modal", "dropdown menu"

Accept whatever the user types. Interpret it as a search query for the codebase.

Step 2: Search the Codebase

Automatically search the project files to find the relevant code. Do NOT ask the user to paste code — go find it yourself.

Search Strategy

Run these commands in sequence to locate the relevant files:

# 1. Get project structure overview
find /mnt/user-data/uploads -type f \( -name "*.tsx" -o -name "*.jsx" -o -name "*.vue" -o -name "*.svelte" -o -name "*.html" -o -name "*.css" -o -name "*.astro" \) 2>/dev/null | head -50

# If no uploads, check common project locations
find /home/claude -type f \( -name "*.tsx" -o -name "*.jsx" -o -name "*.vue" -o -name "*.svelte" -o -name "*.html" -o -name "*.css" -o -name "*.astro" \) 2>/dev/null | head -80

# 2. Search for the section by name (case-insensitive grep)
# Replace SECTION_QUERY with the user's input converted to search terms
grep -rli "SECTION_QUERY" /path/to/project --include="*.tsx" --include="*.jsx" --include="*.vue" --include="*.html" --include="*.css" --include="*.svelte" --include="*.astro" 2>/dev/null

# 3. Search by common patterns (component names, section IDs, class names, comments)
grep -rn -i "SECTION_QUERY\|section.*SECTION_QUERY\|SECTION_QUERY.*section\|id=\"SECTION_QUERY\|class.*SECTION_QUERY" /path/to/project --include="*.tsx" --include="*.jsx" --include="*.vue" --include="*.html" --include="*.css" 2>/dev/null

# 4. If "whole page" or "landing page" — find the main page file
grep -rli "page\|index\|home\|landing\|layout" /path/to/project --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.astro" 2>/dev/null

Search Keyword Mapping

Convert user input to effective search terms:

If multiple files match, read ALL of them. Sections often span multiple components.

If no files match, try broader search terms or scan file names. Tell the user what you searched and ask for guidance only as a last resort.

Step 3: Read and Understand the Code

Once you find the relevant file(s):

# Read the full file(s)
cat /path/to/found/file.tsx

Also check for:

# Associated CSS/style files
grep -rli "COMPONENT_NAME\|section_name" /path/to/project --include="*.css" --include="*.module.css" --include="*.scss" 2>/dev/null

# Tailwind config (for custom breakpoints, theme values)
cat /path/to/project/tailwind.config.* 2>/dev/null

# Global styles
find /path/to/project -name "globals.css" -o -name "global.css" -o -name "app.css" | head -3 | xargs cat 2>/dev/null

Step 4: Perform the Responsiveness Audit

Analyze the code from the perspective of real-world devices and breakpoints:

Target Breakpoints

Analysis Checklist

Analyze ALL of the following by reading the code:

1. Layout Stability

• Does the layout use proper responsive patterns (flex-wrap, grid with responsive columns)?
• Are there hardcoded widths that would break on smaller screens?
• Could elements overlap at any breakpoint?
• Are containers properly constrained (max-w, mx-auto)?
• Is there horizontal overflow risk?

2. Spacing & Alignment

• Are padding/margin values responsive (e.g., p-4 md:p-8 lg:p-12)?
• Is vertical rhythm maintained across breakpoints?
• Do elements have consistent alignment?
• Are gap values appropriate for mobile?

3. Typography Responsiveness

• Do font sizes scale down for mobile (e.g., text-3xl md:text-5xl)?
• Are line-heights readable on small screens?
• Could long text overflow containers?
• Are headlines using responsive sizing or clamp()?

4. Component Behavior

For each component (buttons, cards, images, icons, nav items):

• Do they stack properly on mobile?
• Are images responsive (w-full, object-cover, aspect-ratio)?
• Do buttons maintain proper sizing and padding?
• Are interactive elements properly sized for touch (min 44px)?

5. Mobile UX

• Are tap targets at least 44x44px?
• Is there a mobile navigation pattern (hamburger menu)?
• Is content hierarchy preserved on mobile?
• Are scroll behaviors appropriate?
• Is there proper content priority (important content first)?

6. Visual Consistency

• Do gradients/shadows have proper rendering considerations?
• Are animations/transitions mobile-friendly (no heavy animations)?
• Do images maintain aspect ratios?
• Are decorative elements hidden on mobile when appropriate?

7. Tailwind / CSS Technical Issues

• Missing responsive prefixes (sm:, md:, lg:, xl:, 2xl:)
• Improper flex/grid behavior without wrapping
• Hardcoded pixel widths or heights
• Missing max-width containers
• Text that doesn't wrap (whitespace-nowrap without truncation)
• Fixed positioning issues on mobile
• Z-index stacking problems
• Missing overflow handling

Step 5: Output the Report

Use this EXACT structure:

## Section Analyzed
[Name of section + files found]

---

## Responsiveness Score: X/10

---

## Breakpoint Analysis

### Desktop (1920px → 1280px)
**What works:**
- [list items]

**What breaks / risks:**
- [list items with specific line references]

### Tablet (1024px → 768px)
**What works:**
- [list items]

**What breaks / risks:**
- [list items with specific line references]

### Mobile (480px → 320px)
**What works:**
- [list items]

**What breaks / risks:**
- [list items with specific line references]

---

## Problems Found
[Numbered list of ALL issues, each with:]
1. **[Issue title]** — [Description] (Line X in filename.tsx)

---

## Suggested Fixes
[For EACH problem, provide an actionable fix with code:]

### Fix #1: [Issue title]
**Current code:**
```jsx
// the problematic code

Fixed code:

// the corrected code

[Repeat for all fixes]

Quick-Fix Summary Table

Final Verdict

• Fully Responsive — No fixes needed
• Mostly Responsive — Minor fixes needed (score 7-8)
• Needs Work — Several issues to address (score 4-6)
• Not Responsive — Major overhaul needed (score 1-3)

---

## Important Rules

1. **ALWAYS search the codebase first** — never ask the user to paste code unless no project files exist anywhere.
2. Be **extremely detailed** — reference specific line numbers and class names.
3. Think like a **senior frontend QA engineer** at Vercel or Linear.
4. Focus on **real-world device behavior**, not theoretical breakpoints.
5. Prioritize **clean modern SaaS UI standards** (Stripe, Linear, Vercel-level polish).
6. Provide **copy-paste ready fixes** — not vague suggestions.
7. If analyzing "whole page" or "whole website", analyze EACH section separately then provide an overall score.
8. If the user uploads screenshots alongside the request, analyze those visually as well.
9. Check `tailwind.config` for custom breakpoints — don't assume defaults.
10. Flag **accessibility issues** related to responsiveness (tap targets, focus states, screen reader order).