ncgr-abufai-template

name	ncgr-abufai-template
description	Use when creating Arabic/RTL NCGR Abufai decks from the employee POTX system: offline 16:9 HTML slides, local assets, optional imagegen.

NCGR Abufai Template

Overview

Use this skill to create production-grade NCGR presentation decks from outlines, source documents, or rough slide content. The output is an offline HTML deck that follows the POTX-derived Abufai design system, includes speaker notes, and can use generated imagery for illustrative non-official visuals.

This is a separate skill. Do not edit or depend on the Claude ncgr-presentation skill at runtime. Reuse only the assets and references packaged inside this skill directory.

Output Contract

Create a deck folder with this shape:

  deck-name/
  index.html
  assets/
    ncgr-logo.png
    ncgr-logo-white.png
    ncgr-favicon.png
    generated/
    extracted-media/
  QA.md

Required behavior:

• Use assets/template.html as the starting point unless the user explicitly asks for a different artifact type.
• Keep all presentation content local and offline-capable. Do not link remote fonts, remote images, or CDN scripts in the delivered deck.
• Use fixed 16:9 slides at 1920x1080 CSS pixels and let the template scale the stage responsively.
• Use Arabic-first RTL composition by default. English terms are allowed inside Arabic text when the source requires them.
• Include data-notes on every slide with concise speaker notes.
• Preserve interactive runtime features: animated slide entry, native interactive charts, keyboard shortcuts through the help panel, and speaker notes panel.
• Preserve the optional presenter remote integration. New decks must remain fully usable offline; the remote service is contacted only after the presenter clicks the share button.
• Place generated imagery in assets/generated/ and cite the prompt or intent in QA.md.

Workflow

1. Scaffold the deck:

   python3 /path/to/ncgr-abufai-template/scripts/new_deck.py /absolute/output/deck-name --title "عنوان العرض"
   

2. Read the relevant references before writing slides:

   • references/design-system.md for visual tokens, layout rules, and typography.
   • references/slide-patterns.md for supported slide compositions.
   • references/imagegen-guidelines.md when generated images are needed.
   • references/template-map.md when translating from the source POTX slide roles.

3. Draft the full deck in index.html:

   • Replace starter slides with the requested story.
   • Choose a pattern per slide instead of improvising one-off layouts.
   • Preserve the template JavaScript and print CSS unless there is a specific reason to extend them.
   • Build charts as semantic HTML/SVG/CSS with data-chart-detail and data-chart-point hooks instead of exporting them as flat screenshots.
   • Use local assets from assets/, especially assets/extracted-media/ and assets/generated-samples/.

4. Generate or prepare support images when useful:

   • In Codex, use the built-in imagegen skill/tool for raster imagery.
   • Generated images must not contain official logos, seals, signatures, real people, or readable government documents.
   • Save images into the deck's assets/generated/ folder and record the prompt in QA.md.

5. Validate:

   python3 /path/to/ncgr-abufai-template/scripts/qa_deck.py /absolute/output/deck-name
   

   Fix every error before delivery. Warnings are acceptable only if they are intentionally documented in QA.md.

Design Commitments

• This is the Abufai/POTX-derived system, not the older Saudi-green ncgr-presentation system.
• Use the primary navy, cyan, turquoise, purple, lime, orange, and cool gray palette documented in references/design-system.md.
• Prefer geometric bands, angled panels, precise grids, and strong content hierarchy.
• Do not make marketing landing-page slides, oversized decorative hero cards, or generic AI-gradient visuals.
• Do not put UI cards inside other cards. Use cards only for repeated content units.
• Every slide should be ready for executive or government stakeholder review: clear message, restrained visual treatment, and no placeholder filler.
• Charts should be native HTML/SVG/CSS, animate their bars, lines, or comparison states when the slide becomes active, and expose hover/focus/click detail text.
• Diagrams should be static by default. Add motion only when the user explicitly requests it and the motion improves comprehension.

Common Tasks

Create a new deck:

python3 ~/.codex/skills/ncgr-abufai-template/scripts/new_deck.py ./outputs/my-deck --title "تقرير الأداء"

Validate a deck:

python3 ~/.codex/skills/ncgr-abufai-template/scripts/qa_deck.py ./outputs/my-deck

Enable presenter remote on an existing generated deck:

python3 ~/.codex/skills/ncgr-abufai-template/scripts/enable_remote.py ./outputs/my-deck

Remote Control

Generated decks include a local, optional phone remote integration for https://remote.ploy.jsa.sa. The deck still opens and navigates offline with keyboard controls, deck buttons, speaker notes, print behavior, and local assets intact. No network request is made until the presenter clicks the share button in the controls.

When online, the share button creates a temporary remote session, opens a host WebSocket, and shows a QR code for the phone remote. Incoming commands map to the generic window.PresentationRemote API: next, prev, goTo(index), first, last, and toggleBlackout(). The host sends state after authentication and slide changes. Speaker notes are not sent unless a deck explicitly defines window.PRESENTER_REMOTE_CONFIG = { notesAllowed: true } before assets/remote/presenter-remote.js loads.

Optional configuration can be set before the remote script:

<script>
  window.PRESENTER_REMOTE_CONFIG = {
    serviceUrl: "https://remote.ploy.jsa.sa",
    notesAllowed: false,
    autoReconnect: true
  };
</script>

Assets

• assets/template.html: browser deck starter and runtime.
• assets/ncgr-logo.png, assets/ncgr-logo-white.png, assets/ncgr-favicon.png: local NCGR brand assets.
• assets/remote/: local presenter remote helpers (presentation-api.js, presenter-remote.js, presenter-remote.css, qrcode.min.js).
• assets/extracted-media.zip: archived media extracted from the source POTX. scripts/new_deck.py expands this into the generated deck's assets/extracted-media/ folder.
• assets/generated-samples/: generated examples that show acceptable image direction.
• assets/previews/template-contact-sheet.png: visual contact sheet of the extracted POTX.
• references/source-template-extraction.json.gz: compressed raw extraction metadata for deeper inspection.