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

# 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

# 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

/* BAD */
background: #f0f0f0;
color: #ffffff; /* Contrast too low */

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

2. Opacity Values

/* BAD */
color: rgba(255, 255, 255, 0.7); /* Too transparent */

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

3. Links on Colored Backgrounds

/* 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

/* 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

# 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