メニュー
Create a professional landing page using tactical CSS design system and copywriting best practices
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Build a complete resume through all 3 steps (draft, provenance check, final)
Initialize JobOps workspace - configure output directories, install templates, and optionally migrate legacy files
Assess candidate against job posting using pre-created scoring rubric
Compare assessment files across application folders under applications_root
Interview-driven generation of three market-validated ideal-role archetypes (Anchor, Stretch, Pivot) from career history, elicited preferences, and high-scoring assessment patterns
Generate a strategic cover letter with requirements-matching table from Step 3 resume
| name | create-landing-page |
| description | Create a professional landing page using tactical CSS design system and copywriting best practices |
| disable-model-invocation | true |
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...