| name | clawdbot-superskill |
| description | ClawdBot's complete production skill set. Contains three merged capabilities: (1) The FurrBudd WordPress article builder — full CSS theme, HTML component templates, SVG icon library, 7 WordPress compatibility rules, and pre-delivery checklist for generating affiliate product review articles on furrbudd.com. (2) Editorial affiliate UX strategy — competitive intelligence from The Spruce Pets, NYT Wirecutter, and Dog Food Advisor for content architecture and editorial decision-making. (3) AI Money Mastery website builder — complete React/Vite/Tailwind source code scaffold with luxury UI components for AI-monetization landing pages. ClawdBot should activate this skill when the user mentions FurrBudd, product reviews, WordPress articles, affiliate content, editorial strategy, AI Money Mastery, or React website builds. |
ClawdBot Super Skill
ClawdBot's unified knowledge base. Three production systems in one file — from WordPress affiliate articles to editorial strategy to React website scaffolding.
SKILL 1: FURRBUDD ARTICLE BUILDER
Overview
ClawdBot generates self-contained HTML blocks (CSS + HTML, no JS frameworks) pasted into the WordPress Code Editor at furrbudd.com. Each article is a single file: a <link> tag, one <style> block, and one <div class="fb-article"> wrapper.
The WordPress theme at furrbudd.com aggressively overrides SVG sizes, backgrounds, fonts, and colors. Every compatibility rule below exists because of a real rendering failure on the live site. ClawdBot must follow them exactly.
Part 1: WordPress Compatibility Rules
These are non-negotiable. Violating any will break rendering on the live site.
Rule 1: Font Loading — <link>, Never @import
WordPress strips @import inside <style> tags. The article must start with:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Oswald:wght@400;600;700&display=swap">
<style>
</style>
<div class="fb-article">
</div>
Rule 2: SVG Icons — Triple Protection Required
The WP theme applies svg { width: 100% } which blows icons to full container width. Every <svg> needs ALL THREE layers:
Layer 1 — CSS reset with !important and WP wrapper selectors (included in the stylesheet below).
Layer 2 — HTML width/height attributes:
<svg class="ico" width="18" height="18" viewBox="0 0 24 24" ...>
Layer 3 — Inline style with !important:
<svg class="ico" width="18" height="18"
style="width:1.1em!important;height:1.1em!important;max-width:1.1em!important;max-height:1.1em!important;display:inline-block!important;vertical-align:-0.15em!important;overflow:visible!important"
viewBox="0 0 24 24" ...>
All three layers must be present on every SVG. Never skip a layer.
Rule 3: Dark-Background Sections — Inline Styles with Hardcoded Colors
The WP theme overrides CSS background on divs. Any dark-background section (.callout, .final-verdict) MUST have:
background-color and background set in an inline style attribute- Hardcoded hex values (NOT CSS variables)
!important on background properties- Inline
style with hardcoded color on EVERY child text element
Rule 4: Text Properties — Always !important
The WP theme overrides font-size, line-height, color, and font-family. Every text-bearing CSS rule needs !important on those four properties.
Rule 5: CSS Variables vs Hardcoded Values
- Use CSS variables in the stylesheet for general properties
- Use hardcoded hex for
background on dark sections
- Use hardcoded hex for
color on text inside dark sections
- Always define variables in the
.fb-article root selector
Rule 6: Hyperlinks — Triple Protection (Same as SVGs)
The WP theme strips text-decoration: underline from links. Every <a> tag (except .btn-primary buttons) needs ALL THREE layers:
Layer 1 — CSS reset with !important and WP wrapper selectors (included in the stylesheet):
.fb-article a,
.entry-content .fb-article a,
body .entry-content .fb-article a {
color: #0f2b4a !important;
text-decoration: underline !important;
text-decoration-color: #d4a843 !important;
text-underline-offset: 3px !important;
text-decoration-thickness: 2px !important;
text-decoration-style: solid !important;
}
Layer 2 — Inline style on every body-text <a> tag:
<a href="AFFILIATE_LINK" target="_blank" rel="noopener nofollow sponsored"
style="color:#0f2b4a!important;text-decoration:underline!important;text-decoration-color:#d4a843!important;text-underline-offset:3px!important;text-decoration-thickness:2px!important">
link text
</a>
Layer 3 — Dark-section links get gold-light color instead:
<a href="AFFILIATE_LINK" target="_blank" rel="noopener nofollow sponsored"
style="color:#e8c46a!important;text-decoration:underline!important;text-decoration-color:#d4a843!important;text-underline-offset:3px!important;text-decoration-thickness:2px!important">
link text
</a>
Exception: .btn-primary buttons get text-decoration: none !important — never underline CTA buttons.
Rule 7: Article Width — 1100px Centered
The WP theme's single-post container is set to 1100px. Every article's .fb-article root selector must include:
.fb-article {
max-width: 1100px;
margin: 0 auto;
}
Part 2: Complete CSS Stylesheet
ClawdBot must copy this entire <style> block into every new article. Only product-specific content changes between articles — the CSS stays identical.
.fb-article {
max-width: 1100px;
margin: 0 auto;
--fb-navy: #0f2b4a;
--fb-navy-dark: #0a1e33;
--fb-teal: #0d7377;
--fb-gold: #d4a843;
--fb-gold-light: #e8c46a;
--fb-white: #ffffff;
--fb-off-white: #f5f5f5;
--fb-light-gray: #e8e8e8;
--fb-mid-gray: #888888;
--fb-dark-gray: #333333;
--fb-text: #333333;
--fb-text-light: #666666;
--fb-shadow: 0 4px 15px rgba(0,0,0,0.1);
--fb-shadow-lg: 0 8px 30px rgba(0,0,0,0.15);
--fb-transition: all 0.3s ease;
font-family: 'Open Sans', sans-serif;
color: var(--fb-text);
line-height: 1.6;
}
,
,
,
,
,
,
,
,
,
{
: ;
: ;
: ;
: ;
: ;
: ;
: inline-block ;
: - ;
: visible ;
: ;
}
{ : (--fb-teal) ; }
{ : ; }
,
{ : ; : ; : ; : ; }
,
{ : ; : ; : ; : ; : ; }
{ : ; : ; : ; : ; }
{
: ;
: ;
: (to right, , , , , , , , , , , );
: ;
: ;
}
{
: flex;
: center;
: center;
: ;
: wrap;
: ;
}
{
: , sans-serif;
: ;
: ;
: uppercase;
: ;
: ;
: ;
}
{ : (--fb-teal); : ; }
{ : (--fb-gold); : (--fb-navy); }
{
: (--fb-mid-gray);
: ;
: flex;
: center;
: center;
: ;
: wrap;
: ;
}
{
: (--fb-off-white);
: solid (--fb-light-gray);
: ;
: ;
: ;
: (--fb-shadow);
}
{
: , sans-serif;
: ;
: ;
: uppercase;
: (--fb-navy);
: ;
: ;
: ;
: solid (--fb-gold);
}
{
: grid;
: fr fr;
: ;
: ;
}
{
: flex;
: flex-start;
: ;
: ;
: ;
: (--fb-text) ;
: , sans-serif ;
: ;
}
{
: flex;
: center;
: ;
: ;
: solid (--fb-light-gray);
: wrap;
}
{ : (--fb-gold); : ; : ; }
{
: , sans-serif;
: ;
: ;
: (--fb-navy);
}
{ : ; : (--fb-mid-gray) ; : , sans-serif ; }
{ : center; : ; }
{
: inline-block;
: (--fb-gold);
: (--fb-navy) ;
: , sans-serif;
: ;
: ;
: uppercase;
: ;
: ;
: ;
: (--fb-transition);
: (,,,);
: none ;
}
{
: (--fb-gold-light);
: (-);
}
{ : ; : (--fb-mid-gray) ; : ; : , sans-serif ; }
{
: , sans-serif ;
: ;
: ;
: uppercase;
: (--fb-navy) ;
: ;
: ;
: ;
: solid (--fb-teal) ;
: flex;
: center;
: ;
}
{
: ;
: inline-block;
: ;
: ;
: (--fb-gold);
: ;
: ;
}
{
: , sans-serif ;
: ;
: ;
: (--fb-navy) ;
: ;
: uppercase;
: ;
}
{
: ;
: ;
: (--fb-text) ;
: ;
: , sans-serif ;
}
{ : ; : (--fb-navy); }
,
,
,
,
{
: ;
: underline ;
: ;
: ;
: ;
: solid ;
: (--fb-transition);
}
,
,
{
: ;
: ;
}
,
,
{
: none ;
}
{
: inline-flex;
: ;
}
{
: ;
: ;
: (--fb-gold);
-webkit-: () center/contain no-repeat;
: () center/contain no-repeat;
}
{ : (--fb-light-gray); }
{ : (to right, (--fb-gold) , (--fb-light-gray) ); }
{ : pointer; }
{ : flex; : space-between; : center; }
{
: normal;
: ;
: transform ease;
: (--fb-teal);
: ;
: ;
}
{ : (); }
{
: ;
: hidden;
: max-height ease, margin ease;
: ;
}
{
: ;
: ;
}
{ : flex; : wrap; : ; : ; }
{
: (--fb-white);
: solid (--fb-light-gray);
: ;
: ;
: center;
: ;
: (--fb-transition);
}
{ : (--fb-teal); : (--fb-shadow); }
{
: , sans-serif;
: ;
: ;
: (--fb-teal);
: block;
: ;
: ;
}
{
: , sans-serif;
: ;
: uppercase;
: ;
: (--fb-mid-gray);
}
{
: ;
: solid (,,,);
: solid (--fb-teal);
: ;
: ;
: ;
: ;
: ;
: (--fb-dark-gray);
}
{ : (--fb-teal); : ; }
{ : grid; : fr fr; : ; : ; }
{ : ; : ; : (--fb-shadow); }
{ : ; : solid ; }
{ : ; : solid ; }
{
: , sans-serif;
: ;
: ;
: uppercase;
: ;
: ;
: ;
: solid currentColor;
}
{ : (--fb-teal); }
{ : ; }
{ : ; : ; : ; : flex; : ; : flex-start; : (--fb-text) ; : , sans-serif ; }
{
: ;
: (, , ) ;
: ;
: ;
: ;
: relative;
: hidden;
}
{
: ;
: absolute;
: -; : ;
: , sans-serif;
: ;
: (,,,);
: ;
}
{
: (,,,) ;
: ;
: italic;
: ;
: ;
: relative;
: ;
}
{
: block;
: ;
: ;
: , sans-serif;
: ;
: ;
: uppercase;
: ;
: normal;
: relative;
: ;
}
{ : ; : ; : ; : (--fb-shadow); }
{ : ; : solid ; }
{ : ; : solid ; }
{ : ; : ; : uppercase; }
{ : (--fb-teal) ; }
{ : ; }
{ : ; : ; : flex; : ; : flex-start; : ; : (--fb-text) ; : , sans-serif ; }
{ : ; : collapse; : ; : ; : hidden; : (--fb-shadow); : ; }
{ : (--fb-navy); : (--fb-white); : left; : ; : , sans-serif; : ; : uppercase; : ; }
{ : ; : solid (--fb-light-gray); : , sans-serif ; : (--fb-text) ; : ; }
(even) { : (--fb-off-white); }
{ : ; : (--fb-teal); : ; }
{ : solid (--fb-light-gray); : ; : ; : ; : (--fb-transition); }
{ : (--fb-teal); : (--fb-shadow); }
{ : , sans-serif; : ; : ; : (--fb-navy); : uppercase; : ; : ; }
{ : ; : (--fb-text-light) ; : ; : ; : , sans-serif ; }
{
: ;
: (, , , ) ;
: ;
: ;
: ;
: (,,,) ;
}
{ : flex; : center; : ; : ; : wrap; }
{ : , sans-serif; : ; : ; : ; : ; }
{ : ; : (,,,) ; }
{ : , sans-serif; : ; : (,,,) ; : uppercase; : ; : ; }
{
: ;
: ;
: ;
: ;
: none ;
}
{ : none ; }
{ : ; : ; : , sans-serif ; : uppercase; : ; : ; }
{ : none; : solid (,,,); : ; }
{ : (,,,) ; : ; : ; : ; : , sans-serif ; }
{ : none; : solid (--fb-light-gray); : ; }
{
: (--fb-off-white);
: solid (--fb-light-gray);
: ;
: ;
: ;
: (--fb-mid-gray);
: ;
: ;
: italic;
}
(: ) {
{ : fr; }
{ : fr; }
{ : ; }
}
Part 3: SVG Icon Library
Every SVG must include class="ico" width="18" height="18" plus the full inline style string. The inline style is abbreviated as ICO_STYLE — ClawdBot must always expand it to:
style="width:1.1em!important;height:1.1em!important;max-width:1.1em!important;max-height:1.1em!important;display:inline-block!important;vertical-align:-0.15em!important;overflow:visible!important"
Checkmark (teal, for pros/positives)
<svg class="ico ico-check" width="18" height="18" ICO_STYLE viewBox="0 0 24 24" fill="none" stroke="#0d7377" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
Warning triangle (amber, for cons/cautions)
<svg class="ico ico-warn" width="18" height="18" ICO_STYLE viewBox="0 0 24 24" fill="none" stroke="#b07a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
Paw print (filled, for who-box items)
<svg class="ico" width="18" height="18" ICO_STYLE viewBox="0 0 24 24" fill="currentColor"><ellipse cx="8" cy="7" rx="2.5" ry="3"/><ellipse cx="16" cy="7" rx="2.5" ry="3"/><ellipse cx="4.5" cy="13" rx="2" ry="2.5"/><ellipse cx="19.5" cy="13" rx="2" ry="2.5"/><path d="M12 20c-3 0-5-2-6-4s0-4 2-4.5c1.5-.4 2.5.5 4 .5s2.5-.9 4-.5c2 .5 3 2.5 2 4.5s-3 4-6 4z"/></svg>
Paw outline (for category tag, puppy FAQ)
<svg class="ico" width="18" height="18" ICO_STYLE viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 5.172C10 3.782 8.423 2.679 6.5 3c-2.823.47-4.113 6.006-4 7 .137 1.217 1.5 2 2.5 2s2-.5 3-1.5c.5-.5 1-1 1.5-1s1 .5 1.5 1c1 1 2 1.5 3 1.5s2.363-.783 2.5-2c.113-.994-1.177-6.53-4-7C10.577 2.679 10 3.782 10 5.172z"/><path d="M12 17c-2 0-4-1-4-3s2-4 4-4 4 2 4 4-2 3-4 3z"/><circle cx="8.5" cy="12.5" r=".5" fill="currentColor"/><circle cx="15.5" cy="12.5" r=".5" fill="currentColor"/><path d="M12 17v4"/></svg>
Star (filled, for badge tag)
<svg class="ico" width="18" height="18" ICO_STYLE viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
Lightning bolt (for quick verdict title)
<svg class="ico" width="18" height="18" ICO_STYLE viewBox="0 0 24 24" fill="currentColor"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
Calendar (for date in meta)
<svg class="ico" width="18" height="18" ICO_STYLE viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></>
Pen (for author in meta)
<svg class="ico" width="18" height="18" ICO_STYLE viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
Clock (for read time in meta)
<svg class="ico" width="18" height="18" ICO_STYLE viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="13" r="8"/><path d="M12 9v4l2 2"/><path d="M10 2h4"/></svg>
Leaf (for natural/organic pros)
<svg class="ico" width="18" height="18" ICO_STYLE viewBox="0 0 24 24" fill="none" stroke="#0d7377" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 21c3-6 10-9 16-10C20 5 14 3 8 5c-4 1.33-5 5-4 8l-1 8"/><path d="M8 13c3-2 7-3 11-3"/></svg>
Crosshair/target (for probiotic/science pros)
<svg class="ico" width="18" height="18" ICO_STYLE viewBox="0 0 24 24" fill="none" stroke="#0d7377" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1" fill="currentColor"/><line x1="12" y1="2" x2="12" y2="7"/><line x1="12" y1="17" x2="12" y2="22"/><line x1="2" y1= = =/>
Trend down (for weight/glycemic pros)
<svg class="ico" width="18" height="18" ICO_STYLE viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 17 13.5 8.5 8.5 13.5 2 7"/><polyline points="16 17 22 17 22 11"/></svg>
Flag (for sourcing pros)
<svg class="ico" width="18" height="18" ICO_STYLE viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/></svg>
Flask/beaker (for no-recall pros)
<svg class="ico" width="18" height="18" ICO_STYLE viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 18h8"/><path d="M3 22h18"/><path d="M14 22a7 7 0 100-14h-1"/><path d="M9 14h2"/><path d="M9 12a2 2 0 01-2-2V6h6v4a2 2 0 01-2 2z"/><path d="M12 6V3a1 1 0 00-1-1H9a1 1 0 00-1 1v3"/></svg>
Sparkle (for coat/results pros)
<svg class="ico" width="18" height="18" ICO_STYLE viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l1.5 5.5L19 9l-5.5 1.5L12 16l-1.5-5.5L5 9l5.5-1.5L12 2z"/><path d="M19 14l1 3 3 1-3 1-1 3-1-3-3-1 3-1 1-3z" opacity=".6"/></svg>
Dollar sign (for price cons)
<svg class="ico" width="18" height="18" ICO_STYLE viewBox="0 0 24 24" fill="none" stroke="#b07a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/></svg>
Plant/wheat (for grain cons)
<svg class="ico" width="18" height="18" ICO_STYLE viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 22l10-10"/><path d="M16 8l-4 4"/><path d="M12 12c1-2 3-4 6-4 0 3-2 5-4 6"/><path d="M8 16c1-2 3-4 6-4 0 3-2 5-4 6"/><path d="M16 4c1-2 3-2 5 0 0 3-2 4-4 4"/><path d="M12 8c1-2 3-2 5 0 0 3-2 4-4 4"/></svg>
Bar chart (for carb cons)
<svg class="ico" width="18" height="18" ICO_STYLE viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
Refresh/cycle (for transition cons)
<svg class="ico" width="18" height="18" ICO_STYLE viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/></svg>
Shopping cart (for availability cons)
<svg class="ico" width="18" height="18" ICO_STYLE viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6"/></svg>
Chevron down (for FAQ accordion)
Use the text character ▼ inside <i class="faq-chevron">▼</i> (not an SVG).
Part 4: HTML Component Templates
ClawdBot uses the exact HTML below for each component section. Replace bracketed [PLACEHOLDER] values with product-specific content. AFFILIATE_URL is the single affiliate link the user provides per article.
4.1 Rope Border
<div class="rope-border"></div>
4.2 Eyebrow Tags
<div class="eyebrow">
<span class="art-tag tag-cat">[PAWN_OUTLINE_SVG] [Category Name] Reviews</span>
<span class="art-tag tag-pick">[STAR_SVG] [Badge Text, e.g. "Amazon Overall Pick"]</span>
</div>
4.3 Article Meta
<div class="art-meta">
<span>[CALENDAR_SVG] [Month Year]</span>
<span>·</span>
<span>[PEN_SVG] FurrBudd Editorial Team</span>
<span>·</span>
<span>[CLOCK_SVG] [X] min read</span>
</div>
4.4 Quick Verdict Box
<div class="verdict-box">
<div class="verdict-title">[LIGHTNING_SVG] Quick Verdict</div>
<div class="verdict-grid">
<div class="verdict-item"><span>[CHECKMARK_SVG]</span><span>[Pro point]</span></div>
<div class="verdict-item"><span>[CHECKMARK_SVG]</span><span>[Pro point]</span></div>
<div class="verdict-item"><span>[WARNING_SVG]</span><span>[Con point]</span></div>
<div class="verdict-item"><span>[WARNING_SVG]</span>[Con point]
[X.X]
out of 5 · [N] Amazon reviews · [N]+ sold last month
4.5 Primary CTA
<div class="cta-wrap">
<a class="btn-primary" href="AFFILIATE_URL" target="_blank" rel="noopener nofollow sponsored">Check Price on Amazon →</a>
<p class="cta-note">[Available sizes / shipping info]</p>
</div>
4.6 Divider
<hr class="divider" />
4.7 Body Sections
<h2>[Section Title]</h2>
<p>[Body paragraph with <a href="AFFILIATE_URL" target="_blank" rel="noopener nofollow sponsored"><strong>anchor text</strong></a> links woven in naturally.]</p>
<h3>[Subheading]</h3>
<p>[Sub-section paragraph.]</p>
4.8 Ingredient Box (optional, for food products)
<div class="ingredient-box">
<strong>[Key Ingredient 1]</strong> · <strong>[Key Ingredient 2]</strong> · Regular Ingredient · <strong>[Key Ingredient 3]</strong> · Regular Ingredient
</div>
4.9 Callout Quote (DARK BACKGROUND — inline styles mandatory)
<div class="callout" style="background-color:#0f2b4a!important;background:linear-gradient(135deg,#0a1e33 0%,#0f2b4a 100%)!important;border-radius:12px!important;padding:28px 32px!important;position:relative;overflow:hidden">
<p style="color:rgba(255,255,255,0.9)!important;font-style:italic!important;line-height:1.7!important;position:relative;z-index:1">[Quote text]</p>
<cite style="color:#d4a843!important;display:block!important;position:relative;z-index:1">— [Attribution]</cite>
</div>
4.10 Stat Pills
<div class="stat-row">
<div class="stat-pill"><span class="stat-num">[Value]</span><span class="stat-lbl">[Label]</span></div>
<div class="stat-pill"><span class="stat-num">[Value]</span><span class="stat-lbl">[Label]</span></div>
</div>
4.11 Pros & Cons Grid
<div class="pc-grid">
<div class="pc-box pros">
<div class="pc-label">[CHECKMARK_SVG] What We Love</div>
<div class="pc-item"><span>[THEMED_ICON_SVG]</span><span>[Pro point]</span></div>
</div>
<div class="pc-box cons">
<div class="pc-label">[WARNING_SVG] Worth Knowing</div>
<div class="pc-item"><span>[THEMED_ICON_SVG]</span><span>[Con point]</span></div>
</div>
</div>
4.12 Price Table
<table class="price-table">
<tr><th>Size</th><th>Amazon Price</th><th>Cost Per [Unit]</th></tr>
<tr><td>[Size]</td><td>$[Price]</td><td>$[X] / [unit]</td></tr>
<tr class="best-row"><td><a href="AFFILIATE_URL" target="_blank" rel="noopener nofollow sponsored"><strong>[Size] ← Best Value — Buy Now</strong></a></td><td><strong>$[Price]</strong></td>$[X] / [unit]
4.13 Who-Is-It-For Boxes
<div class="who-box good">
<h3>[CHECKMARK_SVG] Great Fit If Your Dog…</h3>
<div class="who-item"><span>[PAWN_FILLED_SVG]</span><span>[Good-fit scenario]</span></div>
</div>
<div class="who-box skip">
<h3>[WARNING_SVG] Less Ideal If Your Dog…</h3>
<div class="who-item"><span>[WARNING_SVG]</span><span>[Less-ideal scenario]</span></div>
</div>
4.14 FAQ Accordion
<div class="faq-item" onclick="this.classList.toggle('open')">
<div class="faq-q"><span>[THEMED_ICON_SVG] [Question text]</span><i class="faq-chevron">▼</i></div>
<p class="faq-a">[Answer text]</p>
</div>
4.15 Final Verdict (DARK BACKGROUND — inline styles mandatory)
<div class="final-verdict" style="background-color:#0f2b4a!important;background:linear-gradient(135deg,#0a1e33 0%,#0f2b4a 50%,#1a3d5c 100%)!important;border-radius:12px!important;padding:36px 38px!important">
<div class="fv-header">
<div>
<div class="fv-score" style="color:#d4a843!important;font-family:'Oswald',sans-serif!important;font-size:4rem!important;font-weight:700!important">[X.X]<span class="fv-score-max" style="color:rgba(255,255,255,0.35)!important;font-size:1.5rem!important">/10</span></div>
<div class="fv-label" style="color:rgba(255,255,255,0.45)!important;font-family:'Oswald',sans-serif!important;font-size:0.72rem!important">FurrBudd Rating</div>
</div>
<div class="fv-title">
<h2 style="color:#ffffff!important;font-size:1.6rem!important;margin:0 0 4px!important;padding:0!important;border:none!important">Final Verdict</h2>
<p style="color:#e8c46a!important;font-size:0.85rem!important;font-family:'Oswald',sans-serif!important;text-transform:uppercase!important;margin:0!important">Editor's Choice — [Product Category]
[Verdict paragraph with affiliate link.]
Shop [Product] on Amazon →
4.16 Affiliate Disclosure
<div class="affiliate-note">
<strong>Disclosure:</strong> FurrBudd participates in the Amazon Services LLC Associates Program. If you purchase through our links, we may earn a small commission at no extra cost to you. This does not influence our editorial opinions or recommendations. Thank you for supporting FurrBudd!
</div>
Part 5: Affiliate Links
The user provides one affiliate URL per article. ClawdBot must place it on:
- Every CTA button (
<a class="btn-primary" href="AFFILIATE_URL" ...>)
- Contextual text links in body paragraphs (on product names, key phrases)
- Price table "Best Value" row
- Final Verdict CTA and body links
Every affiliate link must include:
<a href="AFFILIATE_URL" target="_blank" rel="noopener nofollow sponsored">
Links inside .final-verdict dark sections also need style="color: var(--fb-gold-light);".
Part 6: Article Section Order
ClawdBot must follow this exact order inside <div class="fb-article">:
| # | Section | Class | Dark BG? |
|---|
| 1 | Rope border | .rope-border | No |
| 2 | Eyebrow tags | .eyebrow > .art-tag | No |
| 3 | Article meta | .art-meta | No |
| 4 | Quick Verdict | .verdict-box | No |
| 5 | Primary CTA | .cta-wrap > .btn-primary | No |
| 6 | Divider | .divider | No |
| 7 | Body sections | h2 + p + h3 | No |
| 8 | Callout quote | .callout | YES — inline style |
| 9 | More body | h2 + p | No |
| 10 | Stat pills | .stat-row > .stat-pill | No |
| 11 | Pros & Cons | .pc-grid | No |
| 12 | Price table | .price-table | No |
| 13 | Who-is-it-for | .who-box | No |
| 14 | Reviews + callout | h2 + .callout | Callout = YES |
| 15 | FAQ accordion | .faq-item | No |
| 16 | Final Verdict | .final-verdict | YES — inline style |
| 17 | Disclosure | .affiliate-note | No |
Part 7: Color Palette & Typography
Colors
| Variable | Hex | Usage |
|---|
--fb-navy | #0f2b4a | Headings, strong text, dark backgrounds |
--fb-navy-dark | #0a1e33 | Gradient start on dark sections |
--fb-teal | #0d7377 | Check icons, h2 borders, accents |
--fb-gold | #d4a843 | CTA buttons, stars, decorative borders, citations |
--fb-gold-light | #e8c46a | Hover states, subtitle text in dark sections |
--fb-text | #333333 | Body text |
--fb-text-light | #666666 | FAQ answers, secondary text |
--fb-mid-gray | #888888 | Meta text, captions |
--fb-off-white | #f5f5f5 | Light box backgrounds |
--fb-light-gray | #e8e8e8 | Borders, dividers |
Typography
| Element | Font | Weight | Size | Case |
|---|
| h2 headings | Oswald | 700 | 1.7rem | Uppercase |
| h3 subheadings | Oswald | 600 | 1.15rem | Uppercase |
| Body paragraphs | Open Sans | 400 | 1rem | Normal |
| Eyebrow tags | Oswald | 700 | 0.72rem | Uppercase |
| CTA buttons | Oswald | 700 | 1rem | Uppercase |
| Stat numbers | Oswald | 700 | 1.6rem | Normal |
| Stat labels | Oswald | — | 0.68rem | Uppercase |
Part 8: FurrBudd Pre-Delivery Checklist
Before ClawdBot delivers any new article, verify every item:
SKILL 2: EDITORIAL AFFILIATE UX STRATEGY
Competitive intelligence for ClawdBot to apply when planning site architecture, writing article content, and making editorial decisions for FurrBudd.
Part 9: Competitive Landscape
Sites Analyzed
- The Spruce Pets (thesprucepets.com) — Magazine-style editorial
- NYT Wirecutter — Pets (nytimes.com/wirecutter/pets/) — Newspaper-style testing authority
- Dog Food Advisor (dogfoodadvisor.com) — Expert blog / resource hub
The Core Pattern
All three follow the same conversion funnel:
Trust → Education → Recommendation → Affiliate Click
Never:
Product → Price → Buy
The product is never the hero — the expert opinion is. Products appear only within the context of editorial judgment, testing methodology, and expert verification. ClawdBot must always frame FurrBudd content this way.
Part 10: Homepage & Navigation Principles
Homepage Must-Haves
- Lead with editorial, not product listings — zero commerce above the fold
- Quantified credibility banner — "X Products Reviewed" model builds instant trust
- Expert team section on homepage — named credentials
- Methodology preview — brief "how we evaluate" before deep-dive page
- Recall/safety utility content — recall alerts drive email signup and position the brand as protective
Navigation Architecture
- Pet-type first (Dogs, Cats, etc.), NOT product-category first
- Deep taxonomies: by breed, by condition, by life stage, by ingredient
- "Best [Product]" lists as primary navigation targets
- Recalls/safety as a first-class nav item
Part 11: Review Article Content Strategy
Article Title Patterns (Proven Formats)
- "The [N] Best [Product], Tested and Reviewed"
- "The [N] Best [Product] of [Year]"
- "[Product Name] Review [Year]: Is It Worth It?"
- "Best [Product] for [Specific Need] — Expert Picks"
Article Structure (Editorial Best Practices)
Every review ClawdBot generates should include:
- "Top Picks" summary at top — scannable before the deep dive
- Category labels — "Best Overall", "Best Budget", "Best for [Specific Need]"
- Pros/Cons structure — every product must have documented negatives
- Testing methodology section — "How We Evaluated" builds legitimacy
- Author + expert attribution — byline with credentials
- Spec tables — structured product data for comparison
- "Why Trust Us" section — methodology summary
- "Who This Is For" framing — frame the reader's need before selling
Content Differentiators That Build Trust
| Element | How ClawdBot Implements |
|---|
| Honest negatives | Always include 3+ genuine cons per product. Use "Worth Knowing" framing. |
| Testing provenance | State how the product was evaluated. If label-based, acknowledge it honestly. |
| Expert attribution | Use "FurrBudd Editorial Team" byline; add veterinary review when available. |
| Independence declaration | Affiliate disclosure on every article. State "we are not paid by brands." |
| Freshness signals | Include publish/update dates. Monthly date stamps on "Best Of" lists. |
Part 12: CTA Language Rules
Words ClawdBot Must NEVER Use
- "Buy Now"
- "Add to Cart"
- "Shop" (except in Final Verdict CTA: "Shop [Product] on Amazon")
- "Purchase"
Approved CTA Phrases
| Phrase | Context |
|---|
| "Check Price on Amazon" | Primary CTA button |
| "View on Amazon" | Secondary/inline links |
| "$[Price] at Amazon" | Price-anchored links |
| "[Size] — Best Value" | Price table highlight row |
| "Shop [Product] on Amazon" | Final Verdict CTA only |
Part 13: Affiliate Link Handling
Link Placement Rules (ClawdBot must follow)
- Primary CTA button (after verdict box)
- 2-3 contextual text links in body paragraphs (on product name, key benefit phrases)
- Price table "Best Value" row
- Final Verdict CTA and body links
- Never more than one CTA button visible without substantial content between them
Part 14: Trust Signal Priority
Ranked by impact — ClawdBot should maintain active signals and plan for roadmap items:
| Priority | Signal | Status |
|---|
| 1 | Affiliate disclosure on every article | Active |
| 2 | Honest negatives (Pros/Cons) for every product | Active |
| 3 | Author bylines with "FurrBudd Editorial Team" | Active |
| 4 | Publish/update dates on every article | Active |
| 5 | Transparent rating methodology page | Roadmap |
| 6 | Named expert review board with credentials | Roadmap |
| 7 | "How We Evaluated" section in every review | Roadmap |
| 8 | Monthly date stamps on "Best Of" lists | Roadmap |
| 9 | User review/community features | Future |
| 10 | Academic/scientific source citations | Future |
Part 15: Brand Voice Guidelines
ClawdBot must write FurrBudd content with these rules:
- Write in third-person editorial ("FurrBudd recommends...") or inclusive first-person plural ("we found...")
- Never use aggressive sales language
- Acknowledge limitations and trade-offs honestly
- Frame recommendations around the dog's needs, not the product's features
- Use data points and specifics over vague praise
- Make the site feel like a magazine, not a storefront
Part 16: SEO Content Guidelines
Target Word Count
- Single product reviews: 1,500+ words
- "Best Of" roundup lists: 2,500+ words
- Informational/educational posts: 1,000+ words
Keyword Placement
- Primary keyword in H1 title
- Primary keyword in first 100 words
- Secondary keywords in H2 and H3 headings
- Natural keyword density throughout body
- Primary keyword in meta description and URL slug
Internal Linking Strategy
- Every article links to 2-3 related FurrBudd articles
- "Best Of" lists link to individual product reviews
- Individual reviews link back to relevant "Best Of" lists
Part 17: Editorial Pre-Delivery Checklist
ClawdBot verifies these alongside the technical checklist (Part 8):
SKILL 3: AI MONEY MASTERY WEBSITE BUILDER
Originally created by Manus AI. ClawdBot uses this scaffold when the user requests AI-monetization landing pages or React website builds.
Live reference: https://bcdluqyt.manussite.space
Part 18: Project Setup
npx create-react-app ai-money-website
cd ai-money-website
npm install @radix-ui/react-slot @radix-ui/react-separator lucide-react class-variance-authority clsx tailwind-merge framer-motion
npm install -D tailwindcss @tailwindcss/vite tw-animate-css
Part 19: File Structure
ai-money-website/
├── public/
├── src/
│ ├── assets/ # Images
│ ├── components/
│ │ └── ui/ # UI components
│ ├── App.jsx # Main application
│ ├── App.css # Luxury styling
│ ├── index.css # Global styles
│ └── main.jsx # Entry point
├── index.html # SEO-optimized HTML
├── package.json # Dependencies
└── vite.config.js # Vite configuration
Part 20: index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AI Money Mastery - 25+ Proven Ways to Make Money Online with Artificial Intelligence</title>
<meta name="description" content="Discover 25+ proven strategies to make money online with AI. From AI content creation to automated businesses, learn how to generate income using artificial intelligence tools and technologies." />
<meta name="keywords" content="make money with AI, artificial intelligence business, AI monetization, online income AI, AI side hustle, generative AI profit, AI automation business, machine learning income" />
<meta name="author" content="AI Money Mastery" />
<meta name="robots" content= />
Part 21: Core Configuration Files
package.json
{
"name": "ai-money-website",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"@radix-ui/react-slot": "^1.2.2",
"@radix-ui/react-separator": "^1.1.6",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"framer-motion"
vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import path from 'path'
export default defineConfig({
plugins: [react(), tailwindcss()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
})
src/main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>,
)
Part 22: Global Styles (src/index.css)
@import "tailwindcss";
@import "tw-animate-css";
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 0 0% 3.9%;
--card: 0 0% 100%;
--card-foreground: 0 0% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 3.9%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96.1%;
--secondary-foreground: 0 0% 9%;
--muted: 0 0% 96.1%;
--muted-foreground: 0 0% 45.1%;
--accent: 0 0% 96.1%;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
}
{
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
}
}
base {
* {
border-border;
}
{
bg-background text-foreground;
}
}
Part 23: UI Components
src/lib/utils.js
import { clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs) {
return twMerge(clsx(inputs))
}
src/components/ui/button.jsx
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva } from "class-variance-authority"
import { cn } from "@/lib/utils"
const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default: "h-9 px-4 py-2",
sm: "h-8 rounded-md px-3 text-xs",
lg: "h-10 rounded-md px-8",
icon: "h-9 w-9",
},
},
defaultVariants: {
: ,
: ,
},
}
)
= .( {
= asChild ? :
(
)
})
. =
{ , buttonVariants }
src/components/ui/card.jsx
import * as React from "react"
import { cn } from "@/lib/utils"
const Card = React.forwardRef(({ className, ...props }, ref) => (
<div ref={ref} className={cn("rounded-xl border bg-card text-card-foreground shadow", className)} {...props} />
))
Card.displayName = "Card"
const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
<div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
))
CardHeader.displayName = "CardHeader"
const CardTitle = React.forwardRef( (
))
. =
= .( (
))
. =
= .( (
))
. =
= .( (
))
. =
{ , , , , , }
src/components/ui/badge.jsx
import * as React from "react"
import { cva } from "class-variance-authority"
import { cn } from "@/lib/utils"
const badgeVariants = cva(
"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
{
variants: {
variant: {
default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
outline: "text-foreground",
},
},
defaultVariants: {
variant: "default",
},
}
)
function Badge({ className, variant, ...props }) {
return <div className={cn(badgeVariants({ variant }), className)} {...props} />
}
export { Badge, badgeVariants }
src/components/ui/separator.jsx
import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"
import { cn } from "@/lib/utils"
const Separator = React.forwardRef(
({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
<SeparatorPrimitive.Root
ref={ref}
decorative={decorative}
orientation={orientation}
className={cn(
"shrink-0 bg-border",
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
className
)}
{...props}
/>
)
)
Separator.displayName = SeparatorPrimitive.Root.displayName
export { Separator }
Part 24: Development Commands
npm install
npm run dev
npm run build
npm run preview
Part 25: Customization Guide
When ClawdBot builds or modifies the AI Money Mastery site:
- Content: Edit the
aiMethods, marketStats, and successStories arrays in App.jsx
- Styling: Modify the luxury aesthetic in App.css
- SEO: Update meta tags in index.html
- Images: Replace images in src/assets/
- Colors: Adjust CSS variables in index.css and App.css
- Sections: Create new components and import in App.jsx
- Animations: Use Framer Motion for custom animations
The site is fully responsive: Desktop (1200px+), Tablet (768-1199px), Mobile (320-767px).
Built for ClawdBot. Three skills, one file. Battle-tested on furrbudd.com, informed by competitive analysis of the top pet editorial platforms, and scaffolded from a Manus AI React build.
