SuperCharged-Claude-Code-Upgrade/.ralph/PROMPT.md

# Task: Fix ALL Color Contrast Issues on WordPress Blog Post with UX Expertise

## Context

User reports there are STILL contrast issues on the WordPress blog post:
https://www.rommark.dev/blog/2026/01/15/ultimate-claude-code-glm-suite-40-agents-mcp-tools-complete-automation/

Previous attempt fixed some issues but user says "still contrasting issue" - meaning there are MORE problems that weren't caught.

### What Was Fixed Previously

1. `.claude-hero p` - Changed opacity to explicit white
2. `.claude-badge` - Added explicit white color
3. `.claude-stat-number` - Added explicit white color
4. `.claude-stat-label` - Changed opacity to explicit white
5. `.final-cta p` - Added !important flags

### Issues That May Remain

- Inline styles in HTML content that override CSS
- Other elements with opacity values not caught
- Gradient backgrounds with poor text contrast
- Link colors on colored backgrounds
- Code blocks with poor contrast
- Button hover states
- Mobile responsive styles
- Elements not covered by the existing CSS

## Your Role

You are a **UX Design Specialist** who will:
1. **Analyze the entire page** for ALL contrast issues
2. **Use UX expertise** to identify elements humans would miss
3. **Test every text element** against its background
4. **Fix both CSS AND HTML** (inline styles)
5. **Verify live on the site** after fixes
6. **Use WCAG AA standards** (4.5:1 for normal text, 3:1 for large text)

## Success Criteria

The task is complete when:
- [ ] ALL text elements meet WCAG AA contrast standards
- [ ] No inline opacity styles remain in HTML
- [ ] All gradients have sufficient contrast with text
- [ ] Links are readable on all backgrounds
- [ ] Buttons have proper contrast in all states
- [ ] Mobile responsive styles have proper contrast
- [ ] User confirms no more contrast issues
- [ ] Changes verified live on the website

## Investigation Process

### Step 1: Fetch Live Page Content

```bash
# Get the full HTML of the live page
curl -s "https://www.rommark.dev/blog/2026/01/15/ultimate-claude-code-glm-suite-40-agents-mcp-tools-complete-automation/" > /tmp/live_page.html

# Search for ALL inline styles with opacity/color
grep -o 'style="[^"]*opacity[^"]*"' /tmp/live_page.html
grep -o 'style="[^"]*color[^"]*"' /tmp/live_page.html
```

### Step 2: Analyze CSS File

```bash
# Current styles location
CSS_FILE="/var/www/blog/wp-content/themes/rommark-v2/post-19-styles.php"

# Find ALL color/opacity declarations
grep -n "color:\|opacity:" $CSS_FILE

# Find ALL background declarations
grep -n "background:" $CSS_FILE
```

### Step 3: Use UX/Design Agent for Analysis

Use the Task tool with `ui-ux-pro-max` agent to:
1. Analyze the page visually
2. Identify ALL contrast issues
3. Suggest proper color combinations
4. Ensure accessibility compliance

### Step 4: Fix Issues Systematically

For each contrast issue:
1. Identify the element
2. Calculate contrast ratio
3. Fix in CSS file (or HTML if inline)
4. Test on live site
5. Move to next issue

## Common Contrast Issues to Check

### 1. White/Light Text on Light Backgrounds
```css
/* BAD */
background: #f0f0f0;
color: #ffffff; /* Contrast too low */

/* GOOD */
background: #1a1a1a;
color: #ffffff; /* High contrast */
```

### 2. Opacity Values
```css
/* BAD */
color: rgba(255, 255, 255, 0.7); /* Too transparent */

/* GOOD */
color: #ffffff; /* Full opacity */
```

### 3. Links on Colored Backgrounds
```css
/* BAD */
background: linear-gradient(#667eea, #764ba2);
color: white;
a { color: #a78bfa; /* Too light on purple */ }

/* GOOD */
background: linear-gradient(#667eea, #764ba2);
color: white;
a { color: #ffffff; font-weight: 700; text-decoration: underline; }
```

### 4. Code Blocks
```css
/* BAD */
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);

/* GOOD */
background: rgba(0, 0, 0, 0.3);
color: #ffffff;
```

## Commands You Can Use

```bash
# Get WordPress post content via PHP
php -r "
require_once '/var/www/blog/wp-load.php';
\$post = get_post(19);
echo \$post->post_content;
" > /tmp/post_content.html

# Update WordPress post via PHP
php -r "
require_once '/var/www/blog/wp-load.php';
\$post = array(
    'ID' => 19,
    'post_content' => file_get_contents('/tmp/fixed_content.html')
);
wp_update_post(\$post);
"

# Edit CSS file with sudo
sudo nano /var/www/blog/wp-content/themes/rommark-v2/post-19-styles.php

# Verify changes are live
curl -s "https://www.rommark.dev/blog/2026/01/15/ultimate-claude-code-glm-suite-40-agents-mcp-tools-complete-automation/" | grep -A5 "element-in-question"
```

## WordPress Credentials

- URL: https://www.rommark.dev/blog/
- Path: /var/www/blog/
- Post ID: 19
- CSS: /var/www/blog/wp-content/themes/rommark-v2/post-19-styles.php
- Backup exists at: /var/www/blog/wp-content/themes/rommark-v2/post-19-styles.php.backup

## Instructions for YOU

1. **Start by fetching live page** - see what's actually rendered
2. **Use ui-ux-pro-max agent** - get expert analysis
3. **Find ALL contrast issues** - not just the obvious ones
4. **Fix CSS first** - update the stylesheet
5. **Fix HTML inline styles** - update post content if needed
6. **Verify live on site** - check actual rendered page
7. **Ask user to confirm** - they have final say
8. **Repeat until satisfied** - don't stop until user says it's good

## Important Notes

- **Previous fix was incomplete** - user says issues remain
- **Look EVERYWHERE** - inline styles, responsive breakpoints, hover states
- **Use UX agent** - don't rely on manual inspection alone
- **Test with tools** - use contrast checker if available
- **Background gradients** - check text against ALL gradient colors
- **Mobile views** - responsive styles may have different colors

## User Communication

Be thorough and systematic:
- "I'm analyzing the entire page for ALL contrast issues..."
- "Found X more elements with poor contrast..."
- "Using UX agent to verify all color combinations..."
- "Fixed issue with [element], testing live now..."
- "Please verify the changes at [URL]..."

Don't ask "is it good?" - be proactive and find issues yourself.

---

## Completion

When ALL contrast issues are fixed and user confirms no more problems:
- Document all changes made
- Create summary of elements fixed
- Mark task complete

<!-- Ralph will continue iterating until task is complete -->