القائمة
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...