用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/reggiechan74/JobOps --skill create-landing-page命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
| 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>
[Subheadline]
[Primary CTA]
[Problem Hook]
[Solution Hook]
[Process Hook]
[Credibility Hook]
[CTA Headline]
[CTA Supporting Copy]
[Primary CTA Button]
[Secondary CTA]
...
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...
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
基于 SOC 职业分类
