Peregian Digital Hub Web Design Skill

This directory contains a skill kit to guide AI Agents through creating highly compelling web page designs and content for the pPeregian Digital Hub. Page designs that adhere to the Hub’s brand/style guidance but are delightful to view/read. Start here, then follow the tiered files for deeper guidance and drop into templates/reference snippets when you need exact markup.

How to Use the Skill

  1. Map the work with tiers/00-foundations.md. It clarifies deliverable type, required assets, and repo setup.
  2. Lock direction using tiers/01-web-decisions.md. It houses hero choices, section cadence, background logic, and decision trees.
  3. Compose the page via tiers/02-components.md for sections, grids, cards, CTA rules, and interaction budgets.
  4. Apply the brand with tiers/03-brand-system.md (palette, typography, logo usage, imagery).
  5. Switch to decks by loading tiers/04-presentations.md whenever the output is a slide or PDF.
  6. Drop into templates under templates/ for ready-to-paste hero blocks, grids, CTA sections, and slide skeletons.
  7. Use references inside references/ for quick utility lookups or deeper components (helper classes, logo carousel, etc.).

Directory Map

  • tiers/00-foundations.md — deliverable intake, defaults, environment prep.
  • tiers/01-web-decisions.md — hero picker, section cadence, color/background decision trees.
  • tiers/02-components.md — content sections, grids, cards, interaction and background routines.
  • tiers/03-brand-system.md — palette tables, typography, logo handling, imagery sourcing.
  • tiers/04-presentations.md — slide layouts, motion rules, tokenizer motif guidance.
  • templates/ — HTML + Markdown snippets (hero-video.html, hero-image.html, hero-minimal.html, section-alternating.html, grid-uniform.html, cta-turquoise.html, cta-turquoise-card.html, card-overlay-tokenizer.html, slide-title.md, slide-process.md, etc.).
  • references/helper-classes.md — Tailwind/DaisyUI utility cheat sheet.
  • references/logo-carousel.md — markup + CSS for looping logo rows.
  • references/image-metadata-guide.md — how to mine the image manifest + curated shortlist.
  • data/image-metadata-index.json — trimmed hero/logo/portrait/background entries from data/img_metadata_manifest.json.
  • scripts/image_metadata_generator.py — scans /img, uses Gemini Vision, and updates data/img_metadata_manifest.json (skips previously processed assets unless --reprocess-all).
  • scripts/sync_image_metadata.py — regenerates the curated index when the master manifest changes.
  • README_image_metadata.md — step-by-step generator instructions & requirements.

Working Pattern

  1. Tier 0 + templates give you a working scaffold fast.
  2. Tier 1 + Tier 2 ensure structural consistency before you spend time on polish.
  3. Tier 3 keeps visual identity tight so the work reads as “Hub”.
  4. Image selection → consult references/image-metadata-guide.md + the curated index before embedding assets so every section uses the right photography, logos, or portraits.
  5. Tier 4 mirrors the same voice for decks and PDFs.

If you’re unsure which snippet or rule to follow, escalate one tier higher for the governing decision before editing code. This progressive disclosure keeps the skill light when you just need a reminder but offers depth when you’re designing a full experience.