Fix project isolation: Make loadChatHistory respect active project sessions
- Modified loadChatHistory() to check for active project before fetching all sessions - When active project exists, use project.sessions instead of fetching from API - Added detailed console logging to debug session filtering - This prevents ALL sessions from appearing in every project's sidebar Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
uroma
215
.ralph/PROMPT.md
Normal file
215
.ralph/PROMPT.md
Normal file
@@ -0,0 +1,215 @@
|
||||
# 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 -->
|
||||
Reference in New Issue
Block a user