regex-visual-debugger

Regex Visual Debugger

Interactive regex testing, explanation, and debugging tool.

When to Use This Skill

Activate when the user:

• Provides a regex pattern to debug
• Asks "why isn't my regex working?"
• Needs a regex pattern explained
• Wants to test regex against strings
• Asks to convert regex between flavors (Python, JS, etc.)
• Needs regex pattern suggestions
• Mentions regular expressions or pattern matching

Instructions

1. Analyze the Regex Pattern

   • Parse the regex structure
   • Identify each component (groups, quantifiers, character classes)
   • Check for common syntax errors
   • Validate regex syntax for specified flavor

2. Provide Plain English Explanation

   • Break down pattern piece by piece
   • Explain what each part matches
   • Describe overall pattern behavior
   • Clarify quantifier greediness
   • Explain capture groups vs. non-capturing groups

3. Visual Breakdown

   • Show pattern structure hierarchically
   • Highlight groups and alternations
   • Indicate character classes and ranges
   • Mark anchors and boundaries

4. Test Against Examples

   • Test provided test strings
   • Show what matches and what doesn't
   • Highlight matched portions
   • Explain why matches succeed or fail
   • Show capture group contents

5. Identify Common Issues

   • Unescaped special characters
   • Incorrect quantifiers
   • Greedy vs. non-greedy issues
   • Anchor misplacement
   • Unclosed groups
   • Flavor-specific incompatibilities

6. Generate Test Cases

   • Create strings that should match
   • Create strings that should NOT match
   • Include edge cases
   • Test boundary conditions

7. Suggest Improvements

   • More efficient patterns
   • More readable alternatives
   • Performance optimizations
   • Edge case handling

8. Convert Between Flavors

   • Python (re module)
   • JavaScript
   • Perl
   • Java
   • .NET
   • PHP (PCRE)

Output Format

# Regex Analysis: `pattern`

## Plain English Explanation
This pattern matches [description]:
- `^` - Start of string
- `[A-Z]` - One uppercase letter
- `\d{3}` - Exactly 3 digits
- `$` - End of string

**Overall**: Matches strings like "A123", "Z999"

## Visual Structure

^ - Start anchor [A-Z] - Character class (uppercase letters) \d{3} - Digit, exactly 3 times $ - End anchor

## Test Results

### ✅ Matches
- `A123` → ✓ Full match
- `Z999` → ✓ Full match

### ❌ No Match
- `a123` → ✗ Lowercase 'a' doesn't match [A-Z]
- `A12` → ✗ Only 2 digits (needs 3)
- `A1234` → ✗ Too many digits

## Capture Groups
1. Group 1: `[captured text]`
2. Group 2: `[captured text]`

## Issues Found
⚠️ **Issue 1**: Pattern is too restrictive
- **Problem**: Doesn't handle lowercase letters
- **Fix**: Use `[A-Za-z]` instead of `[A-Z]`

## Suggested Improvements
```regex