Fix README and add missing skills

- Fixed missing command names in README (Prometheus 6 commands, Dexto 12 commands) - Fixed hooks section with all 14 hook names listed - Added bw-article-designer skill (article styling with black/white theme) - Added ralph-system-prompts skill collection (101 system prompts from system_prompts_leaks) - Updated skill count from 291 to 359 - Updated badges and documentation Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-28 08:37:14 +00:00
parent cbf272c9b5
commit f8e39059d0
103 changed files with 30548 additions and 28 deletions
--- a/skills/bw-article-designer/prompts.md
+++ b/skills/bw-article-designer/prompts.md
@@ -0,0 +1,102 @@
+# System Prompt
+
+You are an expert article designer specializing in clean, professional black/white themed articles with WCAG AAA accessibility compliance.
+
+## Your Capabilities
+
+- Apply professional black/white styling to articles
+- Fix contrast and readability issues
+- Create responsive, accessible article layouts
+- Work with WordPress posts and HTML content
+- Ensure all color combinations meet WCAG AAA standards (7:1+ contrast)
+
+## Color Philosophy
+
+You use a minimalist black/white palette with strategic accent colors:
+
+- **Black backgrounds** (#000000) for hero sections and CTAs → **White text** (#ffffff)
+- **White backgrounds** (#ffffff) for cards and content → **Dark text** (#1a1a1a, #333333)
+- **Light gray backgrounds** (#fafafa) for sections → **Dark text** (#1a1a1a)
+- **Dark purple** (#5b21b6) for stat numbers and accents on white
+
+## When User Invokes This Skill
+
+1. **Understand the context:**
+   - What platform? (WordPress, HTML, other CMS)
+   - What needs styling? (new article, existing article, fix issues)
+   - What's the current state? (no styling, broken styling, needs improvement)
+
+2. **Gather requirements:**
+   - Article URL or content
+   - Access credentials if needed (SSH, WordPress admin)
+   - Specific issues to address
+
+3. **Apply the styling:**
+   - Use the CSS template from skill.md
+   - Ensure proper `<style>` tag wrapping
+   - Apply appropriate CSS classes to HTML structure
+   - Verify contrast ratios meet WCAG AAA
+
+4. **Common fixes:**
+   - Add `.daw-stat-card .daw-stat-number { color: #5b21b6 !important; }` for visible stat numbers
+   - Ensure all text on dark backgrounds is white (#ffffff)
+   - Ensure all text on light backgrounds is dark (#1a1a1a, #333333)
+   - Add `!important` declarations when WordPress theme overrides
+
+5. **Verify results:**
+   - Check live article URL
+   - Verify all text is visible
+   - Test responsive behavior
+   - Confirm no CSS showing as raw text
+
+## Important Rules
+
+1. **NEVER remove content** - only add/improve styling
+2. **ALWAYS wrap CSS in `<style>` tags** for WordPress
+3. **Preserve all existing content** when fixing issues
+4. **Use proper SQL escaping** when updating database directly
+5. **Backup before making changes** to WordPress posts
+6. **Test accessibility** - ensure minimum 4.5:1 contrast (prefer 7:1+)
+
+## Quick Reference
+
+### For WordPress with SSH Access:
+```bash
+# Create MySQL config
+cat > /tmp/mysql.cnf << EOF
+[client]
+user=wpuser
+password="password"
+database=wordpress
+EOF
+
+# Update post
+mysql --defaults-file=/tmp/mysql.cnf -e "UPDATE wp_posts SET post_content='<style>CSS</style>HTML' WHERE ID=N"
+```
+
+### Key CSS Classes:
+- `.daw-hero` - Hero with black bg, white text
+- `.daw-stat-card` - White stat cards
+- `.daw-card` - Content cards
+- `.daw-section` - Sections with light gray bg
+- `.daw-cta` - Call to action with black bg
+- `.daw-code` - Code blocks with dark bg
+
+### Critical Overrides:
+```css
+/* Stat card numbers - VISIBLE on white */
+.daw-stat-card .daw-stat-number {
+    color: #5b21b6 !important;
+}
+```
+
+## Output Style
+
+Be concise and direct. Show results clearly with:
+
+- What was changed
+- Why it was changed
+- Verification that it works
+- URL to view results
+
+Focus on **results**, not explanations.
--- a/skills/bw-article-designer/skill.md
+++ b/skills/bw-article-designer/skill.md
@@ -0,0 +1,781 @@
+# Black & White Article Designer
+
+Professional article styling with clean black/white theme and WCAG AAA compliant contrast ratios.
+
+## When to Use
+
+Use this skill when:
+- Creating or styling WordPress articles with professional appearance
+- Fixing contrast and readability issues on blog posts
+- Applying consistent dark/white theme to article content
+- Need high-contrast, accessible article design
+
+## Color Scheme
+
+### Backgrounds
+- **Black**: `#000000` - Hero sections, CTAs
+- **White**: `#ffffff` - Cards, features, main content
+- **Light Gray**: `#fafafa` - Section backgrounds
+
+### Text Colors
+- **White**: `#ffffff` - On dark backgrounds
+- **Very Dark Gray**: `#1a1a1a` - Headings on light backgrounds
+- **Medium-Dark Gray**: `#333333` - Body text on light backgrounds
+- **Dark Purple**: `#5b21b6` - Stat numbers, accent elements
+
+## CSS Template
+
+```css
+<style>
+/* ===== CLEAN BLACK/WHITE THEME ===== */
+
+/* Base Colors */
+:root {
+    --color-black: #000000;
+    --color-white: #ffffff;
+    --color-gray-50: #fafafa;
+    --color-gray-100: #f5f5f5;
+    --color-gray-200: #e5e5e5;
+    --color-gray-300: #d4d4d4;
+    --color-gray-800: #262626;
+    --color-text-dark: #1a1a1a;
+    --color-text-medium: #333333;
+    --color-text-light: #666666;
+    --color-accent: #5b21b6;
+}
+
+/* Hero Section - BLACK BG, WHITE TEXT */
+.daw-hero {
+    background: #000000 !important;
+    color: #ffffff !important;
+    padding: 4rem 2rem;
+    border-radius: 1rem;
+    margin: 2rem 0;
+    border: 1px solid #333333;
+    text-align: center;
+}
+
+.daw-hero h1,
+.daw-hero h2,
+.daw-hero h3,
+.daw-hero h4,
+.daw-hero p,
+.daw-hero span,
+.daw-hero strong,
+.daw-hero li,
+.daw-hero a {
+    color: #ffffff !important;
+}
+
+/* Badge */
+.daw-badge {
+    background: rgba(255, 255, 255, 0.15) !important;
+    color: #ffffff !important;
+    padding: 0.5rem 1.5rem;
+    border-radius: 9999px;
+    font-weight: 700;
+    display: inline-block;
+    margin-bottom: 1.5rem;
+}
+
+/* Stats Grid */
+.daw-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1.5rem;
+    margin-top: 2rem;
+}
+
+.daw-stat-card {
+    background: #ffffff !important;
+    padding: 2rem;
+    border-radius: 0.75rem;
+    text-align: center;
+    border: 2px solid #e5e5e5 !important;
+}
+
+.daw-stat-number {
+    font-size: 3rem;
+    font-weight: 800;
+    color: #000000 !important;
+}
+
+.daw-stat-label {
+    color: #666666 !important;
+    font-weight: 500;
+    margin-top: 0.5rem;
+}
+
+/* Hero stat cards override - dark purple numbers */
+.daw-stat-card .daw-stat-number {
+    color: #5b21b6 !important;
+}
+
+.daw-stat-card .daw-stat-label {
+    color: #333333 !important;
+}
+
+/* Feature Boxes - WHITE BG, DARK TEXT */
+.daw-feature {
+    background: #ffffff !important;
+    color: #1a1a1a !important;
+    border: 1px solid #e5e5e5;
+    border-left: 4px solid #000000;
+    padding: 2rem;
+    border-radius: 0.5rem;
+    margin: 1.5rem 0;
+}
+
+.daw-feature h2,
+.daw-feature h4 {
+    color: #1a1a1a !important;
+    margin: 0 0 1rem 0;
+}
+
+.daw-feature p,
+.daw-feature li {
+    color: #333333 !important;
+    margin: 0;
+    line-height: 1.6;
+}
+
+.daw-feature strong {
+    color: #1a1a1a !important;
+}
+
+/* Cards - WHITE BG, DARK TEXT */
+.daw-card {
+    background: #ffffff !important;
+    color: #1a1a1a !important;
+    border: 2px solid #e5e5e5;
+    border-radius: 0.75rem;
+    padding: 1.5rem;
+    transition: all 0.3s;
+}
+
+.daw-card:hover {
+    border-color: #000000;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    transform: translateY(-2px);
+}
+
+.daw-card h4 {
+    color: #1a1a1a !important;
+    font-weight: 700;
+    margin-bottom: 0.75rem;
+    font-size: 1.25rem;
+}
+
+.daw-card p {
+    color: #333333 !important;
+    margin: 0.5rem 0;
+    line-height: 1.6;
+}
+
+/* Section - LIGHT GRAY BG, DARK TEXT */
+.daw-section {
+    background: #fafafa !important;
+    color: #1a1a1a !important;
+    padding: 3rem 2rem;
+    border-radius: 1rem;
+    margin: 3rem 0;
+    border: 1px solid #e5e5e5;
+}
+
+.daw-section h2,
+.daw-section h3,
+.daw-section h4 {
+    color: #1a1a1a !important;
+    margin: 0 0 1rem 0;
+}
+
+.daw-section p {
+    color: #333333 !important;
+    margin: 0.5rem 0;
+    line-height: 1.6;
+}
+
+/* CTA Section - BLACK BG, WHITE TEXT */
+.daw-cta {
+    background: #000000 !important;
+    color: #ffffff !important;
+    padding: 4rem 2rem;
+    border-radius: 1rem;
+    text-align: center;
+    margin: 4rem 0;
+    border: 2px solid #000000;
+}
+
+.daw-cta h1,
+.daw-cta h2,
+.daw-cta h3,
+.daw-cta h4,
+.daw-cta p,
+.daw-cta span,
+.daw-cta strong,
+.daw-cta em,
+.daw-cta li,
+.daw-cta a,
+.daw-cta div {
+    color: #ffffff !important;
+}
+
+/* Buttons */
+.daw-btn-primary {
+    display: inline-block;
+    padding: 1rem 2.5rem;
+    background: #ffffff !important;
+    color: #1a1a1a !important;
+    text-decoration: none;
+    border-radius: 0.5rem;
+    font-weight: 700;
+    transition: all 0.3s;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+    margin: 0.5rem;
+}
+
+.daw-btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+}
+
+.daw-btn-secondary {
+    display: inline-block;
+    padding: 1rem 2.5rem;
+    background: transparent !important;
+    color: #ffffff !important;
+    text-decoration: none;
+    border: 2px solid #ffffff;
+    border-radius: 0.5rem;
+    font-weight: 700;
+    transition: all 0.3s;
+    margin: 0.5rem;
+}
+
+.daw-btn-secondary:hover {
+    background: #ffffff !important;
+    color: #1a1a1a !important;
+}
+
+/* Code Blocks */
+.daw-code {
+    background: #1a1a1a !important;
+    color: #ffffff !important;
+    padding: 1.5rem;
+    border-radius: 0.5rem;
+    font-family: 'Monaco', 'Consolas', monospace;
+    font-size: 0.875rem;
+    overflow-x: auto;
+    border: 1px solid #333333;
+    margin: 1rem 0;
+    line-height: 1.6;
+}
+
+.daw-code code {
+    color: #ffffff !important;
+}
+
+/* Inline Code */
+code {
+    background: #1a1a1a !important;
+    color: #ffffff !important;
+    padding: 0.2rem 0.5rem;
+    border-radius: 0.25rem;
+    font-family: 'Monaco', 'Consolas', monospace;
+    font-size: 0.875em;
+}
+
+/* Context-specific inline code */
+.daw-card code,
+.daw-feature code,
+.daw-section code {
+    background: #000000 !important;
+    color: #ffffff !important;
+}
+
+.daw-hero code,
+.daw-cta code {
+    background: rgba(255, 255, 255, 0.2) !important;
+    color: #ffffff !important;
+}
+
+/* Compare Boxes */
+.daw-compare {
+    padding: 2rem;
+    border-radius: 1rem;
+    border: 1px solid #e5e5e5;
+    background: #ffffff !important;
+    color: #1a1a1a !important;
+    text-align: center;
+}
+
+.daw-compare h3 {
+    color: #1a1a1a !important;
+    margin: 0 0 1rem 0;
+}
+
+.daw-compare p {
+    color: #333333 !important;
+    margin: 0.5rem 0;
+    line-height: 1.6;
+}
+
+.daw-compare strong {
+    color: #1a1a1a !important;
+}
+
+/* Lists */
+.daw-list {
+    list-style: none;
+    padding: 0;
+    margin: 1rem 0;
+}
+
+.daw-list li {
+    color: #333333 !important;
+    padding: 0.75rem 0;
+    border-bottom: 1px solid #e5e5e5;
+    line-height: 1.6;
+}
+
+.daw-list li:last-child {
+    border-bottom: none;
+}
+
+.daw-list strong {
+    color: #1a1a1a !important;
+}
+
+/* Links */
+.daw-link {
+    color: #1a1a1a !important;
+    text-decoration: underline;
+    transition: color 0.2s;
+    font-weight: 500;
+}
+
+.daw-link:hover {
+    color: #333333 !important;
+}
+
+/* Grid Layout */
+.daw-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 1.5rem;
+    margin: 2rem 0;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .daw-stats {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 1rem;
+    }
+    .daw-grid {
+        grid-template-columns: 1fr;
+    }
+    .daw-hero {
+        padding: 2rem 1rem;
+    }
+    .daw-section {
+        padding: 2rem 1rem;
+    }
+    .daw-cta {
+        padding: 2rem 1rem;
+    }
+    .daw-hero h1 {
+        font-size: 1.75rem;
+    }
+    .daw-stat-number {
+        font-size: 2rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .daw-stats {
+        grid-template-columns: 1fr;
+    }
+}
+</style>
+```
+
+## HTML Structure Template
+
+```html
+<!-- Hero Section -->
+<div class="daw-hero">
+    <div class="daw-badge">✨ Badge Text</div>
+    <h1>Article Title</h1>
+    <p>Article subtitle or description...</p>
+
+    <div class="daw-stats">
+        <div class="daw-stat-card">
+            <div class="daw-stat-number">281</div>
+            <div class="daw-stat-label">Custom Skills</div>
+        </div>
+        <div class="daw-stat-card">
+            <div class="daw-stat-number">43</div>
+            <div class="daw-stat-label">AI Agents</div>
+        </div>
+    </div>
+</div>
+
+<!-- Feature Box -->
+<div class="daw-feature">
+    <h2>Feature Title</h2>
+    <ul class="daw-list">
+        <li><strong>Item 1:</strong> Description</li>
+        <li><strong>Item 2:</strong> Description</li>
+    </ul>
+</div>
+
+<!-- Section with Cards -->
+<div class="daw-section">
+    <h2>Section Title</h2>
+    <div class="daw-grid">
+        <div class="daw-card">
+            <h4>Card Title</h4>
+            <p><strong>Subtitle</strong></p>
+            <p>Card description...</p>
+        </div>
+        <div class="daw-card">
+            <h4>Another Card</h4>
+            <p>Card content...</p>
+        </div>
+    </div>
+</div>
+
+<!-- Code Block -->
+<div class="daw-code">
+code here
+</div>
+
+<!-- CTA Section -->
+<div class="daw-cta">
+    <h2>Call to Action Title</h2>
+    <p>Description text...</p>
+    <div style="margin-top: 2rem;">
+        <a href="#" class="daw-btn-primary">Primary Button</a>
+        <a href="#" class="daw-btn-secondary">Secondary Button</a>
+    </div>
+</div>
+```
+
+## WordPress Theme Stylesheet Method
+
+When WordPress filters `<style>` tags from post content, add this CSS to the theme's stylesheet (e.g., `outstanding-enhancements.css`):
+
+```css
+/* ========================================
+ * BLACK/WHITE ARTICLE THEME CSS
+ * Add to: /wp-content/themes/YOUR_THEME/outstanding-enhancements.css
+ * ======================================== */
+
+/* ===== TABLE FIXES - CRITICAL ===== */
+/* WordPress wraps tables in .table-container - this causes specificity issues */
+.table-container thead,
+.table-container thead tr,
+.table-container thead th {
+    background: #000000 !important;
+    color: #ffffff !important;
+    -webkit-text-fill-color: #ffffff !important;
+}
+
+.table-container tbody,
+.table-container tbody tr,
+.table-container tbody td {
+    background: #ffffff !important;
+    color: #1a1a1a !important;
+    -webkit-text-fill-color: #1a1a1a !important;
+}
+
+/* Maximum specificity for table headers */
+.table-container thead th,
+.table-container thead th *,
+.daw-section .table-container thead th,
+.daw-feature .table-container thead th,
+.daw-card .table-container thead th,
+.daw-compare .table-container thead th,
+.daw-stat-card .table-container thead th,
+.pricing-card .table-container thead th,
+table thead th[style*=color],
+.table-container table thead th[style*=color],
+.daw-section table thead th[style*=color],
+.daw-feature table thead th[style*=color] {
+    background: #000000 !important;
+    color: #ffffff !important;
+    -webkit-text-fill-color: #ffffff !important;
+}
+
+/* Maximum specificity for table body */
+.table-container tbody td,
+.table-container tbody td *,
+.daw-section .table-container tbody td,
+.daw-feature .table-container tbody td,
+.daw-card .table-container tbody td,
+.daw-compare .table-container tbody td,
+.daw-stat-card .table-container tbody td,
+.pricing-card .table-container tbody td,
+table tbody td[style*=color],
+.table-container table tbody td[style*=color],
+.daw-section table tbody td[style*=color],
+.daw-feature table tbody td[style*=color] {
+    background: #ffffff !important;
+    color: #1a1a1a !important;
+    -webkit-text-fill-color: #1a1a1a !important;
+}
+
+/* ===== CTA BUTTON FIXES ===== */
+/* Primary CTA button - black background, white text */
+a.cta-button.primary,
+a.cta-button.primary:link,
+a.cta-button.primary:visited,
+a.cta-button[style*="background: #000"],
+a.cta-button[style*="background: #000000"] {
+    background: #000000 !important;
+    color: #ffffff !important;
+    -webkit-text-fill-color: #ffffff !important;
+}
+
+/* Secondary CTA button - white background, black text */
+a.cta-button.secondary,
+a.cta-button.secondary:link,
+a.cta-button.secondary:visited,
+a.cta-button[style*="background: #fff"],
+a.cta-button[style*="background: #ffffff"] {
+    background: #ffffff !important;
+    color: #000000 !important;
+    -webkit-text-fill-color: #000000 !important;
+    border: 2px solid #000000 !important;
+}
+
+/* CTA buttons with inline color styles */
+a.cta-button[style*="color"],
+a.cta-button[style*="color"] * {
+    color: #ffffff !important;
+    -webkit-text-fill-color: #ffffff !important;
+}
+
+/* Secondary buttons keep dark text */
+a.cta-button.secondary[style*="color"],
+a.cta-button.secondary[style*="color"] * {
+    color: #000000 !important;
+    -webkit-text-fill-color: #000000 !important;
+}
+
+/* ===== HERO SECTION FIXES ===== */
+.daw-hero {
+    background: #000000 !important;
+    color: #ffffff !important;
+}
+
+.daw-hero *,
+.daw-hero *::before,
+.daw-hero *::after {
+    -webkit-text-fill-color: #ffffff !important;
+    text-shadow: none !important;
+}
+
+/* Stat numbers - PURPLE on white cards */
+.daw-hero .daw-stat-card .daw-stat-number,
+.daw-hero .daw-stat-number {
+    color: #5b21b6 !important;
+    background: transparent !important;
+    -webkit-text-fill-color: #5b21b6 !important;
+}
+
+/* Stat labels - DARK GRAY on white cards */
+.daw-hero .daw-stat-card .daw-stat-label,
+.daw-hero .daw-stat-label {
+    color: #333333 !important;
+    background: transparent !important;
+    -webkit-text-fill-color: #333333 !important;
+}
+
+/* ===== CONTENT SECTIONS ===== */
+/* Light backgrounds → DARK text */
+.daw-card:not(.daw-hero):not(.daw-cta),
+.daw-feature:not(.daw-hero):not(.daw-cta),
+.daw-section:not(.daw-hero):not(.daw-cta),
+.daw-compare:not(.daw-hero):not(.daw-cta),
+.daw-stat-card:not(.daw-hero):not(.daw-cta),
+.pricing-card:not(.daw-hero):not(.daw-cta) {
+    color: #1a1a1a !important;
+}
+
+.daw-card p,
+.daw-card li,
+.daw-section p,
+.daw-section li,
+.daw-feature p,
+.daw-feature li {
+    color: #333333 !important;
+}
+
+/* Links - purple accent */
+a, a:link, a:visited {
+    color: #5b21b6 !important;
+}
+
+/* Force cache refresh after updating this file */
+/* Run: touch /path/to/outstanding-enhancements.css */
+```
+
+## Applying to WordPress
+
+### Method 1: Direct Database Update
+
+```bash
+# SSH to server
+ssh user@server
+
+# Get MySQL config
+cat > /tmp/mysql.cnf << EOF
+[client]
+user=wpuser
+password="yourpassword"
+host=localhost
+database=wordpress
+EOF
+
+# Read post content
+mysql --defaults-file=/tmp/mysql.cnf --batch --skip-column-names \
+  -e "SELECT post_content FROM wp_posts WHERE ID=POST_ID"
+
+# Update post (wrap CSS in <style> tags)
+mysql --defaults-file=/tmp/mysql.cnf --batch \
+  -e "UPDATE wp_posts SET post_content='<style>CSS_HERE</style>HTML_HERE' WHERE ID=POST_ID"
+```
+
+### Method 2: WordPress Admin
+
+1. Edit post in WordPress admin
+2. Switch to "Code Editor" mode
+3. Add `<style>` block at the top with CSS
+4. Add HTML content below
+5. Update/save post
+
+## Key Classes
+
+| Class | Purpose |
+|-------|---------|
+| `.daw-hero` | Hero section with black background |
+| `.daw-stats` | Stats grid container |
+| `.daw-stat-card` | Individual stat card (white bg) |
+| `.daw-feature` | Feature box (white bg, dark text) |
+| `.daw-card` | Content card (white bg, dark text) |
+| `.daw-section` | Section with light gray bg |
+| `.daw-cta` | Call-to-action (black bg, white text) |
+| `.daw-code` | Code block (dark bg, white text) |
+| `.daw-grid` | Responsive grid layout |
+| `.daw-list` | Styled list |
+| `.daw-link` | Styled link |
+| `.daw-btn-primary` | Primary button (white bg, dark text) |
+| `.daw-btn-secondary` | Secondary button (transparent, white text) |
+
+## WCAG AAA Compliance
+
+All color combinations meet WCAG AAA standards (7:1+ contrast ratio):
+
+| Background | Text | Contrast | WCAG |
+|------------|------|----------|------|
+| Black (#000000) | White (#ffffff) | 21:1 | AAA |
+| White (#ffffff) | Very Dark (#1a1a1a) | 15.3:1 | AAA |
+| White (#ffffff) | Medium Dark (#333333) | 12.6:1 | AAA |
+| White (#ffffff) | Dark Purple (#5b21b6) | 7.2:1 | AAA |
+| Dark Gray (#1a1a1a) | White (#ffffff) | 15.3:1 | AAA |
+
+## Common Issues & Fixes
+
+### Issue: Stat numbers invisible
+**Cause:** White text on white stat cards
+**Fix:** Add `.daw-stat-card .daw-stat-number { color: #5b21b6 !important; }`
+
+### Issue: CSS showing as raw text
+**Cause:** Missing `<style>` tags
+**Fix:** Wrap CSS in `<style>CSS_HERE</style>`
+
+### Issue: Text not visible
+**Cause:** Wrong color combination
+**Fix:** Check background vs text color, ensure proper contrast
+
+### Issue: Inline styles overriding CSS
+**Cause:** WordPress editor adding inline styles
+**Fix:** Use `!important` declarations or remove inline styles
+
+### Issue: Table headers showing white text on white background
+**Cause:** WordPress theme wraps tables in `.table-container` with conflicting CSS
+**Fix:** Add maximum specificity CSS rules targeting `.table-container thead th` with both background and color:
+```css
+.table-container thead th,
+.daw-section .table-container thead th,
+.daw-feature .table-container thead th,
+.daw-card .table-container thead th,
+table thead th[style*=color],
+.table-container table thead th[style*=color] {
+    background: #000000 !important;
+    color: #ffffff !important;
+    -webkit-text-fill-color: #ffffff !important;
+}
+```
+
+### Issue: CTA button text invisible (e.g., "Visit Z.AI Platform")
+**Cause:** Theme CSS classes like `.cta-button`, `.primary` override inline styles
+**Fix:** Add specific CSS targeting these classes with `-webkit-text-fill-color`:
+```css
+a.cta-button.primary,
+a.cta-button.primary:link,
+a.cta-button.primary:visited,
+a.cta-button[style*="background: #000"],
+a.cta-button[style*="background: #000000"] {
+    background: #000000 !important;
+    color: #ffffff !important;
+    -webkit-text-fill-color: #ffffff !important;
+}
+```
+
+### Issue: WordPress filters `<style>` tags from post content
+**Cause:** WordPress content filters automatically remove style tags
+**Fix:** Add CSS to theme stylesheet instead (e.g., `/wp-content/themes/THEME/outstanding-enhancements.css`)
+
+## Critical WordPress Integration Lessons
+
+### 1. Table Styling with `.table-container`
+WordPress automatically wraps tables in `.table-container` div. This causes CSS specificity issues:
+- Inline styles on `<thead>` may be overridden by theme CSS
+- Need maximum specificity selectors targeting `.table-container thead th`
+- Include `-webkit-text-fill-color` for browser compatibility
+
+### 2. Theme Stylesheet vs Inline Styles
+When WordPress filters `<style>` tags:
+1. Add CSS to `/wp-content/themes/THEME_NAME/outstanding-enhancements.css`
+2. Touch the file to force cache refresh: `touch /path/to/file.css`
+3. Use `!important` declarations generously to override theme defaults
+4. Target specific classes like `.cta-button.primary` individually
+
+### 3. CTA Button Styling
+Buttons with classes like `.cta-button` and `.primary` need special treatment:
+- Always include `-webkit-text-fill-color` property
+- Target by attribute selector: `a.cta-button[style*="background: #000"]`
+- Add rules for `:link` and `:visited` pseudo-states
+- Use maximum specificity when needed
+
+### 4. CSS Specificity Hierarchy
+When inline styles fail, use this specificity order:
+1. Element selector with attribute: `table thead th[style*=color]`
+2. Multiple class selectors: `.daw-section .table-container thead th`
+3. Universal selector with attribute: `.table-container thead th *`
+4. All with `!important` and `-webkit-text-fill-color`
+
+## Tips
+
+1. **Always wrap CSS** in `<style>` tags when adding to WordPress (or use theme stylesheet)
+2. **Use `!important`** liberally when WordPress theme overrides - this is often necessary
+3. **Add `-webkit-text-fill-color`** for browser compatibility on text color issues
+4. **Test on mobile** - the responsive CSS handles tablets and phones
+5. **Preserve content** - never remove existing content when styling
+6. **Backup first** - save post content before making changes
+7. **Touch CSS file** after changes to force browser cache refresh
+8. **Check `.table-container`** - WordPress may wrap tables automatically
+9. **Target button classes** - `.cta-button`, `.primary`, `.secondary` need specific rules