# Document Browser

> Create or update a professional live-linked document browser dashboard for a SharePoint document library, using real metadata fields, a clean navy-and-yellow design system, visible refresh, reliable SharePoint Open/Download links, and a 3-card desktop layout. Use when the user says: - "create a document browser" - "make a live dashboard for this document library" - "build a document library dashboard" - "use the document browser skill on this library" - "make sure the dashboard is live linked"

- Skill: `pnp/document-browser` (Agent Skill)
- Install (CLI): `npx skillmds@latest add pnp/document-browser`
- Raw SKILL.md: https://api.skillmd.com/api/skills/pnp/document-browser/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: pnp (https://skillmd.com/u/pnp)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/pnp/document-browser

---

# Document Browser

## When to use
Use this skill when the user wants a professional document browser dashboard for a SharePoint document library or folder. The dashboard must browse documents using real metadata, search, filters, cards, read-only Open links, Download links, and live-linked data whenever supported.

## Inputs
- Target SharePoint document library URL, list ID, or selected/current library.
- Optional folder path inside the library.
- Optional approval rule, default: show approved documents only when content approval is enabled.
- Optional dashboard file name and destination folder.
- Optional requested filters.

## Steps
1. **Resolve and inspect**
   - Resolve the target library ID and web URL.
   - Retrieve the full schema and use internal field names only.
   - Identify approval status, Document Title, name/path fields, description/abstract, metadata filters, Document Owner, contacts, author/editor, created/modified dates.

2. **Title and owner rules**
   - Prefer **Document Title** for card titles. Match `Document Title`, `documentTitle`, and `Document_x0020_Title`.
   - Fall back to `Title`, then file name.
   - Show **Document Owner** name directly below the card title. Match `documentOwner` / `Document Owner`; fall back to Author only if no owner exists.

3. **Live-linked build**
   - Use LiveData/list binding for supported library roots or list sources.
   - Include `ka-livedata-manifest` and runtime code that reads `window.__LD_RESULTS__`.
   - Include a visible **Refresh live data** button wired to `refresh()`.
   - Don't claim live-linked unless newly added/updated source documents appear after refresh without regenerating HTML.

4. **Design requirements**
   Use this exact visual system:

   **Color palette**
   - Navy: `#03274A`
   - Blue: `#164C80`
   - Yellow accent: `#FFD633`
   - Pale blue: `#CAD8E5`
   - Line / border: `#D7E2EC`
   - Sand background: `#F7F5F3`
   - Text: `#161616`
   - Muted text: `#5A5A57`

   **Typography**
   - Primary font stack: Aptos, "Segoe UI", Arial, sans-serif

   **Hero header**
   - Large rounded navy (or navy-to-blue gradient) hero banner
   - Soft yellow translucent circle accent in the upper-right
   - Short uppercase kicker in yellow with letter-spacing
   - Large white title
   - Pale lead text under the title
   - Optional simple flat-vector illustration on the right side of the hero

   **Layout & cards**
   - Exactly 3 document cards per desktop row (`grid-template-columns: repeat(3, minmax(0, 1fr))`), collapsing to 2 then 1 on smaller screens
   - White cards with subtle border (`#D7E2EC`), soft shadow, and large border-radius (~20–22px)
   - Left yellow accent bar on the card header area
   - Document title in navy, bold
   - Document Owner / contacts shown directly under the title in muted text
   - Abstract preview with hover/focus popup
   - Metadata shown as small rounded pills
   - Pill-shaped action buttons (primary = solid blue, secondary = outlined)

   **Overall feel**
   - Clean, modern, professional knowledge-browser aesthetic
   - Generous white space, soft shadows, clear hierarchy
   - Card-first design (avoid dense tables)

5. **Dashboard features**
   - Search across Document Title/title, filename, abstract/description, metadata, Document Owner, contacts, author/editor.
   - Filter using real fields. Prefer Practice, Service Area, Industry Sectors, Market, Regions, Lead Office, Document Type, Year created when present.
   - Cards include title, Document Owner below title, abstract preview with hover/focus popup, metadata pills, dates, Open and Download actions.

6. **Open and Download link rules — critical**
   - In SharePoint HTML preview the dashboard runs inside `about:srcdoc`; **do not use `location.origin`** for Open or Download because it may resolve to `null`.
   - Define a constant site URL from the resolved web URL, e.g. `var SITE='https://tenant.sharepoint.com/sites/site';`.
   - Do not render `href="#"`. If no path is available, render a disabled text control instead.
   - Build links from a decoded server-relative SharePoint path.
   - Resolve path in this order: `FileRef` / `File_x0020_Ref` / `ServerRelativeUrl` / `Path`; then `EncodedAbsUrl` parsed to `pathname`; then `FileDirRef + '/' + FileLeafRef`.
   - Use `safeDecode()` repeatedly before encoding route parameters so `Documents%2520Browser` becomes `Documents Browser`, then re-encodes only once.
   - **Verified working Open pattern:** `SITE + '/_layouts/15/Doc.aspx?sourcedoc=' + encodeURIComponent(serverRelativePath) + '&file=' + encodeURIComponent(fileName) + '&action=embedview&mobileredirect=true'`.
   - The `serverRelativePath` must be decoded first, then encoded exactly once in the `sourcedoc` route parameter.
   - Do **not** replace this with the direct file URL `?web=1&action=embedview` unless it has been manually tested in the target dashboard after saving.
   - Do **not** use `download.aspx?SourceUrl=...&transform=pdf` for Open; it can fail with File Not Found when spaces are double-encoded.
   - Download: `SITE + '/_layouts/15/download.aspx?SourceUrl=' + encodeURIComponent(serverRelativePath)`.
   - Add `target="_blank"`, `rel="noopener"`, and `data-interception="off"`.
   - Never use PDF transform links for Open; never append `download=1`; validate no `%2520`, no `null/sites`, no `href="#"`, and no absolute URL inside `SourceUrl`.

7. **Validate before saving**
   - Confirm live manifest/source exists.
   - Confirm visible refresh control exists and is wired.
   - Confirm 3-column desktop grid exists.
   - Confirm Document Title is first title source and Document Owner appears below title.
   - Confirm the navy / yellow / sand design system and hero structure are present.
   - Confirm Open uses the verified `Doc.aspx?sourcedoc=...&file=...&action=embedview&mobileredirect=true` pattern; confirm Download uses `SITE`, robust source-path fallback, and neither link renders `#`, `null/sites`, PDF transform, direct untested `?web=1&action=embedview`, or double-encoded `%2520`.

8. **Save**
   - Create or update an `.html` file in the requested destination.
   - Prefer saving HTML dashboards to a Reports library or the location requested by the user unless updating an explicitly selected existing file.
   - Provide the file link.

## Output format
Respond with:
- Link to the dashboard.
- Whether it is fully live-linked.
- Note that it uses 3 desktop columns, Document Title, Document Owner below title, the navy-and-yellow design system, visible refresh, and robust decoded server-relative Open/Download links.
- Any limitation or workaround.

## Honesty
If live binding can't target the requested folder or view, say so and offer a workaround. Don't invent working links or data.