refactor: bundle the whole template suite under flat-artist/ + fix references
flat-artist is now the single container: all 16 template skills + the R&D references/ moved inside flat-artist/. Cross-references updated — the orchestrator points to bundled `<name>/SKILL.md`, sub-skills point to `../<name>/SKILL.md`, and the R&D report path is relative. README catalog updated. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
+24
-21
@@ -19,9 +19,12 @@ and apply the sub-skills — never ship "basic". Stack: `services/remotion/` (Re
|
||||
`@remotion/three`, R3F v9, `gl="angle"`). Persian (fa) is canonical; English mirrors it 1:1.
|
||||
|
||||
## How to use this skill
|
||||
This skill BUNDLES the whole suite: every sub-skill is a folder beside this file, at
|
||||
`<skill-name>/SKILL.md` (relative to this `flat-artist/SKILL.md`). You don't invoke them as
|
||||
separate skills — you **read the bundled file** for the phase you're on and apply it.
|
||||
1. Read this file's pipeline + rules.
|
||||
2. At each phase, **invoke the named sub-skill** with the Skill tool (or apply its guidance if already loaded). They live in the Gitea `AISkills` repo and in this project's `.claude/skills/`.
|
||||
3. The deep R&D reference is `AISkills/references/design-motion-rnd.md` (trends, craft, asset pipeline, masterpiece + platform playbook) — consult it for art direction and the masterpiece bar.
|
||||
2. At each phase, open the bundled sub-skill at **`<skill-name>/SKILL.md`** (e.g. `motion-design-principles/SKILL.md`) and apply it.
|
||||
3. The deep R&D reference is **`references/design-motion-rnd.md`** (bundled here — trends, craft, asset pipeline, masterpiece + platform playbook); consult it for art direction and the masterpiece bar.
|
||||
|
||||
## Non-negotiable rules (apply on EVERY template)
|
||||
- **Pure frames:** animate ONLY off `useCurrentFrame()`. Never `useFrame` (R3F), `Math.random()`, `Date.now()`, `setState`/`useEffect`-driven motion. Determinism via `rand(i)` (`lib/anim.ts`).
|
||||
@@ -33,27 +36,27 @@ and apply the sub-skills — never ship "basic". Stack: `services/remotion/` (Re
|
||||
- **Vendored assets (Iran iron rule):** every asset committed into `services/remotion/public/` + `staticFile()`; NEVER a CDN URL at render. License firewall (CC0/commercial-ok, tracked in `assets.json`).
|
||||
- **Finish it:** a masterpiece = the 8 layers below, not one big move. Render → LOOK → refine.
|
||||
|
||||
## The pipeline (work in order; invoke the skill named at each step)
|
||||
## The pipeline (work in order; read the bundled skill named at each step)
|
||||
|
||||
| # | Phase | Apply skill |
|
||||
|---|---|---|
|
||||
| 0 | **Scope & storyboard** — pick the template TYPE/pattern; confirm a storyboard with the user before building anything character- or scene-heavy | `remotion-template-catalog` |
|
||||
| 1 | **Art direction** — choose ONE coherent style + palette from current trends | `remotion-design-styles` + R&D report |
|
||||
| 2 | **Hook** — design the scroll-stopping first 1–3s (it's the cover frame) | `video-hooks` |
|
||||
| 3 | **Characters** (if any) — build/rig from SVG or 3D primitives | `remotion-character-design` |
|
||||
| 0 | **Scope & storyboard** — pick the template TYPE/pattern; confirm a storyboard with the user before building anything character- or scene-heavy | `remotion-template-catalog/SKILL.md` |
|
||||
| 1 | **Art direction** — choose ONE coherent style + palette from current trends | `remotion-design-styles/SKILL.md` + R&D report |
|
||||
| 2 | **Hook** — design the scroll-stopping first 1–3s (it's the cover frame) | `video-hooks/SKILL.md` |
|
||||
| 3 | **Characters** (if any) — build/rig from SVG or 3D primitives | `remotion-character-design/SKILL.md` |
|
||||
| 4 | **Build the composition** — lib helpers + `three-kit` for 3D | (this skill) |
|
||||
| 5 | **Motion** — easing/timing/stagger/secondary motion (the foundation) | `motion-design-principles` |
|
||||
| 6 | **Kinetic type** — animate the hero/caption text (Persian word-split) | `kinetic-typography` |
|
||||
| 7 | **Transitions** — scene-to-scene choreography, seamless | `scene-transitions` |
|
||||
| 8 | **Effects** — grain, bokeh, light-leaks, sparkles, glow, vignette (deterministic) | `particles-and-effects` |
|
||||
| 9 | **Aspect re-flow** — make it truly fit 16:9/1:1/9:16 | `remotion-aspect-ratios` |
|
||||
| 10 | **Composition & elements** — hierarchy, logo/image/copy, reveal pacing | `remotion-template-composition` |
|
||||
| 11 | **Color / live recolor** — wire color props + SVG color preview | `remotion-svg-colors` |
|
||||
| 12 | **Fonts** — pick Persian-first type by role | `persian-fonts` |
|
||||
| 13 | **Assets / footage** — source, license, prepare, composite | `asset-sourcing` |
|
||||
| 14 | **Music + SFX** — beat-sync reveals, place SFX, duck | `remotion-music-picker` + `remotion-sound-effects` |
|
||||
| 5 | **Motion** — easing/timing/stagger/secondary motion (the foundation) | `motion-design-principles/SKILL.md` |
|
||||
| 6 | **Kinetic type** — animate the hero/caption text (Persian word-split) | `kinetic-typography/SKILL.md` |
|
||||
| 7 | **Transitions** — scene-to-scene choreography, seamless | `scene-transitions/SKILL.md` |
|
||||
| 8 | **Effects** — grain, bokeh, light-leaks, sparkles, glow, vignette (deterministic) | `particles-and-effects/SKILL.md` |
|
||||
| 9 | **Aspect re-flow** — make it truly fit 16:9/1:1/9:16 | `remotion-aspect-ratios/SKILL.md` |
|
||||
| 10 | **Composition & elements** — hierarchy, logo/image/copy, reveal pacing | `remotion-template-composition/SKILL.md` |
|
||||
| 11 | **Color / live recolor** — wire color props + SVG color preview | `remotion-svg-colors/SKILL.md` |
|
||||
| 12 | **Fonts** — pick Persian-first type by role | `persian-fonts/SKILL.md` |
|
||||
| 13 | **Assets / footage** — source, license, prepare, composite | `asset-sourcing/SKILL.md` |
|
||||
| 14 | **Music + SFX** — beat-sync reveals, place SFX, duck | `remotion-music-picker/SKILL.md` + `remotion-sound-effects/SKILL.md` |
|
||||
| 15 | **QA — masterpiece gate** — the 8 layers + pre-ship checklist (below) | (this skill) |
|
||||
| 16 | **SEO & taxonomy** — category, tags, keywords, slug, copy, related | `flatrender-template-seo` |
|
||||
| 16 | **SEO & taxonomy** — category, tags, keywords, slug, copy, related | `flatrender-template-seo/SKILL.md` |
|
||||
| 17 | **Ship** — render 3 thumbnails + preview, seed, deploy (copy assets into the running container + restart so Next re-scans `public/`) | (this skill) |
|
||||
|
||||
## The masterpiece bar (8 production-value layers — finish ALL)
|
||||
@@ -74,13 +77,13 @@ and apply the sub-skills — never ship "basic". Stack: `services/remotion/` (Re
|
||||
- [ ] Subtle grain/vignette; frame feels alive; (audio: beat-synced + ducked if present).
|
||||
- [ ] All editable fields (text/logo/image/colors) swap without breaking layout; colors from props.
|
||||
- [ ] Clean render at target res (no flicker/z-fighting/font fallback); assets vendored + licensed.
|
||||
- [ ] Category/tags/keywords/slug + fa+en copy set (`flatrender-template-seo`).
|
||||
- [ ] Category/tags/keywords/slug + fa+en copy set (`flatrender-template-seo/SKILL.md`).
|
||||
|
||||
## Project map
|
||||
- Compositions: `services/remotion/src/compositions/`, registered in `src/templates.tsx` (`TemplateDef`, all 3 aspects).
|
||||
- Helpers: `lib/anim.ts`, `lib/aspect.ts` (`useLayout`/`pick`), `lib/branding.ts` (`colorSchema`/`BRAND`), `lib/fonts.ts` (`FONT`), `lib/three-kit.tsx`.
|
||||
- Seed: `scripts/seed_remotion_templates.py` (containers/projects/scenes/colors + `MEDIA` for image fields).
|
||||
- Render checks: `npx remotion still src/index.ts "<Comp>-16x9|1x1|9x16" out/x.png --frame=NN`.
|
||||
- Skills + R&D: Gitea `AISkills` repo (`references/design-motion-rnd.md`).
|
||||
- Bundled here: each sub-skill at `<name>/SKILL.md`; the deep R&D at `references/design-motion-rnd.md`.
|
||||
|
||||
Related (the suite this orchestrates): `remotion-template-catalog`, `remotion-design-styles`, `video-hooks`, `remotion-character-design`, `motion-design-principles`, `kinetic-typography`, `scene-transitions`, `particles-and-effects`, `remotion-aspect-ratios`, `remotion-template-composition`, `remotion-svg-colors`, `persian-fonts`, `asset-sourcing`, `remotion-music-picker`, `remotion-sound-effects`, `flatrender-template-seo`.
|
||||
Bundled sub-skills (read each at its `SKILL.md`): `remotion-template-catalog/SKILL.md`, `remotion-design-styles/SKILL.md`, `video-hooks/SKILL.md`, `remotion-character-design/SKILL.md`, `motion-design-principles/SKILL.md`, `kinetic-typography/SKILL.md`, `scene-transitions/SKILL.md`, `particles-and-effects/SKILL.md`, `remotion-aspect-ratios/SKILL.md`, `remotion-template-composition/SKILL.md`, `remotion-svg-colors/SKILL.md`, `persian-fonts/SKILL.md`, `asset-sourcing/SKILL.md`, `remotion-music-picker/SKILL.md`, `remotion-sound-effects/SKILL.md`, `flatrender-template-seo/SKILL.md`.
|
||||
|
||||
Reference in New Issue
Block a user