admin/SuperCharged-Claude-Code-Upgrade
1
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d1b1a29ddb408336ea3867f7c9fbab956be7747e
SuperCharged-Claude-Code-Up…/skills/bw-article-designer/skill.md
uroma f8e39059d0 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

782 lines
20 KiB
Markdown
Raw Blame History

# 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
Reference in New Issue View Git Blame Copy Permalink