clawdbot-superskill

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>
/* all CSS here */
</style>
<div class="fb-article">
  <!-- all HTML here -->
</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;
  /* ...rest of variables and properties... */
}

---

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:

• File starts with <link rel="stylesheet"> for Google Fonts (NOT @import)
• All CSS inside a single <style> block between <link> and <div class="fb-article">
• CSS is identical to the stylesheet in Part 2
• Every <svg> has all three protections: CSS reset, width="18" height="18" attrs, inline style with !important
• All text CSS rules use !important on font-size, line-height, color, font-family
• Both .callout divs have inline style with hardcoded hex background
• .final-verdict div has inline style with hardcoded hex background
• Every text element inside dark sections has inline style with hardcoded color
• All affiliate links use target="_blank" rel="noopener nofollow sponsored"
• Affiliate disclosure present at bottom
• FAQ items use onclick="this.classList.toggle('open')"
• Star rating uses CSS mask on <span class="star-icon"> (NOT SVG)
• @media (max-width: 640px) collapses verdict-grid and pc-grid to 1 column
• Article section order matches Part 6 exactly
• User's affiliate URL is placed on all CTA buttons, text links, price table, and final verdict

---

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

1. The Spruce Pets (thesprucepets.com) — Magazine-style editorial
2. NYT Wirecutter — Pets (nytimes.com/wirecutter/pets/) — Newspaper-style testing authority
3. 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

1. Lead with editorial, not product listings — zero commerce above the fold
2. Quantified credibility banner — "X Products Reviewed" model builds instant trust
3. Expert team section on homepage — named credentials
4. Methodology preview — brief "how we evaluate" before deep-dive page
5. 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:

1. "Top Picks" summary at top — scannable before the deep dive
2. Category labels — "Best Overall", "Best Budget", "Best for [Specific Need]"
3. Pros/Cons structure — every product must have documented negatives
4. Testing methodology section — "How We Evaluated" builds legitimacy
5. Author + expert attribution — byline with credentials
6. Spec tables — structured product data for comparison
7. "Why Trust Us" section — methodology summary
8. "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)

1. Primary CTA button (after verdict box)
2. 2-3 contextual text links in body paragraphs (on product name, key benefit phrases)
3. Price table "Best Value" row
4. Final Verdict CTA and body links
5. 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):

• Article is 1,500+ words for single product reviews
• Title follows proven format patterns (Part 11)
• At least 3 genuine cons listed — no "puff piece" reviews
• CTA language uses only approved phrases (Part 12)
• Affiliate links placed in all 4 required positions (Part 13)
• Author byline and date present
• Content reads as editorial recommendation, not sales copy
• No "Buy Now", "Add to Cart", or "Shop" language (except Final Verdict CTA)
• Product evaluated from the dog's perspective, not just features
• Primary keyword in title, first 100 words, and at least 2 H2s
• FAQ section includes 5+ questions with natural keyword usage

---

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       # Install dependencies
npm run dev       # Start development server
npm run build     # Build for production
npm run preview   # Preview production build

---

Part 25: Customization Guide

When ClawdBot builds or modifies the AI Money Mastery site:

1. Content: Edit the aiMethods, marketStats, and successStories arrays in App.jsx
2. Styling: Modify the luxury aesthetic in App.css
3. SEO: Update meta tags in index.html
4. Images: Replace images in src/assets/
5. Colors: Adjust CSS variables in index.css and App.css
6. Sections: Create new components and import in App.jsx
7. 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.