Cisco HTML Report

Cisco-Branded HTML Report Generation

Tier 0

1. What this does: Generates a single-file, self-contained HTML report with Cisco brand colors, fixed navigation sidebar, and hierarchical sections.
2. When to use: When you need an HTML page, report, or dashboard with professional branding that works offline and in emails.
3. Inputs: Report title, version, section names and content (text, tables, lists), optional logo or project branding.
4. Outputs: A complete .html file (one file, no external dependencies) ready to open in any browser or attach to email.

Tier 1

Generate your HTML report in three steps:

1. Set up the template

   • Copy the base structure from references/html-template.md (includes nav sidebar + main content area)
   • Add your report title and version to the nav header
   • Define your navigation sections (these become clickable links on the left)

2. Fill in the content

   • Create <section> elements, one per nav item
   • Match section id="..." to nav href #... so links scroll correctly
   • Use semantic HTML5 markup (headings, lists, tables, code blocks)

3. Apply Cisco branding

   • All CSS is already in <style> tags (self-contained, no external files)
   • Use CSS variables: --cisco-blue, --cisco-green, --cisco-red, --cisco-dark-blue, etc.
   • Avoid external fonts; use system font stack for immediate loading
   • Add status badges (NEW, UPDATED, FIXED) to nav items as needed

Tier 2

NOTE: For PowerPoint/PPTX presentations, use the cisco-branding skill instead. It includes proper Cisco logo handling and avoids distortion issues.

• Component library for reusable elements (tables, info boxes, status badges): references/component-library.md
• Full HTML template for copy-paste boilerplate: references/html-template.md
• CSS variables & color palette already defined in template (search for :root {)
• Responsive breakpoints for mobile/tablet/desktop in template
• Anti-AI-slop rules to avoid generic look (no center-everything layout, no purple gradients, system fonts only)
• Verify-after-generate pattern: Always open in browser + check nav links scroll correctly

Common failure modes

1. Symptom: Nav links don't scroll to sections (or scroll to wrong place). Fix: Ensure nav href="#section-id" matches the section's id="section-id" exactly. Add scroll-margin-top: 20px to each section in CSS to prevent header overlap.

2. Symptom: Content looks cut off or overlaps on smaller screens. Fix: Use responsive breakpoints (@media max-width: 900px) to hide nav on mobile and adjust margin-left: var(--nav-width) accordingly.

3. Symptom: External fonts, images, or stylesheets cause "file:///" access errors when opened locally. Fix: Keep everything self-contained: embed images as base64 data URIs, inline all CSS in <style> tags, use system font stack (no Google Fonts).

4. Symptom: Report looks generic or amateurish despite using Cisco branding. Fix: Check you're using Cisco CSS variables correctly, avoid center-heavy layouts with uniform card sizing, add typographic hierarchy (vary font sizes for h1/h2/h3/body), and use intentional spacing (not symmetric padding on everything).

Appendix: CSS Variables & Layout

Always use these Cisco brand colors:

/* Source: Cisco Zen Garden Design System */
:root {
    --cisco-blue: #3070E7;        /* Primary accent */
    --cisco-dark-blue: #0F1729;   /* Navigation, headers */
    --cisco-light-blue: #3B82F6;  /* Info blue */
    --cisco-green: #22C55E;       /* Success, current, fixed */
    --cisco-yellow: #F59E0B;      /* Warning */
    --cisco-orange: #FF9000;      /* Alert, important */
    --cisco-red: #EF4444;         /* Error, critical */
    --cisco-purple: #8B5CF6;      /* Purple accent */
    --cisco-teal: #16BDEB;        /* Teal highlight */
    --cisco-cyber-blue: #00C8FF;  /* Highlight/link */
    --cisco-pink: #FF007F;        /* Bold accent */
    --cisco-gray: #64748B;        /* Body text */
    --cisco-light-gray: #F8FAFC;  /* Backgrounds */
    --cisco-navy: #07182D;        /* Deep dark */
    --cisco-secondary: #94A3B8;   /* Secondary text */
    --nav-width: 280px;           /* Navigation panel width */
}

Left Navigation Sidebar

Fixed position with gradient background (dark blue to darker blue). Include logo/header (white 16px), subtitle (muted white), version badge (green pill), and grouped sections with hover/active states (left border highlighting).

Navigation hierarchy: level-1 (20px padding, 13px font), level-2 (35px, 12px), level-3 (50px, 11px).

Main Content Area

.main-content { margin-left: var(--nav-width); }
.container { max-width: 1400px; margin: 0 auto; padding: 30px; }

Sections

White background, border-radius 12px, box-shadow for depth. Use scroll-margin-top: 20px to prevent header overlap on scroll.

Section headers use: default (dark-blue), .new (green), .updated (blue) class modifiers.

Appendix: Templates & References

Full HTML boilerplate: references/html-template.md (complete HTML5 structure with all CSS)

Reusable components: references/component-library.md (tables, info boxes, badges, code blocks, card grids)

Responsive breakpoints: Mobile (<900px nav hidden), tablet (1200px nav narrower), print (nav/margins hidden)

Appendix: Anti-AI-Slop Checklist

• Typography: Use system font stack, not Inter/Roboto. Vary sizes (h1 28px, h2 22px, h3 18px, body 14px).
• Layout: Avoid center-aligned symmetry. Let content size cards naturally. Use grid with visual variation.
• Color: No purple gradients. Use Cisco brand colors only. Subtle gradients (dark-blue to darker-blue for nav).
• Content: No Lorem ipsum. Specific section titles. Emojis in nav only, not headers.
• Interactive: Hover on nav/table rows only, subtle transitions (all 0.2s), shadows on sections only.

Appendix: Verify-After-Generate Pattern

1. Open in browser → nav renders, links scroll correctly
2. Check self-contained → no external <link> or <script src> tags
3. Validate colors → only Cisco CSS variables (no hardcoded hex)
4. Count sections → nav items match <section> elements
5. Fix failures → re-verify before delivering

Based on Coop Wireless CCC Migration project Author: Dawid Bednarczyk (dbednarc@cisco.com)