본문으로 건너뛰기
cccskills
무료GitHub에 공개

render-search-grid

Render a 'search-grid' (Pinterest search-moodboard) video from a config — a real-DOM page with four continuous beats (masonry search grid + typing hook with counter-drift columns → 3 cards slide in from the right and stack → the top card box-grows to fullscreen then swipe-left ×2 through captioned feature shots → end card), frame-stepped via Chromium and encoded with FFmpeg — deterministic assembly, FREE (real brand photos + logo; the optional music bed comes from create-music-elevenlabs), so type/logo/photos stay pixel-crisp. Use for the search-grid format.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

설치 방법 보기

포함된 파일(8)

  • SKILL.md4.5 KB
  • scripts/build_html.py14.5 KB
  • scripts/capture.js2.8 KB
  • scripts/config.example.json5.0 KB
  • scripts/prep_assets.py2.3 KB
  • scripts/render.py2.3 KB
  • skill.meta.json335 B
  • tests/smoke-test.md762 B

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

render-search-grid

Render the 'search-grid' format from a config. It is a deterministic assembler — no generative image/video, no AI-rendered text. Everything on screen is the brand's REAL product/lifestyle photography + logo, so the typed hook, feature captions, wordmark, and photos stay pixel-crisp. The only paid input is an optional music bed, produced upstream by create-music-elevenlabs and passed to render.py --music.

The format (four beats, one continuous ~18s motion piece, 1080×1920)

  1. Search (0–5s) — a 3-column masonry grid of the brand's catalog behind a Pinterest search bar; a believable phrase types in letter-by-letter. Side columns drift DOWN, the middle column drifts UP (counter-parallax).
  2. Cards (5–7s) — 3 room/product cards slide in from the RIGHT and stack over a blurred backdrop (stack_bg + stack_tint).
  3. Features (7–14.5s) — the TOP card physically expands (its box grows from the stacked rect to full-screen, animating width/height — NOT transform:scale, which would stretch the image), then swipe-left → swipe-left through the SAME 3 rooms, each now full-bleed with a caption. The 3 cards ARE the 3 features.
  4. End card (14.5–18s) — hero + wordmark + tagline + CTA on endcard.bg.

Scripts (all free / deterministic)

  • scripts/build_html.py --config config.json --out index.html — config → a single self-contained HTML page exposing window.seek(tMs) (images base64-embedded).
  • scripts/capture.js --html index.html --out frames --fps 30 --duration 18000 — headless Chromium frame-steps seek() to a PNG per frame (auto-discovers a cached Playwright chromium, or pass --exe).
  • scripts/render.py --config config.json [--music bed.m4a] --out master.mp4 — orchestrates build → capture → FFmpeg (muxes the bed with -map 0:v:0 -map 1:a:0 when --music is given; $0 silent pass without it).
  • scripts/prep_assets.py crop in.jpg out.jpg / logo logo.jpg wordmark.png — the two fixes this format needs almost every time: crop baked-in white L/R margins off heroes, and key the white out of a black-on-white logo JPG to a transparent PNG.

See scripts/config.example.json for the full config shape (a real worked example — the Ruggable build; its warm beige backdrop, red caret and lo-fi music prompt are that demo's picks, never defaults).

Choices

These look values are the caller's creative choices (the video-format recipe asks the user):

  • Backdrop mood → endcard.bg, stack_bg, stack_tint. The demo used a warm beige radial gradient (#ecdfce → #d9c6ac) and a warm brown tint.
  • Music → the prompt for the optional bed (made upstream by create-music-elevenlabs). The demo used warm nylon acoustic guitar + Rhodes, relaxed lo-fi.
  • caret_color is the brand's accent colour (brand kit), not a choice.

When caret_color, endcard.bg or stack_tint is missing or still an unfilled <input:…> / <brand:…> placeholder, build_html.py uses a NEUTRAL value and prints a WARNING; an unfilled text/path field (hook, rooms, endcard.hero, …) is an error.

Config contract (bound by the recipe/orchestrator at remix time)

canvas, hook, grid_cols (3 columns × 6 distinct tiles), rooms (exactly 3 {image, caption} — the cards AND the features), stack_bg (blurred backdrop photo), optional stack_tint (CSS background over it), endcard (hero, wordmark, tagline, cta, bg). Craft rules the renderer assumes the inputs already honor: real brand assets only; 6 distinct tiles/column so the drift never repeats; intentional (never near-white) backdrops in the mood the caller picked; cropped hero margins; transparent-bg wordmark; captions/tagline/CTA are the brand's OWN approved copy (no invented claims).

Prereqs

node + playwright-core (or a cached Playwright chromium) and ffmpeg on PATH; python3 with Pillow (for prep_assets.py).

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Research supported advertising promises from a specific buyer's context, current product facts, customer language and observed ads. Turn them into static, video or copy ideas; match video ideas to actual recipes and save a product-scoped angle bank for write-video-ad-script. Product-led discovery can use verified facts without reviews. Reference persistence and reach are observations, not proof of performance.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

gooseworks-ai/goose-skills1.3천2026년 10월 19일 업데이트

Analyze ad campaign performance data (Google, Meta, LinkedIn) to identify what's working, what's wasting budget, and specific cut/scale/test recommendations. Runs statistical analysis, funnel diagnostics, and multi-channel budget reallocation with specific dollar-amount shift recommendations and scenario modeling.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

gooseworks-ai/goose-skills1.3천2026년 10월 19일 업데이트

For paid lead-gen and participant-recruitment ads, replaces vanity CPA with true CAC per qualified lead by joining ad-platform data with downstream funnel events, surfaces tracking gaps, and classifies every creative into Scale / Keep / Investigate / Cut.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

gooseworks-ai/goose-skills1.3천2026년 10월 19일 업데이트

The intake stage of a Meta ad harness. Researches the brand first, states what it assumes, and asks only what it cannot infer and what would change money, claims or legal exposure if guessed wrong — at most four questions a turn, in plain business language. Writes the brand's stable facts (ads/brand.md), the campaign brief, and a log of what was asked vs assumed. Use it when someone wants to run Meta ads and the brand's ad facts are not yet recorded.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

gooseworks-ai/goose-skills1.3천2026년 10월 19일 업데이트

Analyze the message match between your ads and landing pages. Checks if the promise in the ad copy carries through to the landing page headline, body, and CTA. Flags disconnects that kill conversion rates. Works with Google, Meta, and LinkedIn ads.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

gooseworks-ai/goose-skills1.3천2026년 10월 19일 업데이트

Turn a brand's facts, a campaign brief and the product into a one-minute Meta ad strategy with its reasoning — goal, audience, objective and placements, budget split, how many ads and how different they must be (generate 3x so the user can choose), the test frame, the success metric, and safety rules for the user to accept. Decides what launch-meta-ad-campaign then executes, and re-reads the strategy after a deep check to show which assumption changed. Use it after intake and before any creative is generated or any campaign is built.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

gooseworks-ai/goose-skills1.3천2026년 10월 19일 업데이트

gooseworks-ai의 스킬 모두 보기

이 스킬의 문제 신고