--- name: create-landing-page description: Create a professional landing page using tactical CSS design system and copywriting best practices disable-model-invocation: true --- ## 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: 1. **Page Purpose**: What is this landing page for? - Service promotion - Product launch - Lead generation - Event registration - Portfolio showcase - Company/brand introduction 2. **Target Audience**: Who should this page resonate with? - Industry/sector - Job titles/roles - Pain points and motivations - Technical sophistication level 3. **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: 1. The strategic copy from the copywriter agent 2. The CSS design system components 3. The page structure requirements ### 3.2: Page Structure Template Generate HTML following this proven landing page structure: ```html [Page Title] | [Brand Name]

[Headline]

[Subheadline]

[Primary CTA]

[Problem Hook]

[Solution Hook]

[Process Hook]

[Credibility Hook]

[CTA Headline]

[CTA Supporting Copy]

[Primary CTA Button] [Secondary CTA]

``` ### 3.3: Design Requirements The frontend-design skill MUST ensure: 1. **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 2. **Mobile-First Responsive** - Touch-friendly tap targets (min 44px) - Readable text without zooming - Stacked layouts on mobile - No horizontal scrolling 3. **Performance** - No external font dependencies (use font stacks) - Optimized images (lazy loading if images included) - Minimal JavaScript (CSS-only animations preferred) 4. **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: 1. Navigate to the generated HTML file 2. Take screenshots at desktop (1280px) and mobile (375px) widths 3. Verify visual appearance matches design intent 4. 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 `` 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 ```bash # 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`...