luckiest-co 1.0.24 → 1.0.26

package/skills/luckiest-video-studio/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog — luckiest-video-studio
 
+## 1.6.0 (2026-10-03)
+- New `luckiest-video-studio-composition` sub-skill: focal placement (thirds, phi
+  grid, golden spiral and triangles), white-space budgets, platform safe areas,
+  and the 20 photo composition rules adapted to video.
+- Step 3 reads it for each scene's hold frame. Step 4 runs
+  `luckiest-video-studio-composition --review` (writes `qa/composition-review.md`)
+  before the motion review.
+
 ## 1.5.1 (2026-10-02)
 - Step 2 routes narrated videos of 30 seconds or more to the new
   `luckiest-video-studio-script` sub-skill, whose lines become scenes.

package/skills/luckiest-video-studio/SKILL.md

@@ -4,7 +4,7 @@ description: "Make product launch videos, product demos with motion design betwe
 license: See ATTRIBUTION.md
 allowed-tools: Bash, Read, Write, Edit, Glob, Grep, AskUserQuestion
 metadata:
-  version: "1.5.1"
+  version: "1.6.0"
   listing_id: luckiest-video-studio
   author: luckiest
 ---
@@ -25,7 +25,7 @@ further if `upToDate: true`. Never block on this check; if the tool is unavailab
 proceed.
 
 When the skill's work is done, call the Luckiest MCP `report_usage` tool once with
-`{ listing_id: "luckiest-video-studio", skill_version: "1.5.1", matched: true, success: <true if the skill completed, false otherwise> }`.
+`{ listing_id: "luckiest-video-studio", skill_version: "1.6.0", matched: true, success: <true if the skill completed, false otherwise> }`.
 Metadata only, never prompt text. Never block on it; if the tool is unavailable,
 skip silently.
 
@@ -178,7 +178,8 @@ length.
 `hyperframes-keyframes`, `hyperframes-creative`, `hyperframes-cli`, then
 [references/step-3-compose.md](references/step-3-compose.md),
 [references/audio.md](references/audio.md), and the `luckiest-video-studio-motion`
-sub-skill for easing, duration, origin, and transitions. Do not enter the `hyperframes` intent
+sub-skill for easing, duration, origin, and transitions. Read the `luckiest-video-studio-composition` sub-skill for
+focal placement, grids, and white space at each scene's hold frame. Do not enter the `hyperframes` intent
 interview or its generic launch-video workflow; this skill owns the story.
 
 Build each motion and logo scene as its own sub-composition. For demo scenes,
@@ -206,6 +207,9 @@ node <skill-dir>/scripts/qa.mjs crossfade  <output-dir>/composition   # full-fra
 node <skill-dir>/scripts/qa.mjs motion     <output-dir>/composition   # ease-in entrances, scale 0 cards, short linear moves
 ```
 
+Then run `luckiest-video-studio-composition --review` on the run. It writes
+`qa/composition-review.md` with a verdict per scene. Fix every scene it blocks.
+
 Then run `luckiest-video-studio-motion --review` on the run. It writes
 `qa/motion-review.md` with a verdict per scene. Fix and re-render every scene it
 blocks before the judge.

package/skills/luckiest-video-studio-cards/CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog: luckiest-video-studio-cards
 
+## 1.0.1 (2026-10-03)
+- Points at `luckiest-video-studio-composition` (when installed) for focal point, grid, white space, and safe areas.
+
 ## 1.0.0 (2026-09-30)
 - New sub-skill: 406 cards in the paper-collage and aurora-glass packs, a
   blueprint, two scene templates, and registry and new-pack scripts.

package/skills/luckiest-video-studio-cards/SKILL.md

@@ -14,7 +14,7 @@ user-invocable: false
 license: MIT. See ATTRIBUTION.md
 allowed-tools: Bash, Read, Write, Edit, Glob, Grep, AskUserQuestion
 metadata:
-  version: "1.0.0"
+  version: "1.0.1"
   listing_id: luckiest-video-studio-cards
   author: luckiest
 ---
@@ -32,7 +32,7 @@ On activation, call the Luckiest MCP `check_updates` tool with
 `upToDate: false`, surface the `notice` once and continue. Never block on it.
 
 When done, call `report_usage` once with
-`{ listing_id: "luckiest-video-studio-cards", skill_version: "1.0.0", matched: true, success: <true|false> }`.
+`{ listing_id: "luckiest-video-studio-cards", skill_version: "1.0.1", matched: true, success: <true|false> }`.
 Metadata only. Skip silently if unavailable.
 
 ## Standing rules
@@ -82,6 +82,8 @@ loaded from `composition/assets/fonts/` when the files are there.
 
 ## Step 3: Place
 
+Read `luckiest-video-studio-composition` for the card's focal point, grid, and white space at its hold frame.
+
 - **tier1:** copy the branded card to `composition/compositions/<scene-id>.html`
   (its `tokens.css` link, `cards/<pack-id>/tokens.css`, is already relative to
   `composition/`, so it resolves in Studio and in the render), fill every

package/skills/luckiest-video-studio-composition/ATTRIBUTION.md

@@ -0,0 +1,22 @@
+# Attribution
+
+`luckiest-video-studio-composition` is a Luckiest sub-skill of `luckiest-video-studio`.
+
+| Source | License | What this sub-skill uses | License file |
+|---|---|---|---|
+| **shot-composition** by iart.ai (`iart-ai/motion-design-skills`, https://github.com/iart-ai/motion-design-skills/tree/main/skills/shot-composition) | MIT, Copyright (c) 2026 iart.ai | Grid math and worked tables, rule-of-thirds placement, hierarchy order, negative space, depth layers and parallax speeds, safe-area table, camera-move values, and the anti-pattern framing | `LICENSE-iart` |
+| **20 rules of photo composition** (SlideShare deck, https://www.slideshare.net/slideshow/20-rules-of-photo-composition/248755645) | Not stated | The list of 20 rule names only. Explanations, video adaptations, and tests are original | n/a |
+
+## Changes in this edition
+
+- Refocused from general motion design to hold frames in `luckiest-video-studio`
+  runs (HyperFrames and GSAP).
+- Added the golden ratio: phi grid, golden spiral, golden triangles, phi type
+  scale, with pixel tables per aspect.
+- Added white-space budgets per scene type and the 20 rules with pass/fail tests.
+- Added `--review` mode and rendered-still checks (squint, thumbnail, overlay).
+- Removed cross-references to iart skills not installed here
+  (`animation-principles`, `motion-art-direction`, `gsap-web`, `remotion-video`,
+  `after-effects`). Easing and timing defer to `luckiest-video-studio-motion`.
+- Replaced CSS scroll, pointer, and Three.js parallax code with GSAP. Dropped the
+  orbit and dolly-zoom recipes.

package/skills/luckiest-video-studio-composition/CHANGELOG.md

@@ -0,0 +1,30 @@
+# Changelog — luckiest-video-studio-composition
+
+## 1.1.0 — 2026-10-03
+- Description widened so it triggers for generated images, product photos,
+  mockups, thumbnails, ads, and launch videos, not only video-studio scenes.
+- Image, ad creative, AI video, social, launch, website design, and prompt
+  rewrite skills now point here when it is installed.
+
+## 1.0.0 — 2026-10-03
+- New sub-skill of luckiest-video-studio, based on iart.ai `shot-composition` (MIT).
+- Placement systems: rule of thirds, phi grid, golden spiral, golden triangles,
+  centered symmetry, with pixel anchors for 16:9, 9:16, 1:1, 4:5.
+- White-space budgets per scene type. Focal spacing at least 1.5x supporting spacing.
+- `references/twenty-rules.md`: the 20 photo composition rules adapted to video,
+  each with a pass/fail test, mapped to motion-skill scene purposes.
+- `--review` writes `qa/composition-review.md` with Approve or Block per scene.
+- Rendered-still checks: squint blur, 160px thumbnail, anchor overlay.
+- Network hook: after `--review`, offer to share the worst frame and its fix with
+  the tribe for a second eye.
+- `scripts/frame_check.py` (Pillow): draws thirds, phi, golden triangle, and
+  safe-area overlays, writes squint and 160px thumbnail stills, and scores the
+  focal point against each anchor system (exit 1 when off by more than 3%).
+- 9:16 safe areas corrected from 13/19/6/6% to 15/35/11/18%, with per-platform
+  pixels for TikTok, Reels, and Shorts. Source: postplanify.com and brandeal.ai
+  safe-zone guides, checked 2026-10-03.
+- Trend pass: not run. `/newsjack` and `/luckiest-trends` were skipped for this
+  build. Safe-area percentages carry a re-check note instead.
+- Thumbnail: description routes to `checklist` (matched "rule"). Real keyword
+  match but loose. A composition or grid scene would fit better; that is a
+  separate `/luckiest-micrographic` task.

package/skills/luckiest-video-studio-composition/LICENSE-iart

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 iart.ai
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/skills/luckiest-video-studio-composition/SKILL.md

@@ -0,0 +1,212 @@
+---
+name: luckiest-video-studio-composition
+description: >-
+  Frame composition for video scenes, generated images, product photos, mockups,
+  thumbnails, ads, and launch videos. Places the focal point, sets the grid, and
+  reserves white space using the rule of thirds, golden ratio (phi grid, golden
+  spiral, golden triangles), 12 column and 8px grids, platform safe areas, and the
+  20 classic photo composition rules (leading lines, rule of odds, rule of space,
+  frame within a frame, and more). Also reviews frames and stills against those
+  rules. Used by luckiest-video-studio while composing, and by image, video, ad,
+  social, and prompt skills before they frame a shot. Trigger on "the frame feels
+  cluttered", "where should this go", "where should the subject go", "frame this",
+  "compose this shot", "use the rule of thirds", "golden
+  ratio layout", "more white space", "review the composition", "adapt this to 9:16", or "/luckiest-video-studio-composition". For easing
+  and transitions use luckiest-video-studio-motion. For building the whole video
+  use luckiest-video-studio.
+argument-hint: "[run-dir] [--review] [--scene <id>] [--aspect 16:9|9:16|1:1|4:5]"
+user-invocable: true
+license: MIT. See ATTRIBUTION.md
+allowed-tools: Bash, Read, Write, Edit, Glob, Grep
+metadata:
+  version: "1.1.0"
+  listing_id: luckiest-video-studio-composition
+  author: luckiest
+---
+
+# Composition for video frames
+
+Decides where things sit in the frame and how much empty space surrounds them.
+Every scene is judged at its **hold frame**, the frame where motion has settled
+and the viewer reads it. Motion between holds belongs to
+`luckiest-video-studio-motion`.
+
+## Staying current
+
+On activation, call the Luckiest MCP `check_updates` tool with
+`{ listingId: "luckiest-video-studio-composition", installedSemver: "1.1.0" }`. If
+`upToDate: false`, surface the `notice` once and continue. Never block on it.
+
+When done, call `report_usage` once with
+`{ listing_id: "luckiest-video-studio-composition", skill_version: "1.1.0", matched: true, success: <true|false> }`.
+Metadata only, never prompt text. Skip silently if unavailable.
+
+## Modes
+
+| Mode | Use when | Output |
+|---|---|---|
+| Build (default) | Composing or fixing a scene | A composition plan per scene, then code that follows it |
+| `--review` | After `npx hyperframes check` passes, before `luckiest-video-studio-motion --review` | `<run-dir>/qa/composition-review.md` |
+| `--aspect` | Adapting a master to another aspect | Restack plan for that aspect |
+
+## 1. Pick one placement system per scene
+
+Pick before placing anything. Mixing systems in one frame makes alignment drift.
+
+| System | Use when | Anchor points (fraction of W and H) |
+|---|---|---|
+| **Rule of thirds** | Default. One subject plus supporting text | 0.333 / 0.667 |
+| **Phi grid** (golden ratio) | Premium, editorial, calm. A subject that needs more breathing room on one side | 0.382 / 0.618 |
+| **Golden spiral** | One hero object with a detail to land on (a phone screen, a logo mark) | Spiral eye at ~0.618 / 0.618 from the open corner |
+| **Golden triangles** | Diagonal products, angled UI, a strong slant in the shot | Main diagonal plus perpendiculars from the other two corners |
+| **Centered symmetry** | Logo reveals, single-word statements, end cards, deliberate stillness | 0.5 / 0.5, mirrored weight |
+
+Phi and thirds differ by about 5% of the frame (on 1920px: 640 vs 733). Use phi
+when the extra room on the open side matters. Do not claim a frame "uses the
+golden spiral" unless the subject's detail actually lands on the spiral eye.
+
+Formulas and pixel tables for every aspect are in
+[references/grids-and-ratios.md](references/grids-and-ratios.md). Load it when
+placing exact coordinates.
+
+## 2. Set the grid
+
+- 12 columns for 16:9 and 1:1, 6 columns for 9:16.
+- 8px base unit. Spacing from 8, 16, 24, 32, 48, 64, 96, 128. Type sizes on the
+  same scale.
+- Every element edge lands on a column edge or a baseline. A 3px misalignment
+  reads as a mistake at 1080p.
+
+## 3. Reserve white space before placing content
+
+White space is assigned, not left over. Set these budgets first, then fit
+content into what remains.
+
+| Scene type | Minimum empty area of the safe frame |
+|---|---|
+| Logo, statement, end card | 60% |
+| Hero product with headline | 40% |
+| Stat or data card | 30% |
+| Dense explainer (diagram, UI walkthrough) | 20% |
+
+- Space around the focal point is at least 1.5x the space between supporting
+  elements. Equal gaps everywhere make the frame read as a list, not a hierarchy.
+- Related items sit closer to each other than to anything else (proximity).
+- When a frame feels cluttered, remove an element before shrinking anything.
+
+## 4. Rank the hierarchy
+
+One primary focal point per hold frame. Rank every element by
+**size > contrast > color > position**. Secondaries must lose on at least two of
+those four. Test it with the squint check in section 7.
+
+## 5. Apply the 20 composition rules
+
+The full rule set, each adapted to motion graphics with a pass/fail test, is in
+[references/twenty-rules.md](references/twenty-rules.md). Load it in Build mode
+when a scene's placement is still undecided, and always in `--review`.
+
+Rules that most often decide a video frame:
+
+- **Rule of space / lead room.** A subject that moves or faces a direction gets
+  open space on that side. A speaker looking right sits on the left third.
+- **Leading lines and diagonals.** UI edges, arrows, and gradients point at the
+  focal point, never off-frame.
+- **Rule of odds.** Groups of 3 or 5 cards, icons, or logos read as designed.
+  Groups of 2 or 4 invite comparison. Use even numbers only when comparing.
+- **Frame within a frame.** Device bezels, cards, and masks frame the subject.
+  One frame level per scene.
+- **Left to right.** New content enters and progresses left to right (reverse
+  for RTL scripts). Reverse direction only to mean "back" or "against".
+- **Balance.** A large element on one side is balanced by a smaller, higher
+  contrast element or by deliberate empty space on the other.
+
+## 6. Safe areas and aspects
+
+Critical content (text, logos, faces, CTAs) stays inside title-safe. On 9:16,
+platform UI covers the top 15%, the bottom 35%, and the right 18%, with TikTok's
+action rail reaching 28% in from the right from mid-frame down. Per-platform
+pixels are in the grids reference. Use one platform's row when the video targets
+only that platform.
+
+To adapt across aspects, master in 16:9 with the focal point near the vertical
+center band. For 9:16, restack side-by-side elements vertically, enlarge type
+15-25%, and move the focal point up toward 0.4 H. Never make vertical by cropping
+the master.
+
+## 7. Checks that catch what reading the code misses
+
+Run these on a rendered still of each hold frame
+(`npx hyperframes render --frame <t>` or a screenshot of the preview), then:
+
+```bash
+python3 <skill-dir>/scripts/frame_check.py still.png --focal <x>,<y> [--aspect 9:16]
+```
+
+It writes `still.overlay.png` (thirds cyan, phi gold, golden triangles magenta,
+safe area red, focal point white), `still.squint.png`, and `still.thumb.png`, and
+prints the focal point's distance to each anchor system. It exits 1 when the focal
+point is not within 3% of any anchor. Ignore that failure for scenes planned as
+centered symmetry.
+
+Read all three images:
+
+1. **Squint.** The brightest or largest blob must be the intended focal point.
+2. **Thumbnail.** The focal point and the headline must still read at 160px.
+3. **Overlay.** The focal point sits on its planned anchor, and text, logos, and
+   faces stay inside the red safe area.
+4. **Empty area.** Estimate the empty share of the safe area against the budget
+   in section 3.
+
+The script needs Pillow. If it is missing, ask before running
+`pip install pillow`. If the user declines, do the checks by eye on the still
+and say which checks were done by eye.
+
+## 8. Composition plan (Build mode output)
+
+Per scene, write into the scene's entry in `storyboard.json` or alongside it:
+
+- Placement system and the anchor the focal point sits on, in px.
+- Grid: columns, margin, gutter, base unit.
+- White-space budget and the scene type it came from.
+- Hierarchy rank of every element.
+- Which of the 20 rules the scene leans on (one to three, named).
+- Safe areas and restack plan for each target aspect.
+
+## 9. Review mode
+
+`--review` reads `storyboard.json` and the composition files, renders or
+screenshots each hold frame, runs section 7, and checks each scene against the
+20 rules. Write `<run-dir>/qa/composition-review.md`:
+
+| Scene | System | Focal on anchor | White space vs budget | Rules broken | Fix | Verdict |
+|---|---|---|---|---|---|---|
+
+Verdict is **Approve** or **Block**. Block when the focal point is ambiguous,
+critical content leaves title-safe, the white-space budget is missed by more
+than 10 points, or a scene breaks a rule without a stated reason. A broken rule
+with a stated reason in the plan ("centered for stillness") passes.
+
+After writing the review, offer once to share the worst-scoring frame and its
+fix with the user's Luckiest tribe for a second eye. Never post automatically.
+
+## Anti-patterns
+
+| Symptom | Fix |
+|---|---|
+| Everything centered on one vertical axis | Move the primary to a thirds or phi anchor. Keep center only for symmetry scenes |
+| Two elements tie for attention | Shrink or desaturate one until it loses on two of the four hierarchy factors |
+| Frame filled edge to edge | Cut an element, then meet the white-space budget |
+| Subject faces or moves into the near edge | Flip placement so lead room is on the facing side |
+| Vertical made by cropping | Restack per section 6 |
+| Different placement systems in one frame | One system per scene |
+| Hold frame different from what was planned | Plan the hold frame, not the first or last frame |
+
+## Reference files
+
+- [references/grids-and-ratios.md](references/grids-and-ratios.md): thirds, phi,
+  spiral, and triangle math with pixel tables per aspect, grid math, safe areas,
+  depth layers, and camera moves in GSAP. Load when placing coordinates.
+- [references/twenty-rules.md](references/twenty-rules.md): the 20 photo
+  composition rules adapted to video frames, each with a pass/fail test. Load for
+  undecided placement and for every review.

package/skills/luckiest-video-studio-composition/references/grids-and-ratios.md

@@ -0,0 +1,124 @@
+# Grids, ratios, safe areas, and camera framing
+
+Load this when placing exact coordinates. Pixel values are rounded to the
+nearest pixel. Adapted from iart.ai `shot-composition/references/camera-and-grids.md`
+(MIT), with phi and triangle math added and code moved to GSAP.
+
+## Anchor points per aspect
+
+Thirds lines at `W/3, 2W/3` and `H/3, 2H/3`. Phi lines at `0.382 W, 0.618 W`
+and `0.382 H, 0.618 H`.
+
+| Frame | Thirds x | Thirds y | Phi x | Phi y |
+|---|---|---|---|---|
+| 1920x1080 (16:9) | 640 / 1280 | 360 / 720 | 733 / 1187 | 413 / 667 |
+| 1080x1920 (9:16) | 360 / 720 | 640 / 1280 | 413 / 667 | 733 / 1187 |
+| 1080x1080 (1:1) | 360 / 720 | 360 / 720 | 413 / 667 | 413 / 667 |
+| 1080x1350 (4:5) | 360 / 720 | 450 / 900 | 413 / 667 | 516 / 834 |
+
+Power points are the four intersections of each set.
+
+## Golden triangles
+
+Draw one corner-to-corner diagonal, then a perpendicular to it from each of the
+other two corners. The two feet of those perpendiculars are the anchors.
+
+```
+t1 = W² / (W² + H²)    foot from the corner at (W, 0), on the diagonal (0,0)→(W,H)
+t2 = H² / (W² + H²)    foot from the corner at (0, H)
+anchor = (t * W, t * H)
+```
+
+| Frame | Anchor A | Anchor B |
+|---|---|---|
+| 1920x1080 | (1459, 820) | (462, 260) |
+| 1080x1920 | (260, 462) | (820, 1459) |
+| 1080x1080 | (540, 540) | (540, 540) |
+
+On 1:1 both anchors collapse to the center. Use thirds or phi on square frames instead.
+Mirror the diagonal to suit the direction of the subject's slant.
+
+## Golden spiral
+
+The spiral is built from a golden rectangle (1:1.618). Video frames are not golden
+rectangles, so the spiral is an approximation on 16:9 and 9:16. Its tight end
+lands near the phi intersection on the side where the spiral closes. Place the
+detail (screen, logo mark, face) there and let the larger subject sweep along the
+outer arc. Rotate or flip the spiral to match where the detail is.
+
+## Golden ratio beyond placement
+
+- Split a frame into a 61.8 / 38.2 content and empty zone for calm hero scenes.
+- Type scale by phi: 16, 26, 42, 68, 110. It has bigger jumps than an 8px scale,
+  so use it for statement scenes and the 8px scale for dense scenes.
+- A card at 1:1.618 reads as more considered than an arbitrary rectangle.
+
+## Grid math
+
+```
+content_width = frame_width - 2 * margin
+column_width  = (content_width - (cols - 1) * gutter) / cols
+column_x(i)   = margin + i * (column_width + gutter)        // 0-indexed
+span_width(n) = n * column_width + (n - 1) * gutter
+```
+
+| Frame | margin | gutter | cols | content | column | 4-col span |
+|---|---|---|---|---|---|---|
+| 1920x1080 | 100 | 24 | 12 | 1720 | 121.3 | 557.3 |
+| 1080x1080 | 64 | 16 | 12 | 952 | 64.7 | 306.6 |
+| 1080x1920 | 48 | 16 | 6 | 984 | 150.7 | 650.6 |
+
+Spacing values are 4, 8, 16, 24, 32, 48, 64, 96, 128.
+
+## Safe areas
+
+| Aspect | Top | Bottom | Left | Right | Reason |
+|---|---|---|---|---|---|
+| 16:9 (1920x1080) | 5% (54) | 5% (54) | 5% (96) | 5% (96) | Web and video. Use 10% for broadcast |
+| 9:16 (1080x1920) | 15% (288) | 35% (672) | 11% (120) | 18% (192) | Strictest of TikTok, Reels, and Shorts combined (see below) |
+| 1:1 (1080x1080) | 7% (76) | 7% (76) | 7% (76) | 7% (76) | Symmetric feed crop |
+| 4:5 (1080x1350) | 8% (108) | 8% (108) | 6% (65) | 6% (65) | Taller feed crop |
+
+9:16 per platform, in px on 1080x1920 (checked 2026-10-03):
+
+| Platform | Top | Bottom | Left | Right |
+|---|---|---|---|---|
+| TikTok | 240 | 660 | 120 | 120, and 300 from y=840 down for the action rail |
+| Instagram Reels | 269 | 672 | 65 | 65 |
+| YouTube Shorts | 288 | 672 | 48 | 192 |
+
+Sources: postplanify.com/blog/social-media-safe-zones-2026-complete-guide,
+brandeal.ai/en/blog/tiktok-safe-zone-guide. The combined row above takes the
+largest value per side. When a video targets one platform, use that platform's
+row for more room. Platform UI changes, so re-check this table when it is more
+than six months old.
+
+## Depth layers
+
+| Depth | Role | Parallax speed | Contrast |
+|---|---|---|---|
+| Background | Ambient | 0.1-0.3x | Low, often blurred or desaturated |
+| Midground | Supporting | 0.5-0.7x | Mid |
+| Foreground | Primary, the thing the eye follows | 1.0-1.5x | Sharp. Props crossing the subject blur 2-4px |
+
+```js
+// GSAP parallax pan, one timeline, distinct speeds per layer
+const dist = 300;
+tl.to(".bg",  { x: -dist * 0.2, duration: 1.6, ease: "power2.inOut" }, 0)
+  .to(".mid", { x: -dist * 0.6, duration: 1.6, ease: "power2.inOut" }, 0)
+  .to(".fg",  { x: -dist * 1.2, duration: 1.6, ease: "power2.inOut" }, 0);
+```
+
+## Camera moves
+
+One move per beat. Combining push, pan, and rotate reads as chaos.
+
+| Move | Values | Ease | Use |
+|---|---|---|---|
+| Push-in | scale 1.0 → 1.12 over 1.6s, origin on the focal point | `power2.inOut` | Focus, intimacy |
+| Pull-out | scale 1.15 → 1.0 over 1.8s, origin centered | `power2.inOut` | Reveal context |
+| Pan | x 0 → -300 over 1.5s | `power2.inOut` | Reveal space. Keep the subject a third from the trailing edge so it leads |
+| Whip-pan | out: x 0 → -120% over 0.28s, `power3.in`. In: 120% → 0 over 0.28s, `power3.out`, overlapped | see values | Energetic scene change |
+
+Set `transformOrigin` to the focal point's anchor for pushes, so the subject stays
+on its thirds or phi point while the frame grows around it.

package/skills/luckiest-video-studio-composition/references/twenty-rules.md

@@ -0,0 +1,47 @@
+# The 20 composition rules, adapted for video frames
+
+The rule list follows the deck "20 rules of photo composition"
+(https://www.slideshare.net/slideshow/20-rules-of-photo-composition/248755645,
+fetched 2026-10-03). The explanations, video adaptations, and tests are written
+for this skill.
+
+Rules conflict on purpose (fill the frame vs negative space, thirds vs centered).
+Each scene picks the rules that serve its purpose and states any rule it breaks.
+
+| # | Rule | Video adaptation | Pass test |
+|---|---|---|---|
+| 1 | **Rule of thirds** | Focal point on a thirds line or power point. The default for product and speaker shots | Focal point within 3% of a thirds line |
+| 2 | **Centered composition and symmetry** | Logo reveals, single statements, end cards. Symmetry reads as still and formal | Mirrored weight within ~10%. Center chosen on purpose, not by default |
+| 3 | **Foreground interest and depth** | A blurred foreground prop or UI chip in front of the subject adds depth. Pair it with parallax | At least two depth layers moving at different speeds when the scene moves |
+| 4 | **Frame within the frame** | Device bezels, cards, masks, and window chrome enclose the subject | One frame level. The inner frame does not touch the outer frame edge |
+| 5 | **Leading lines** | UI edges, arrows, connector lines, and gradient directions point at the focal point | Every strong line ends at or points to the focal point, not off-frame |
+| 6 | **Diagonals and triangles** | Tilted devices and angled cards add energy. Three elements arranged in a triangle feel stable | Diagonals run toward the focal point. Triangle groups have a clear apex |
+| 7 | **Patterns and textures** | Repeated cards, grids of logos, and background textures give rhythm. Break the pattern once to mark the focal item | The focal item breaks the pattern by color, scale, or position |
+| 8 | **Rule of odds** | Show 3 or 5 items. Odd groups give the eye a center item to rest on | Item count is odd, or even on purpose for a comparison |
+| 9 | **Fill the frame** | Close crops on a UI detail or product surface for emphasis beats | The subject takes over ~70% of the frame. No unrelated element enters |
+| 10 | **Leave negative space** | Empty area around the subject signals premium and gives text and motion room | Meets the white-space budget in SKILL.md section 3 |
+| 11 | **Simplicity and minimalism** | One idea per hold frame. Cut decoration that does not support the beat | Removing any element would lose meaning |
+| 12 | **Isolate the subject** | Separate the subject with blur, a darkened background, a spotlight gradient, or a solid field | The squint check finds the subject first |
+| 13 | **Change your point of view** | Vary the virtual camera: top-down, low angle, 3D tilt on a device. Avoid every scene being flat front-on | Consecutive scenes do not repeat the same angle and scale |
+| 14 | **Look for particular color** | One accent color marks the focal point. Everything else stays neutral | The accent color appears on the focal element and nowhere competing |
+| 15 | **Rule of space** | Lead room. Open space goes in the direction the subject faces, points, or moves | The space ahead of the subject is wider than the space behind it |
+| 16 | **Left to right rule** | Progress, timelines, and entering content flow left to right for LTR viewers. Reverse only to mean back or against | Direction matches meaning. Flip for RTL scripts |
+| 17 | **Balance elements in the scene** | Offset a heavy element with a smaller, higher contrast one or with empty space on the opposite side | The frame does not feel like it tips toward one side when squinted |
+| 18 | **Juxtaposition** | Place contrasting items side by side (before and after, old and new, problem and fix) to tell a story in one frame | The two items share size and alignment so only the difference reads |
+| 19 | **Golden triangles** | Diagonal compositions place subjects on the triangle anchors (see grids-and-ratios.md) | Subject within 3% of a triangle anchor. Main lines follow the diagonal |
+| 20 | **Golden ratio** | Phi grid at 0.382 and 0.618, golden spiral for one hero with a detail, 61.8/38.2 splits | Focal point within 3% of a phi line, or the spiral eye on the detail |
+
+## Choosing rules by scene purpose
+
+Scene purposes match `luckiest-video-studio-motion`.
+
+| Purpose | Lean on |
+|---|---|
+| Reveal | 3, 4, 12 |
+| Emphasis | 9, 12, 14 |
+| Bridge | 5, 15, 16 |
+| Explain | 1, 7, 8, 16 |
+| Cause | 6, 18 |
+| Rhythm | 7, 8, 13 |
+| Delight | 19, 20, 13 |
+| Logo or end card | 2, 10, 11 |

package/skills/luckiest-video-studio-composition/scripts/frame_check.py

@@ -0,0 +1,102 @@
+#!/usr/bin/env python3
+"""Composition checks on a rendered hold-frame still.
+
+Writes next to the still:
+  <name>.overlay.png  thirds (cyan), phi (gold), golden triangles (magenta), safe area (red)
+  <name>.squint.png   blurred copy, the brightest/largest blob should be the focal point
+  <name>.thumb.png    160px wide copy, focal point and headline must still read
+With --focal X,Y, prints the distance to the nearest thirds/phi line and triangle anchor
+as a fraction of the frame, and PASS when within 3%.
+
+Usage: frame_check.py still.png [--aspect 16:9|9:16|1:1|4:5] [--focal 1280,360]
+Needs Pillow (pip install pillow).
+"""
+import argparse
+import sys
+from pathlib import Path
+
+from PIL import Image, ImageDraw, ImageFilter
+
+# top, bottom, left, right as fractions, from references/grids-and-ratios.md
+SAFE = {"16:9": (.05, .05, .05, .05), "9:16": (.15, .35, .11, .18),
+        "1:1": (.07, .07, .07, .07), "4:5": (.08, .08, .06, .06)}
+THIRDS = (1 / 3, 2 / 3)
+PHI = (0.382, 0.618)
+TOL = 0.03
+
+
+def guess_aspect(w, h):
+    r = w / h
+    def ratio(k):
+        x, y = map(int, k.split(":"))
+        return x / y
+    return min(SAFE, key=lambda k: abs(r - ratio(k)))
+
+
+def triangle_anchors(w, h):
+    d = w * w + h * h
+    t1, t2 = w * w / d, h * h / d
+    pts = [(t1 * w, t1 * h), (t2 * w, t2 * h)]
+    return pts + [(w - x, y) for x, y in pts]  # mirrored diagonal
+
+
+def focal_report(fx, fy, w, h):
+    lines = []
+    for name, fr in (("thirds", THIRDS), ("phi", PHI)):
+        dx = min(abs(fx / w - f) for f in fr)
+        dy = min(abs(fy / h - f) for f in fr)
+        d = min(dx, dy)
+        lines.append((name, d, d <= TOL))
+    d = min(max(abs(fx - ax) / w, abs(fy - ay) / h) for ax, ay in triangle_anchors(w, h))
+    lines.append(("triangle", d, d <= TOL))
+    return lines
+
+
+def main():
+    ap = argparse.ArgumentParser()
+    ap.add_argument("still")
+    ap.add_argument("--aspect", choices=SAFE)
+    ap.add_argument("--focal")
+    a = ap.parse_args()
+
+    src = Path(a.still)
+    im = Image.open(src).convert("RGB")
+    w, h = im.size
+    aspect = a.aspect or guess_aspect(w, h)
+    stroke = max(2, w // 640)
+
+    ov = im.copy()
+    dr = ImageDraw.Draw(ov)
+    for fr, color in ((THIRDS, (0, 220, 255)), (PHI, (255, 190, 0))):
+        for f in fr:
+            dr.line([(f * w, 0), (f * w, h)], fill=color, width=stroke)
+            dr.line([(0, f * h), (w, f * h)], fill=color, width=stroke)
+    dr.line([(0, 0), (w, h)], fill=(255, 0, 200), width=stroke)
+    dr.line([(w, 0), (0, h)], fill=(255, 0, 200), width=stroke)
+    for ax, ay in triangle_anchors(w, h):
+        r = stroke * 4
+        dr.ellipse([ax - r, ay - r, ax + r, ay + r], outline=(255, 0, 200), width=stroke)
+    t, b, l, r_ = SAFE[aspect]
+    dr.rectangle([l * w, t * h, w - r_ * w, h - b * h], outline=(255, 40, 40), width=stroke)
+    if a.focal:
+        fx, fy = map(float, a.focal.split(","))
+        rr = stroke * 6
+        dr.ellipse([fx - rr, fy - rr, fx + rr, fy + rr], outline=(255, 255, 255), width=stroke * 2)
+
+    stem = src.with_suffix("")
+    ov.save(f"{stem}.overlay.png")
+    im.filter(ImageFilter.GaussianBlur(radius=max(8, w // 160))).save(f"{stem}.squint.png")
+    im.resize((160, max(1, round(160 * h / w))), Image.LANCZOS).save(f"{stem}.thumb.png")
+    print(f"{w}x{h} aspect {aspect}: wrote overlay, squint, thumb next to {src.name}")
+
+    if a.focal:
+        ok = False
+        for name, d, passed in focal_report(fx, fy, w, h):
+            ok |= passed
+            print(f"  {name:8} {d:.1%} from nearest {'PASS' if passed else 'off'}")
+        print("focal:", "PASS" if ok else "FAIL (not within 3% of any anchor system)")
+        sys.exit(0 if ok else 1)
+
+
+if __name__ == "__main__":
+    main()

package/skills/luckiest-video-studio-recreate/CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog — luckiest-video-studio-recreate
 
+## 1.0.1 — 2026-10-03
+- Points at `luckiest-video-studio-composition` (when installed) for focal point, grid, white space, and safe areas.
+
 ## 1.0.0 — 2026-10-01
 - New sub-skill: URL or mp4 to a per-shot prompt list (`prompts.md`,
   `prompts.json`), AI generation through the creative MCP with a cost check