メニュー
Work case study gallery figures — multi-image layouts (hero-secondary, email-duo, sidebar-quad, integrations-stack, experiment-grid), CSS atmosphere backdrops, and palette modifiers. Use when adding, editing, or styling work gallery figures in case study HTML.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
11ty component structure — pair Nunjucks/HTML partials in _includes/components/ with scoped CSS in css/components/ using BEM and theme tokens.
Proposes a title-only Conventional Commit subject, then runs git status/diff, stages changes, and git commit -m. Use when the user asks for a commit message, to stage and commit, or to save work locally — not when they only want to push.
Pushes the current branch to origin on GitHub (git push, set upstream when missing). Use when the user asks to push, publish the branch, or ship to GitHub — not for composing commit messages or local commits only.
| name | work-gallery-figures |
| description | Work case study gallery figures — multi-image layouts (hero-secondary, email-duo, sidebar-quad, integrations-stack, experiment-grid), CSS atmosphere backdrops, and palette modifiers. Use when adding, editing, or styling work gallery figures in case study HTML. |
Case studies use a <section class="work-gallery"> of <figure class="work-gallery__item"> blocks. Caption + description stay in the figure; build transforms wrap them in .work-gallery__intro and keep media outside.
Canonical reference: reference.md (copy-paste HTML templates).
Repo rules: AGENTS.md (Work gallery sections).
Styles: src/assets/css/styles.css (search Reusable figure pattern).
Video figures: use the clickToPlayVideo shortcode — see AGENTS.md, not this skill.
| You need | Figure modifier | Media modifier | Extra |
|---|---|---|---|
| Single full-width screenshot | (none) | <img> only | — |
| Desktop + mobile (email digest) | work-gallery__item--hero-secondary | work-gallery__media--hero-secondary | work-gallery__media-main + work-gallery__media-secondary |
| Two emails side by side | …--hero-secondary + …--email-duo | …--hero-secondary | Wider column mins (680px / 400px) |
| Email + tall mobile app | …--hero-secondary + …--canfield-duo | …--hero-secondary | Wider columns (640px / 768px) |
| Four panels in two columns | work-gallery__item--sidebar-quad | work-gallery__media--sidebar-quad | .work-gallery__sidebar-quad + __col |
| Two overlapping cards | work-gallery__item--integrations-stack | work-gallery__media--integrations-stack | __integrations-stack__stage + __back / __front |
| Tone hero + 3-column sidebar cards | work-gallery__item--experiment-grid | work-gallery__media--experiment-grid | __experiment-grid__tone + __sidebar + __col |
| Large native asset (e.g. MP4 frame) | work-gallery__item--media-native | per click-to-play or img | — |
| No hairline border (keep 8px radius) | work-gallery__item--borderless | or work-gallery__media--borderless on one img | Dark / wallpaper exceptions |
| No border, no radius | work-gallery__item--plain | — | Floating logos |
Add on the media div when the frame should have a gradient “stage” (not on single <img> figures):
work-gallery__media--has-backdropwork-gallery__media--backdrop-atmospherework-gallery__media--atmosphere-warm-light | …-amber-dusk | …-cool-dark<div class="work-gallery__backdrop" aria-hidden="true"></div>Auto-assign: Omit the four classes above; workGalleryAtmosphere injects them on hero-secondary, sidebar-quad, integrations-stack, and experiment-grid media blocks (stable hash per page slug + figure order).
Manual palette: Add all backdrop classes + backdrop div yourself; transform skips that block but still counts its index so sibling auto figures keep the same palette slot.
Padding: Multi-image frames use --work-gallery-atmosphere-frame-padding on top/left/right. hero-secondary (with or without backdrop) uses flush bottom — images align to the frame’s bottom edge (align-items: end + zero bottom padding).
Width: Backdrop frames use width: fit-content; max-width: 100%; margin-inline: auto so the stage hugs content (not full 90rem bleed).
width / height on images; descriptive alt; loading="lazy".aria-label on the media div when multiple images need one summary./work/<slug>/ — spacing, bottom flush on hero-secondary, backdrop width.--work-gallery-atmosphere-* and theme tokens.