astro-cta-injector

astro-cta-injector

Inject Call-to-Action blocks into Astro site content with intelligent placement strategies. Use when the user wants to add CTAs, newsletter signups, product promotions, or any content blocks to blog posts. Supports multiple placement strategies (end, after 50%, after 60%), content scoring for relevance, and dry-run preview.

7Star
1Fork
更新于 1/8/2026
SKILL.md
readonly只读
name
astro-cta-injector
description

Inject Call-to-Action blocks into Astro site content with intelligent placement strategies. Use when the user wants to add CTAs, newsletter signups, product promotions, or any content blocks to blog posts. Supports multiple placement strategies (end, after 50%, after 60%), content scoring for relevance, and dry-run preview.

Astro CTA Injector Skill

Purpose

This skill injects Call-to-Action (CTA) blocks into Astro site content. It supports:

  • Multiple CTA types (newsletter, product, custom)
  • Intelligent placement strategies
  • Content-based relevance scoring
  • Batch processing with preview

When to Use This Skill

  • User asks to "add CTAs to blog posts"
  • User wants to "inject newsletter signup" into content
  • User mentions "add product promotion" to posts
  • User needs to batch-add any type of content block to posts
  • User wants to "add calls to action" to their Astro site

Prerequisites

  • Astro site with content in .astro or .md files
  • Python 3.10+
  • BeautifulSoup4 for HTML parsing

Configuration

Create a config.json in the skill directory:

{
  "content_path": "./src/content/blog",
  "file_patterns": ["*.astro", "*.md"],
  "cta_types": {
    "newsletter": {
      "template": "newsletter.html",
      "default_placement": "after-paragraph-50%",
      "keywords": ["tip", "guide", "learn", "strategy"]
    },
    "product": {
      "template": "product.html",
      "default_placement": "end",
      "keywords": ["productivity", "task", "habit", "goal"]
    }
  },
  "output": {
    "state_file": "./state/cta_injection_progress.json",
    "backup_dir": "./backups",
    "report_file": "./reports/cta_injection_report.md"
  },
  "dry_run": true
}

Placement Strategies

Strategy Description Best For
end After all content Non-intrusive CTAs
after-paragraph-50% After 50% of paragraphs Mid-content engagement
after-paragraph-60% After 60% of paragraphs Later engagement
after-heading After first H2 Early engagement
before-conclusion Before last paragraph Strong finish

CTA Templates

Templates are HTML files in the templates/ directory:

<!-- templates/newsletter.html -->
<aside class="cta-newsletter" data-cta-type="newsletter">
  <h3>{{title}}</h3>
  <p>{{description}}</p>
  <form action="{{form_url}}" method="post">
    <input type="email" placeholder="Your email" required />
    <button type="submit">Subscribe</button>
  </form>
</aside>

Variables:

  • {{title}} - CTA headline
  • {{description}} - CTA body text
  • {{form_url}} - Form submission URL
  • {{product_url}} - Product link
  • {{image_url}} - Image source

Workflow

Step 1: Score Posts for Relevance

python scripts/score_posts.py --content-path ./src/content/blog --cta-type newsletter

Step 2: Preview Injections

python scripts/preview_injection.py --input scored_posts.json --cta-type newsletter

Step 3: Apply Injections

python scripts/inject_ctas.py --input scored_posts.json --cta-type newsletter

Input Format

Scored posts JSON:

{
  "posts": [
    {
      "file_path": "./src/content/blog/my-post.astro",
      "title": "My Blog Post",
      "relevance_score": 8.5,
      "cta_type": "newsletter",
      "placement": "after-paragraph-50%",
      "cta_data": {
        "title": "Get More Tips Like This",
        "description": "Subscribe to my weekly newsletter"
      }
    }
  ]
}

Scoring Algorithm

Posts are scored for CTA relevance based on:

  1. Keyword density - How many relevant keywords appear
  2. Content length - Longer posts = better candidates
  3. Topic match - Title and content topic alignment
  4. Existing CTAs - Skip posts that already have CTAs

Scores range from 0-10. Default threshold: 5.0

Safety Features

  • Dry-run mode by default
  • Backup creation before any modifications
  • Duplicate detection - Won't inject if CTA already exists
  • Rollback capability - Restore from backups
  • Preview diffs - See exactly what will change

Example Usage

User: "Add a newsletter signup CTA to all my productivity-related blog posts"

Claude will:

  1. Scan content directory for posts
  2. Score posts for "newsletter" relevance using productivity keywords
  3. Generate CTA HTML from template
  4. Show preview of changes
  5. Ask for confirmation
  6. Inject CTAs into matching posts
  7. Report results

You Might Also Like

Related Skills

cache-components

cache-components

137Kdev-frontend

Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.

vercel avatarvercel
获取
component-refactoring

component-refactoring

128Kdev-frontend

Refactor high-complexity React components in Dify frontend. Use when `pnpm analyze-component --json` shows complexity > 50 or lineCount > 300, when the user asks for code splitting, hook extraction, or complexity reduction, or when `pnpm analyze-component` warns to refactor before testing; avoid for simple/well-structured components, third-party wrappers, or when the user explicitly wants testing without refactoring.

langgenius avatarlanggenius
获取
web-artifacts-builder

web-artifacts-builder

47Kdev-frontend

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

anthropics avataranthropics
获取
frontend-design

frontend-design

47Kdev-frontend

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

anthropics avataranthropics
获取
react-modernization

react-modernization

28Kdev-frontend

Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.

wshobson avatarwshobson
获取
tailwind-design-system

tailwind-design-system

28Kdev-frontend

Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.

wshobson avatarwshobson
获取