npx claudepluginhub reggiechan74/jobops --plugin jobops-icThis skill uses the workspace's default tool permissions.
Read `.jobops/config.json`. If missing, stop with:
Generates a single-file HTML landing page from a brief using Tailwind CSS CDN. Includes responsive design, dark mode, hero with CTA, features, testimonials, FAQ, footer, and OG meta tags.
Generates strategic landing page copy using copywriting frameworks (PAS, AIDA, StoryBrand) with customizable tone. Invokes copywriter agent for context gathering and output.
Generates conversion-optimized landing page copy and wireframe structures for Next.js/React with Tailwind CSS. Use for sales pages, hero sections, or lead gen pages.
Share bugs, ideas, or general feedback.
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.
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.
Before creating the landing page, I need to understand:
Page Purpose: What is this landing page for?
Target Audience: Who should this page resonate with?
Desired Action: What should visitors do?
Use the landing-page-copywriter agent to develop strategic copy:
Task tool with subagent_type='landing-page-copywriter'
The copywriter will deliver:
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:
From the loaded CSS, catalog available component classes:
.nav, .nav-link, .nav-cta.hero, .hero-content, .hero-title, .hero-subtitle.content-section, .section-title, .highlight-text.feature-grid, .feature-item, .feature-icon.method-cards, .method-card, .method-title.pipeline-steps, .pipeline-step.cta-section, .cta-btn, .secondary-btn.footer, .footer-linksUse the frontend-design skill to generate production-grade HTML:
Skill: frontend-design:frontend-design
Provide the skill with:
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>
The frontend-design skill MUST ensure:
Visual Hierarchy
Mobile-First Responsive
Performance
Accessibility
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 | [ ] |
Use Playwright MCP to preview the landing page:
Save the generated landing page and assets to the per-slug folder:
{config.directories.contractor_root}/landing-pages/{slug}/index.html${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).{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.
Provide:
# 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...