# Cisco HTML Report

> Generate Cisco-branded, self-contained HTML reports with hierarchical navigation. Use when user asks to create HTML pages, reports, documentation, or dashboards. ALWAYS apply this style for HTML output. **For presentation/slide generation (PPTX), use cisco-branding skill instead which includes proper Cisco logo handling.**

- Skill: `ranilf2005/cisco-html-report` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add ranilf2005/cisco-html-report`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ranilf2005/cisco-html-report/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: ranilf2005 (https://skillmd.com/u/ranilf2005)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/ranilf2005/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:

```css
/* 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

```css
.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)*