SuperCharged-Claude-Code-Upgrade/skills/bw-article-designer/skill.md

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

<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

<!-- 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):

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

# 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:

.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:

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