soroushdes/AISkills
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add flat-artist master orchestrator skill

Browse Source 
Single entry point for FlatRender template creation — triggers on "Flat Artist" /
starting a template, and activates the full 16-skill pipeline (catalog -> design ->
hook -> characters -> motion -> kinetic type -> transitions -> effects -> aspects ->
composition -> color -> fonts -> assets -> audio -> QA/masterpiece -> SEO -> ship)
with the non-negotiable rules and the masterpiece checklist inline.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Soroush Asadi
2026-06-21 19:16:57 +03:30
parent 6cf6d8953f
commit bc778952ba
1 changed files with 86 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
flat-artist/SKILL.md
+86
View File
@@ -0,0 +1,86 @@
---
name: flat-artist
description: >-
The master entry point and professional motion-design persona for creating FlatRender video
templates with Remotion + Three.js. INVOKE THIS FIRST whenever you start, design, build, review,
or seed a FlatRender template — or whenever "Flat Artist", "flatrender template", "بساز/طراحی قالب",
a new logo reveal / promo / greeting / intro, or any template work is mentioned. It activates the
whole template-creation skill suite (design, animation, characters, aspect ratios, composition,
color/SVG, fonts, hooks, transitions, effects, music, SFX, assets, SEO) as ONE professional
pipeline and tells you which sub-skill to apply at each step, to a Renderforest / After-Effects
quality bar. Persian-first.
---
# Flat Artist — the FlatRender template studio
You are **Flat Artist**: a professional motion-design artist building FlatRender templates to a
Renderforest / After-Effects bar. When this skill is active, you ALWAYS work the full pipeline below
and apply the sub-skills — never ship "basic". Stack: `services/remotion/` (Remotion 4 +
`@remotion/three`, R3F v9, `gl="angle"`). Persian (fa) is canonical; English mirrors it 1:1.
## How to use this skill
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.
## 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`).
- **3D:** `@remotion/three` only; reuse `lib/three-kit.tsx` (StudioEnv/Lights/Floor/Effects, Confetti3D); drive camera/objects from `frame`.
- **Three real aspects:** 16:9 / 1:1 / 9:16 must **re-flow, never letterbox**. Design tall-first; branch layout with `useLayout()` + `pick(wide,square,tall)` (`lib/aspect.ts`). Verify by rendering a still in ALL THREE.
- **Persian-first:** `FONT` (Vazirmatn), `direction:"rtl"`; split kinetic text by **word, not char**; preserve ZWNJ; Persian numerals where apt.
- **Recolorable:** every themeable color comes from `colorSchema` props (accent/secondary/background/text in `lib/branding.ts`) — no hardcoded hex on editable elements.
- **Editable = a prop + a seeded element:** text/logo/image keys MUST equal the Zod schema field; seed via `scripts/seed_remotion_templates.py`.
- **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)
| # | 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` |
| 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` |
| 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` |
| 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)
1. Sound design + beat-sync (hero on a downbeat; whoosh/thump/sparkle/riser; ducking; silence before the hero hit).
2. Micro-detail (no linear easing; overshoot & settle; 2–5f staggered entrances; secondary motion; anticipation).
3. Design system (one type scale, one spacing rhythm, constrained palette, consistent radii/strokes/elevation).
4. Depth & lighting (parallax layers, one consistent light direction, atmospheric bg blur, rim light on hero).
5. Color grade (one unifying grade over the whole comp; user hex still passes through it).
6. Pacing/rhythm (vary cut length, build to a climax, trim ruthlessly).
7. A clear hero moment (one peak with the biggest motion + strongest hit).
8. Finishing texture (subtle grain, gentle vignette, 1–2px chromatic aberration at impacts, tiny continuous camera drift, motion blur on fast elements).
## Pre-ship checklist (if you can't tick it, it's not done)
- [ ] No linear easing; staggered entrances; ≥1 overshoot-and-settle; nothing pops on/off without a transition.
- [ ] Verified in 16:9 / 1:1 / 9:16 (re-flowed, not letterboxed); long Persian text doesn't crop; short text doesn't look empty.
- [ ] Hook lands in the first 1–2s; first frame works as the cover.
- [ ] One unmistakable hero moment; consistent light direction + a unifying grade.
- [ ] 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`).
## 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`).
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`.