velais-presentation-design

active

Build Velais-branded presentations that match the Velais Brand Style Guide 2026: Claude Slides artifacts (the Slides artifact type) and, when asked, repo decks (.dc.html) with PDF exports. Covers the header band, section dividers with the giant tonal number, the 37% vertical-rule two-column content layout, index, stat, pricing, facilitator, cover and "Beyond IT." closing slides, the background/text/line colour pairings, the type scale, and the Slides-format workarounds (400px font cap, no negative offsets, crop-zoom on backgrounds). Use for ANY Velais deck, pitch, course overview, sales or training presentation, or when asked to restyle slides "to the Velais brand guidelines". Complements velais-brand-guidelines (general brand rules): this one is for building decks. Do NOT use for Velais web UI (use velais-ui-design), Word or PDF documents that are not slide decks, or other brands.

Owner: velais Category: document-creation Version: 1.0.0 Tokens: ~21k

slidespresentationdeckvelaisbrandingclaude-artifacts

Quality Score Breakdown

Structure (15%) 18/18

Show checks (11)

✓ SKILL.md exists with exact casing 3/3
✓ Valid YAML frontmatter 3/3
✓ No unexpected frontmatter keys 1/1
✓ Name field valid (kebab-case) 2/2
✓ Name matches folder name 1/1
✓ Description field present 2/2
✓ No angle brackets in frontmatter 1/1
✓ Folder name is kebab-case 1/1
✓ No README.md inside skill folder 1/1
✓ Test directory with test-cases.yml exists 2/2
✓ Status 'active' is valid 1/1

Description (20%) 17.5/22

Show checks (7)

✓ Contains action verbs: exports 2/4
✓ Contains trigger indicators: use for 2.5/5
✓ Description is specific and actionable 4/4
✓ File types mentioned in description 3/3
✓ Description length: 895/1024 chars 2/2
✓ Has negative triggers (scope boundaries) 2/2
✓ Owner/author specified in metadata 2/2

Instructions (25%) 28/28

Show checks (8)

✓ Skill body has content 3/3
✓ Has step/section structure 4/4
✓ Includes examples 5/5
✓ Includes error handling 4/4
✓ Uses progressive disclosure (references/scripts) 4/4
✓ Actionable language: 4/10 verb patterns found 3/3
✓ Word count: 1155/5000 2/2
✓ All referenced paths exist 3/3

Test Coverage (25%) 25/29

Show checks (10)

✓ test-cases.yml exists and parses 3/3
✓ 6 should-trigger tests ✓ 4/4
✓ 4 should-not-trigger tests ✓ 3/3
✓ 6 functional tests ✓ 5/5
✓ 2 negative tests ✓ 3/3
✓ 2 edge case tests ✓ 3/3
✗ Add performance_baseline section comparing with/without skill 0/2
✗ Some functional tests have fewer than 2 expected_behavior items 0/2
✓ All trigger phrases are diverse 2/2
✓ All assertions are specific 2/2

Security (15%) 15/15

Show checks (5)

✓ No secrets detected 5/5
✓ No injection vectors in frontmatter 3/3
✓ Name is not reserved 3/3
✓ No suspicious code patterns 2/2
✓ External URLs: 1 2/2

Test Coverage

Should Trigger

Should Not Trigger

Functional

Negative

Edge Cases

Yes

LLM Evals

Velais presentation design

The look comes from the Velais Brand Style Guide 2026 (Velais_Brand Guidelines.pdf in the Velais branding folder). If the guide is reachable and the job is a big restyle, page through it once; this skill already encodes what it says.

The five moves that make it look like the guide

Header band on every inner slide: symbol logo at left, <Deck name> - <year> at x=749, ©Velais AI Solutions - FZCO at x=1210, page number right-aligned, one 1px rule underneath at y~100 spanning 64 -> 1856. 64px side margins.
Section dividers are flat palette colour, big title top-left (120px), a one-line tagline, a small ALL CAPS label pinned bottom-left, and a giant number (01, 02…) bottom-right in the next tone of the same ramp.
Content slides split at 37% by a vertical rule (left column 653px). Left: label, heading, lead text, callout block at the bottom. Right: numbered items separated by full-width hairlines, each item 01 label -> title -> one line.
Labels are ALL CAPS, tracking 0 (not letter-spaced). Headings are Onsite Extended Regular in sentence case. Body is Host Grotesk.
Gradients only on the cover, closing and one or two dark “story” slides. Everything else is a flat brand colour. Favour darker backgrounds.

Read references/layouts.md for copy-paste slide templates and references/palette.md for which text and line colours go on which background. examples/course-overview/ is a complete 18-slide deck in this style (the AI Workflows & Training course overview, Claude Slides artifact https://claude.ai/artifact/4GFK1XW8kSz4Q29JsrDocY): open the slide closest to what you need and adapt it rather than starting from a blank section. Its /_blob/ urls belong to that artifact; upload the backgrounds again for a new deck.

Hard rules

Only these hex values: #1F3968 #627EBF #2A5CA1 #0B1B3E #AECCEB #DBE5F5 #0F1118 #FBFAF4 #8D3D55 (+ rgba() of them for overlays). Burgundy at most once per deck.
Flat: no border radius, no shadows. The guide shows rounded pills and note boxes; build them square anyway.
ASCII punctuation: ->, -, straight quotes. No em or en dashes, anywhere, including the header (Course Overview - 2026).
Text never under 24px (Slides format rule; the guide’s tiny header text is 24px here).
No emoji. Logo: the symbol path in assets/logo/ drawn as inline <svg> with stroke set to the header colour; never recolour outside the palette, never rotate.
Voice: plain, calm, short sentences. Follow the repo’s CLAUDE.md if one exists.

Workflow: a Claude Slides artifact

Artifact quickstart with intent slides, then create from the Slides type_url with auto_open: "after_first_write".
Install the Velais Design System artifact (https://claude.ai/artifact/R1kAPTLpXcEqnxxFRtXdJr, namespace folder velais): in the first publish send project/ds/velais/tokens.json, project/ds/velais/fonts/OnsiteExtended-Regular.woff2 and project/ds/velais/fonts/HostGrotesk-Regular.ttf as {artifact, path} copies, and in deck.json set faces to those two src paths plus the designSystems record (version from the DS read reply). Read the DS README once if its version may have changed.
Upload backgrounds you use from assets/backgrounds/ with one asset:true + file_paths call; use the returned /_blob/<id> urls verbatim.
- Dark-Cloud-Hero.png (cover, closing on dark) - bright cloud is TOP-LEFT; on a cover use data-crop="1.6 58% 62%" and a radial overlay (see layouts).
- Dark-Glow.png (dark story slides, subtle blue bloom).
- Bright-Bloom.png (light closing slide, bloom bottom-left).
- Dark-Soft-Presentation.png (quiet near-black, glow at right edge).
Write deck.json (full order, sections), then the cover, publish; then three slides per message, publish each batch. Keep page numbers in the header matching order.
Tell the user the deck is private until shared.

Workflow: repo deck + PDF (when asked for files)

The .dc.html format (x-dc / deck-stage) renders the same section markup, with three traps the PDF packer exposes. scripts/build_dc_deck.py handles them:

pack-deck.py --pdf forces display:flex on every section, so a display:grid two-column slide collapses. The builder converts those to a flex row (flex:0 0 653px + flex:1 1 0px).
In a browser, position:absolute backdrops paint OVER flow text. The builder puts the section on z-index:0 and full-bleed backdrops on z-index:-1.
The packer rejects external URLs, so <a href> links become plain text. It also strips , Arial from font stacks (brand check flags Arial) and maps data-crop to object-position (+ transform:scale for zoom).

Run it (from this skill’s folder) with the slide folder of the Slides deck you wrote:

python3 -I <this skill>/scripts/build_dc_deck.py \
  <scratch>/project <out.dc.html> --blobs blobs.json [--replace "EUR 500=>USD 750" ...]

blobs.json maps each /_blob/<id> to a path the deck can load, relative to the .dc.html (for ai-trainings decks: ../ + assets/<file>). See examples/course-overview/blobs.example.json. Then, in the ai-trainings repo, run its export-pdf.py and check-brand.sh tools on the file (expected: the cover’s radial overlay is the only “gradient” finding). Check the PDF by rendering pages (pdftoppm -r 30 -png) and looking at a contact sheet; do not trust the screen view, print layout differs.

Variants stay aligned. Price or currency versions of one deck (the course overview ships as EUR, USD and AED) differ only in the pricing slide. Never edit one variant by hand: change the Slides source, rebuild every variant in the same run, re-export every PDF, and in ai-trainings run check-overview-aligned.py, which fails on any other difference or a stale PDF.

Slides-format gotchas (learned the hard way)

font-size max is 400px. The divider’s giant number is 400px with transform:scale(1.3) and a sized pinned box (template in layouts.md).
Negative left/top are clamped to 0; to move a background use data-crop.
Pinned backdrops must come before the first flow child or they hide the text.
Onsite Extended is wide: about 0.75 x font-size per character. A 64px heading in the 605px left column holds ~13 characters per line; plan for 2-3 lines.
Height budget for a content slide: 101 -> 1036 (about 930px). Four right-column items at 40px titles + two 26px lines fit; five do not.
Big numbers with commas (“2,750”) at 160px need the currency on its own line.

When something fails

Design System artifact unreadable or a font copy refused: say so, fall back to the fonts in this skill’s palette (Onsite Extended / Host Grotesk faces as uploads), and never substitute a Google font silently.
A background upload is refused: leave a sized <img alt> frame with no src and tell the user which image is missing; do not inline base64.
Publish refused because someone edited the deck: read the named slides again, redo the change on their copy, publish once more.
Builder warns expected 2 top-level columns: that slide’s column divs are not each on their own line at the top level; fix the slide file, rebuild.
Builder warns unmapped blobs: add those ids to blobs.json, or the PDF will show empty boxes.
PDF page looks wrong but the screen view is fine: it is the print layout; render pages with pdftoppm and compare, then fix the slide, not the PDF.