css-template

## 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 help you manage the CSS design system templates for landing page development. - `--view [template]`: Display available CSS templates and their components - `--analyze [template]`: Deep-dive analysis of a specific template's design system - `--create [name]`: Create a new CSS template based on existing patterns **Default behavior (no arguments)**: List all available templates with summaries ## Available CSS Templates | Template | File | Description | |----------|------|-------------| | **tactical** | `${CLAUDE_PLUGIN_ROOT}/styles/subpage-styles.css` | Military/tech aesthetic with gradients, grid layouts, terminal displays | | **minimal** | `${CLAUDE_PLUGIN_ROOT}/styles/minimal-styles.css` | Clean, whitespace-focused, modern typography | | **corporate** | `${CLAUDE_PLUGIN_ROOT}/styles/corporate-styles.css` | Professional, conservative, enterprise-friendly | --- ## Mode: View Templates (`--view`) ### Tactical Template (`${CLAUDE_PLUGIN_ROOT}/styles/subpage-styles.css`) **Design Philosophy**: Mission-critical, data-driven, technically sophisticated **Color Palette**: ```css :root { --bg-dark: #0a0f1c; --bg-darker: #050810; --text-primary: #e0e6ed; --text-secondary: #8892a0; --accent: #4a9eff; --accent-secondary: #00d4aa; --border-color: #1a2234; --card-bg: #0d1424; } ``` **Key Components**: | Component | Class | Usage | |-----------|-------|-------| | Navigation | `.nav`, `.nav-link`, `.nav-cta` | Top navigation with CTA button | | Hero | `.hero`, `.hero-title`, `.hero-subtitle` | Full-width gradient hero section | | Content Sections | `.content-section`, `.section-title` | Standard content containers | | Feature Grid | `.feature-grid`, `.feature-item` | 2-3 column benefit displays | | Method Cards | `.method-cards`, `.method-card` | Step-by-step methodology | | Pipeline Steps | `.pipeline-steps`, `.pipeline-step` | Linear process visualization | | Terminal Display | `.terminal-mini`, `.terminal-header` | Code/command display | | Scoring Grid | `.scoring-grid`, `.score-item` | Metrics and ratings | | CTA Section | `.cta-section`, `.cta-btn`, `.secondary-btn` | Call-to-action blocks | | Footer | `.footer`, `.footer-links` | Site footer | **Responsive Breakpoints**: - Tablet: `max-width: 768px` - Mobile: `max-width: 480px` **Animation Features**: - Fade-in on scroll (`.fade-in-up`) - Hover transitions on cards - Gradient animations on backgrounds --- ## Mode: Analyze Template (`--analyze`) When `--analyze tactical` (or other template) is specified: ### Deep Analysis Process 1. **Read the CSS file completely** ``` Read: ${CLAUDE_PLUGIN_ROOT}/styles/subpage-styles.css ``` 2. **Extract Design System Variables** - Color palette (primary, secondary, accent) - Typography scale (headings, body, small) - Spacing scale (margins, padding) - Border radius and shadows - Animation timings 3. **Catalog All Components** For each component, document: - Class name and variants - HTML structure required - Responsive behavior - Interaction states (hover, focus, active) - Dependencies on other components 4. **Generate Component Usage Examples** ```html <!-- Feature Grid Example --> <div class="feature-grid"> <div class="feature-item"> <div class="feature-icon">Icon</div> <h3>Feature Title</h3> <p>Feature description text</p> </div> <!-- Repeat for each feature --> </div> ``` 5. **Identify Extension Points** - Which variables can be overridden - Where new components can be added - What patterns should be followed 6. **Accessibility Audit** - Color contrast ratios - Focus state visibility - Touch target sizes - Semantic structure requirements ### Analysis Output Format ```markdown # CSS Template Analysis: [Template Name] ## Design System Overview - **Primary Color**: [hex] - Used for [components] - **Accent Color**: [hex] - Used for [components] - **Typography**: [font-stack] at [scale] ## Component Inventory | Component | Classes | Variants | Responsive | |-----------|---------|----------|------------| | ... | ... | ... | ... | ## Usage Patterns [Code examples for each major component] ## Extension Guidelines [How to add new components while maintaining consistency] ## Accessibility Notes [WCAG compliance status and recommendations] ``` --- ## Mode: Create Template (`--create`) When `--create [name]` is specified: ### Template Creation Process 1. **Define Design Direction** Gather requirements for the new template: - Visual style (modern, classic, bold, subtle) - Industry/use case focus - Color scheme preferences - Typography preferences 2. **Generate Base CSS Structure** Using the **frontend-design skill**, create a new CSS file with: ```css /* ======================================== * [Template Name] Design System * Generated: [Date] * Purpose: [Description] * ======================================== */ /* Variables */ :root { /* Colors */ --bg-primary: [value]; --bg-secondary: [value]; --text-primary: [value]; --text-secondary: [value]; --accent: [value]; --accent-hover: [value]; /* Typography */ --font-heading: [stack]; --font-body: [stack]; --font-mono: [stack]; /* Spacing */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 2rem; --space-xl: 4rem; /* Borders */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; /* Shadows */ --shadow-sm: [value]; --shadow-md: [value]; --shadow-lg: [value]; } /* Base Styles */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-body); background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; } /* Navigation */ .nav { ... } /* Hero Section */ .hero { ... } /* Content Sections */ .content-section { ... } /* Feature Grid */ .feature-grid { ... } /* Cards */ .card { ... } /* CTA */ .cta-section { ... } .cta-btn { ... } /* Footer */ .footer { ... } /* Responsive */ @media (max-width: 768px) { ... } @media (max-width: 480px) { ... } ``` 3. **Validate Template** - Test with sample landing page content - Verify responsive behavior - Check accessibility compliance - Preview with Playwright 4. **Save Template** - Location: `{config.directories.contractor_root}/landing-pages/{slug}/styles.css` - The `{slug}` is provided by the caller — either the user (passed in) or the `/create-landing-page` orchestrator. The `{slug}` folder under `landing-pages/` is shared with sibling landing-page skills (`create-landing-page`, `copywrite`, `copywriting-spec`) — this skill writes `styles.css` INTO that existing per-slug folder. - Create the folder if needed: `mkdir -p {config.directories.contractor_root}/landing-pages/{slug}`. --- ## Quick Reference: Common Patterns ### Hero Section Pattern ```html <section class="hero"> <div class="hero-content"> <h1 class="hero-title">Main Headline</h1> <p class="hero-subtitle">Supporting subheadline with value prop</p> <div class="hero-cta"> <a href="#" class="cta-btn">Primary Action</a> <a href="#" class="secondary-btn">Secondary Action</a> </div> </div> </section> ``` ### Feature Grid Pattern ```html <section class="content-section"> <h2 class="section-title">Benefits Section</h2> <div class="feature-grid"> <div class="feature-item"> <div class="feature-icon">[Icon/Emoji]</div> <h3>Benefit One</h3> <p>Description of benefit</p> </div> <!-- Repeat 2-3 more items --> </div> </section> ``` ### CTA Section Pattern ```html <section class="cta-section"> <h2>Ready to Get Started?</h2> <p>Supporting copy that reinforces value</p> <a href="#" class="cta-btn">Take Action Now</a> </section> ``` --- ## Example Usage ```bash # List all available templates /landing-page:css-template # View tactical template components /landing-page:css-template --view tactical # Deep analysis of the tactical template /landing-page:css-template --analyze tactical # Create a new minimal template /landing-page:css-template --create saas-modern # Create corporate template with specific requirements /landing-page:css-template --create enterprise-clean ``` --- Now processing template operation: `$ARGUMENTS`...