Skill

Configuration

Creates professional landing pages using tactical CSS templates and strategic copywriting. Orchestrates discovery, copy generation via subagent, and CSS loading for B2B services or product pages.

CSS

HTML

frontend

design

Popularity

Parent stars

Parent forks

Invocation

How this skill is triggered — by the user, by Claude, or both

Slash command

/jobops-ic:create-landing-page

User invocable

Model invocable

Inline context

Default effort

Context Preview

The summary Claude sees in its skill listing — used to decide when to auto-load this skill

Read `.jobops/config.json`. If missing, stop with:

SKILL.md

282 lines · ~2.3k tokens

Stats

LanguageHTML

Parent stars17

Parent forks4

MaintenanceExcellent

Last CommitApr 23, 2026

Actions

View Source View Plugin View on GitHub View README

Configuration

Read .jobops/config.json. If missing, stop with:

JOBOPS NOT CONFIGURED Run /jobops:setup (then /jobops-ic:setup) to initialize your workspace.

Use config.directories.contractor_root for output paths in this skill. Use config.preferences.default_currency for pricing if applicable.

Arguments

I'll create a professional landing page using the tactical CSS design system and strategic copywriting principles.

$1: Page name/identifier (required, used as {slug}) - e.g., services, about, product-launch
--template: CSS template style (optional): tactical | minimal | corporate (default: tactical)

This skill acts as the landing-page orchestrator and owns the per-slug folder: {config.directories.contractor_root}/landing-pages/{slug}/. The sibling skills (copywrite, copywriting-spec, css-template) write sibling files (copy.md, spec.md, styles.css) INTO the same {slug} folder, with {slug} = $1.

Phase 1: Discovery & Content Planning

1.1: Gather Page Requirements

Before creating the landing page, I need to understand:

Page Purpose: What is this landing page for?
- Service promotion
- Product launch
- Lead generation
- Event registration
- Portfolio showcase
- Company/brand introduction
Target Audience: Who should this page resonate with?
- Industry/sector
- Job titles/roles
- Pain points and motivations
- Technical sophistication level
Desired Action: What should visitors do?
- Book a call/consultation
- Download a resource
- Sign up for newsletter
- Request a quote
- Start a trial

1.2: Invoke Copywriter Agent

Use the landing-page-copywriter agent to develop strategic copy:

Task tool with subagent_type='landing-page-copywriter'

The copywriter will deliver:

Compelling headline and hook
Hero section messaging
Problem/agitation content
Solution positioning
Benefits (not features)
Social proof framework
Call-to-action copy
Supporting section copy

Phase 2: Load Design System

2.1: Read CSS Template

Based on the --template argument, load the appropriate CSS:

Template	CSS File (bundled with plugin)	Best For
tactical	`${CLAUDE_PLUGIN_ROOT}/styles/subpage-styles.css`	Tech, consulting, B2B services
minimal	`${CLAUDE_PLUGIN_ROOT}/styles/minimal-styles.css`	Creative, portfolio, personal brands
corporate	`${CLAUDE_PLUGIN_ROOT}/styles/corporate-styles.css`	Enterprise, financial, healthcare

Default: Use ${CLAUDE_PLUGIN_ROOT}/styles/subpage-styles.css (tactical theme) which includes:

Military/tactical aesthetic with gradient backgrounds
Feature grids and method cards
Terminal-style code displays
Pipeline/step indicators
Responsive breakpoints (tablet 768px, mobile 480px)

2.2: Identify Available Components

From the loaded CSS, catalog available component classes:

Navigation: .nav, .nav-link, .nav-cta
Hero: .hero, .hero-content, .hero-title, .hero-subtitle
Sections: .content-section, .section-title, .highlight-text
Feature displays: .feature-grid, .feature-item, .feature-icon
Method cards: .method-cards, .method-card, .method-title
Pipeline steps: .pipeline-steps, .pipeline-step
CTAs: .cta-section, .cta-btn, .secondary-btn
Footer: .footer, .footer-links

Phase 3: Generate Landing Page

3.1: Invoke Frontend Design Skill

Use the frontend-design skill to generate production-grade HTML:

Skill: frontend-design:frontend-design

Provide the skill with:

The strategic copy from the copywriter agent
The CSS design system components
The page structure requirements

3.2: Page Structure Template

Generate HTML following this proven landing page structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[Page Title] | [Brand Name]</title>
    <meta name="description" content="[SEO meta description from copywriter]">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Navigation -->
    <nav class="nav">...</nav>

    <!-- Hero Section -->
    <section class="hero">
        <div class="hero-content">
            <h1 class="hero-title">[Headline]</h1>
            <p class="hero-subtitle">[Subheadline]</p>
            <a href="#cta" class="cta-btn">[Primary CTA]</a>
        </div>
    </section>

    <!-- Problem/Agitation -->
    <section class="content-section">
        <h2 class="section-title">[Problem Hook]</h2>
        <!-- Pain points, statistics, urgency -->
    </section>

    <!-- Solution/Benefits -->
    <section class="content-section">
        <h2 class="section-title">[Solution Hook]</h2>
        <div class="feature-grid">
            <!-- Benefits as feature items -->
        </div>
    </section>

    <!-- How It Works / Method -->
    <section class="content-section">
        <h2 class="section-title">[Process Hook]</h2>
        <div class="method-cards">
            <!-- Steps or methodology -->
        </div>
    </section>

    <!-- Social Proof -->
    <section class="content-section">
        <h2 class="section-title">[Credibility Hook]</h2>
        <!-- Testimonials, logos, metrics -->
    </section>

    <!-- Call to Action -->
    <section class="cta-section" id="cta">
        <h2>[CTA Headline]</h2>
        <p>[CTA Supporting Copy]</p>
        <a href="[action-url]" class="cta-btn">[Primary CTA Button]</a>
        <a href="[secondary-url]" class="secondary-btn">[Secondary CTA]</a>
    </section>

    <!-- Footer -->
    <footer class="footer">...</footer>
</body>
</html>

3.3: Design Requirements

The frontend-design skill MUST ensure:

Visual Hierarchy
- Single primary CTA color (never compete with hero)
- Headline is the largest text element
- Subheadline supports, doesn't distract
- Clear visual flow down the page
Mobile-First Responsive
- Touch-friendly tap targets (min 44px)
- Readable text without zooming
- Stacked layouts on mobile
- No horizontal scrolling
Performance
- No external font dependencies (use font stacks)
- Optimized images (lazy loading if images included)
- Minimal JavaScript (CSS-only animations preferred)
Accessibility
- Semantic HTML structure
- Proper heading hierarchy (h1 > h2 > h3)
- Sufficient color contrast (WCAG AA)
- Focus states for interactive elements

Phase 4: Quality Review

4.1: Landing Page Checklist

Before finalizing, verify:

Category	Requirement	Status
Copy	Headline hooks in <3 seconds	[ ]
Copy	Benefits before features	[ ]
Copy	Single, clear CTA	[ ]
Copy	Social proof present	[ ]
Design	Consistent visual theme	[ ]
Design	Mobile-responsive	[ ]
Design	Above-fold CTA visible	[ ]
Technical	Valid HTML5	[ ]
Technical	CSS linked correctly	[ ]
Technical	Meta tags populated	[ ]

4.2: Preview with Playwright

Use Playwright MCP to preview the landing page:

Navigate to the generated HTML file
Take screenshots at desktop (1280px) and mobile (375px) widths
Verify visual appearance matches design intent
Check for layout issues or broken elements

Phase 5: Output & Delivery

5.1: Save Files

Save the generated landing page and assets to the per-slug folder:

Primary: {config.directories.contractor_root}/landing-pages/{slug}/index.html
Stylesheet: copy the selected template CSS from ${CLAUDE_PLUGIN_ROOT}/styles/{template}-styles.css to {config.directories.contractor_root}/landing-pages/{slug}/styles.css (rename to styles.css regardless of template, so the HTML <link href="styles.css"> resolves).
Any other assets (images, etc.) go in the same {slug}/ folder.

Create the folder if needed: mkdir -p {config.directories.contractor_root}/landing-pages/{slug}. Then cp ${CLAUDE_PLUGIN_ROOT}/styles/{template}-styles.css {config.directories.contractor_root}/landing-pages/{slug}/styles.css.

If /jobops-ic:css-template is being used to author a custom stylesheet for this page, it will write to the same {slug}/styles.css — the two skills coordinate on that fixed filename.

5.2: Report Results

Provide:

File location
Screenshot previews (if taken)
Any copywriting notes or suggestions
Recommendations for A/B testing variations

Example Usage

# Create a services landing page with tactical theme
# -> {contractor_root}/landing-pages/services/index.html
/landing-page:create services

# Create a product launch page with minimal theme
# -> {contractor_root}/landing-pages/product-launch/index.html
/landing-page:create product-launch --template=minimal

# Create with corporate styling for enterprise clients
# -> {contractor_root}/landing-pages/enterprise-solutions/index.html
/landing-page:create enterprise-solutions --template=corporate

Now executing the landing page creation pipeline for $1...

Configuration

Popularity

Invocation

Context Preview

SKILL.md

Configuration

Popularity

Invocation

Context Preview

SKILL.md

Configuration

Arguments

Phase 1: Discovery & Content Planning

1.1: Gather Page Requirements

1.2: Invoke Copywriter Agent

Phase 2: Load Design System

2.1: Read CSS Template

2.2: Identify Available Components

Phase 3: Generate Landing Page

3.1: Invoke Frontend Design Skill

3.2: Page Structure Template

3.3: Design Requirements

Phase 4: Quality Review

4.1: Landing Page Checklist

4.2: Preview with Playwright

Phase 5: Output & Delivery

5.1: Save Files

5.2: Report Results

Example Usage

Similar Skills

Configuration

Arguments

Phase 1: Discovery & Content Planning

1.1: Gather Page Requirements

1.2: Invoke Copywriter Agent

Phase 2: Load Design System

2.1: Read CSS Template

2.2: Identify Available Components

Phase 3: Generate Landing Page

3.1: Invoke Frontend Design Skill

3.2: Page Structure Template

3.3: Design Requirements

Phase 4: Quality Review

4.1: Landing Page Checklist

4.2: Preview with Playwright

Phase 5: Output & Delivery

5.1: Save Files

5.2: Report Results

Example Usage

Similar Skills