Asteri's banner
Asteri's profile picture

Asteri

@Asteri_eth • 3,439 subscribers

AI writer | Prediction markets researcher | the best vibe and fine content creator, as well as shitposts 🌌

Shorts

this is the whole f*cking motion studio in 20 repos 20 open-source stacks for Opus 5.5, one job each engines. vector. 3D. sound. delivery 01 Remotion → video engine 02 HyperFrames → html renderer 03 GSAP → timeline control 04 Motion Canvas → explainer engine 05 Theatre.js → keyframe editor 06 Motion → ui motion 07 Lottie → vector player 08 Rive → state machines 09 Manim → math explainers 10 Figma Context MCP → design import 11 three.js → 3d scene 12 React Three Fiber → react 3d 13 Blender MCP → blender desk 14 postprocessing → film look 15 ShaderGradient → gradient lab 16 Cap → screen capture 17 Kokoro → voiceover 18 whisper.cpp → auto captions 19 OpenCut → final cut 20 FFmpeg → export desk Opus writes the scenes and the code. these repos are the camera, the lights and the edit bay. the loop: brief → storyboard → animate → render → ship bookmark this, then spin up your own launch video studio ↓

this is the whole f*cking motion studio in 20 repos 20 open-source stacks for Opus 5.5, one job each engines. vector. 3D. sound. delivery 01 Remotion → video engine 02 HyperFrames → html renderer 03 GSAP → timeline control 04 Motion Canvas → explainer engine 05 Theatre.js → keyframe editor 06 Motion → ui motion 07 Lottie → vector player 08 Rive → state machines 09 Manim → math explainers 10 Figma Context MCP → design import 11 three.js → 3d scene 12 React Three Fiber → react 3d 13 Blender MCP → blender desk 14 postprocessing → film look 15 ShaderGradient → gradient lab 16 Cap → screen capture 17 Kokoro → voiceover 18 whisper.cpp → auto captions 19 OpenCut → final cut 20 FFmpeg → export desk Opus writes the scenes and the code. these repos are the camera, the lights and the edit bay. the loop: brief → storyboard → animate → render → ship bookmark this, then spin up your own launch video studio ↓

49,103 views

someone packed 637 motion design techniques into a skill Claude Code can actually read if you make launch videos alone, steal this it's an open source field guide + agent skill for Claude Code and Codex what's inside: → mask reveals that bring your product onto the screen → kinetic type for headlines that need to hit → cursor moves and clicks that walk people through your UI → count-ups and chart races for your metrics → dashed flows and path diagrams for agent systems → parallax, camera moves and 3D card flips for depth → 11 recipes that stitch it all into demos and launch videos the part that matters: every effect has its own card with timing, easing, parameter ranges, good and bad examples and ready prompts so your agent builds from real numbers, not vibes 128 of them already ship as reference clips you can re-render with your own text the loop: describe the scene → pick the technique → swap in your content → render → check the frames try it on your next launch: one screenshot → one click → a 10-second demo bookmark this, repo below ↓

someone packed 637 motion design techniques into a skill Claude Code can actually read if you make launch videos alone, steal this it's an open source field guide + agent skill for Claude Code and Codex what's inside: → mask reveals that bring your product onto the screen → kinetic type for headlines that need to hit → cursor moves and clicks that walk people through your UI → count-ups and chart races for your metrics → dashed flows and path diagrams for agent systems → parallax, camera moves and 3D card flips for depth → 11 recipes that stitch it all into demos and launch videos the part that matters: every effect has its own card with timing, easing, parameter ranges, good and bad examples and ready prompts so your agent builds from real numbers, not vibes 128 of them already ship as reference clips you can re-render with your own text the loop: describe the scene → pick the technique → swap in your content → render → check the frames try it on your next launch: one screenshot → one click → a 10-second demo bookmark this, repo below ↓

43,570 views

Opus 5.5 is f*cking insane at UI design 20 tools to build your own UI design studio with Opus 5.5 landing pages. dashboards. app screens. full design systems. collect the references, set the tokens, build the components, check every state, ship. 01 shadcn/ui ▸ copy components into your repo and own the code 02 Frontend Design skill ▸ push your agent past templated default layouts 03 Tailwind CSS ▸ style everything with utility classes the agent can read 04 Radix Primitives ▸ get accessible dialogs, menus and popovers out of the box 05 Motion ▸ add hover, press and layout micro-interactions 06 Magic UI ▸ drop in animated landing page components 07 Lucide ▸ keep every icon in one consistent style 08 Figma MCP ▸ hand your agent the real frame, variables and components 09 Mobbin ▸ study real app screens before you design (free tier) 10 Laws of UX ▸ ground layout decisions in proven principles 11 Google Fonts ▸ choose typefaces for headlines and readable body text 12 Fontshare ▸ get free display fonts that don't look like everyone else's 13 Realtime Colors ▸ preview your palette on a real page before committing 14 WebAIM Contrast Checker ▸ make sure your text actually passes contrast 15 Storybook ▸ build and review every component state in isolation 16 Playwright ▸ let the agent screenshot its own UI and fix what it sees 17 Chrome DevTools MCP ▸ let the agent inspect the live page, console and performance 18 Unsplash ▸ find free photos for heroes and mockups 19 Squoosh ▸ compress images before they slow the page down 20 Vercel ▸ ship a preview link for every change the loop: write the brief → collect references → set the tokens → build the components → design every state → screenshot and fix → ship start with one screen. make every element earn its place. save this, then read the full guide for Opus 5.5 UI Engineering ↓

Opus 5.5 is f*cking insane at UI design 20 tools to build your own UI design studio with Opus 5.5 landing pages. dashboards. app screens. full design systems. collect the references, set the tokens, build the components, check every state, ship. 01 shadcn/ui ▸ copy components into your repo and own the code 02 Frontend Design skill ▸ push your agent past templated default layouts 03 Tailwind CSS ▸ style everything with utility classes the agent can read 04 Radix Primitives ▸ get accessible dialogs, menus and popovers out of the box 05 Motion ▸ add hover, press and layout micro-interactions 06 Magic UI ▸ drop in animated landing page components 07 Lucide ▸ keep every icon in one consistent style 08 Figma MCP ▸ hand your agent the real frame, variables and components 09 Mobbin ▸ study real app screens before you design (free tier) 10 Laws of UX ▸ ground layout decisions in proven principles 11 Google Fonts ▸ choose typefaces for headlines and readable body text 12 Fontshare ▸ get free display fonts that don't look like everyone else's 13 Realtime Colors ▸ preview your palette on a real page before committing 14 WebAIM Contrast Checker ▸ make sure your text actually passes contrast 15 Storybook ▸ build and review every component state in isolation 16 Playwright ▸ let the agent screenshot its own UI and fix what it sees 17 Chrome DevTools MCP ▸ let the agent inspect the live page, console and performance 18 Unsplash ▸ find free photos for heroes and mockups 19 Squoosh ▸ compress images before they slow the page down 20 Vercel ▸ ship a preview link for every change the loop: write the brief → collect references → set the tokens → build the components → design every state → screenshot and fix → ship start with one screen. make every element earn its place. save this, then read the full guide for Opus 5.5 UI Engineering ↓

11,443 views

PEOPLE ARE BURNING THROUGH THEIR TOKENS IN 30 MINUTES AND BLAMING CLAUDE The problem isn’t with the model. The problem is how they’re using it A simple formatting question they set Max effort The 40th message in the chat the model re-reads the entire history from the beginning Every single time. Using your tokens Low effort costs 10 times less than Max Just get into the habit of routing tasks by level and your limit won’t run out by noon Tokens don’t disappear. You’re just paying for unnecessary processing

PEOPLE ARE BURNING THROUGH THEIR TOKENS IN 30 MINUTES AND BLAMING CLAUDE The problem isn’t with the model. The problem is how they’re using it A simple formatting question they set Max effort The 40th message in the chat the model re-reads the entire history from the beginning Every single time. Using your tokens Low effort costs 10 times less than Max Just get into the habit of routing tasks by level and your limit won’t run out by noon Tokens don’t disappear. You’re just paying for unnecessary processing

15,752 views

Videos

Asteri_eth's profile picture

this is straight up f*cking gold 20 open-source GitHub repos stacked into one motion design empire. 5 floors, ~26K stars combined, all of them plug into Claude Code: floor 01 · taste: > LottieFiles/motion-design-skill: timing, easing, choreography before a single line of animation code > iart-ai/motion-design-skills: timing, type, color, composition, logos, backgrounds > frankxai/awesome-motion-design-agent-skills: curated GSAP, Motion, Remotion, Lottie, Rive + 5 installable skills > dylantarre/animation-principles: Disney's 12 principles split into 144 skills floor 02 · web motion: > whaleyxbt/claude-motion: taste, checks its own frames, ships with a sound engine > freshtechbro/claudedesignskills: Three.js, GSAP, R3F, Babylon as Claude Code plugins > 199-biotechnologies/motion-dev-animations-skill: springs, scroll effects, 120fps from plain English > greensock/gsap-skills: official GSAP skills, 14K+ stars floor 03 · video in code: > remotion-dev/skills: Remotion's own agent skills, one npx install > haidrrrry/claude-remotion-skill: easing, grading, captions, then it checks the render itself > Liamrjohnston/remotion-motion-graphics-skill: kinetic text, camera moves, terminal demos > wilwaldon/Claude-Code-Video-Toolkit: Remotion, Manim, screen capture, FFmpeg in one map floor 04 · reels & launch: > iart-ai/motion-skills: 55 skills in 18 packs, kinetic type to WebGL > kaventro/motion-designer: rebuilds your real app UI in HTML and cuts it to the music > Sunwood-ai-labs/hyperframes-motion-reel-skill: one-line theme into a beat-synced reel, 120 BPM, 60 FPS > charlie947/motion-graphics-skills: 15 launch-grade skills, every frame is code floor 05 · opus 5.5 pipeline: > howseen-ai/claude-motion-design: pure code video, HTML + Playwright + ffmpeg > tuzhechen2005/opus-video-skills: one skill per style, hand-painted watercolor or kinetic type > siyuanfeng636-cpu/agentic-motion-graphics: voiceover runs the clock, Whisper timestamps drive every cut > Lob0Garou/opus-visual-motion-engine: deterministic seek(t), automated render QA, frame-exact MP4 start on floor 01. don't skip floors

Asteri

15,185 views • 19 days ago

Asteri_eth's profile picture

Opus 5.5 is f*cking insane at UI design 20 tools to build your own UI design studio with Opus 5.5 landing pages. dashboards. app screens. full design systems. collect the references, set the tokens, build the components, check every state, ship. 01 shadcn/ui ▸ copy components into your repo and own the code 02 Frontend Design skill ▸ push your agent past templated default layouts 03 Tailwind CSS ▸ style everything with utility classes the agent can read 04 Radix Primitives ▸ get accessible dialogs, menus and popovers out of the box 05 Motion ▸ add hover, press and layout micro-interactions 06 Magic UI ▸ drop in animated landing page components 07 Lucide ▸ keep every icon in one consistent style 08 Figma MCP ▸ hand your agent the real frame, variables and components 09 Mobbin ▸ study real app screens before you design (free tier) 10 Laws of UX ▸ ground layout decisions in proven principles 11 Google Fonts ▸ choose typefaces for headlines and readable body text 12 Fontshare ▸ get free display fonts that don't look like everyone else's 13 Realtime Colors ▸ preview your palette on a real page before committing 14 WebAIM Contrast Checker ▸ make sure your text actually passes contrast 15 Storybook ▸ build and review every component state in isolation 16 Playwright ▸ let the agent screenshot its own UI and fix what it sees 17 Chrome DevTools MCP ▸ let the agent inspect the live page, console and performance 18 Unsplash ▸ find free photos for heroes and mockups 19 Squoosh ▸ compress images before they slow the page down 20 Vercel ▸ ship a preview link for every change the loop: write the brief → collect references → set the tokens → build the components → design every state → screenshot and fix → ship start with one screen. make every element earn its place. save this, then read the full guide for Opus 5.5 UI Engineering ↓

Asteri

11,443 views • 23 days ago

Asteri_eth's profile picture

People already built a browser agent, a Claude Code bridge and a LangGraph router on top of Jev. Here are all 10 repos. If you have API access and don't know where to start, save this: 1. jev-browser Real browser control through MCP, CLI or as a library. At every step Jev answers two things: which element to touch, and whether the goal is done or the run is stuck. > 2. jev-browser-agent Picks the operation and the target in a single request, around a second per step. Anything under 0.6 confidence goes up to a bigger model or back to you. > 3. typesafe-jev-bridge OpenAI-compatible bridge with zero dependencies. Typed yes/no, choice and score answers inside Claude Code, Cursor, Cline or any OpenAI SDK, via CLI or HTTP. > 4. pilot-typesafeai-jev Jev wired into LangGraph and Deep Agents. Three questions in one request, plain code chooses the route, and the chat model only spends tokens on the route that won. > 5. building-with-jev-skill Agent skill for writing code that calls Jev. How to phrase questions, structure state, set thresholds, and debug a question that keeps answering wrong. > 6. jev-skill Guided setup and eval workflows. Checks what's installed without changing anything, never swaps your provider behind your back, never makes up probabilities. > 7. awesome-jev (yibie) What people actually shipped with Jev, sourced and sorted by category, with the limitations written down for each entry. > 8. awesome-typesafe-jev SDKs, live demos, agent tools and independent evals. Shows where every vendor number comes from. > 9. awesome-jev-by-typesafe Use cases, patterns and starter code backed by evidence. The 70 to 500 ms latency figure is labeled vendor-reported, not measured. > 10. awesome-jev (cobanov) Biggest catalogue so far: SDKs for Go, Java and JS, MCP connectors, guardrail experiments and studies. > Copy these complete Jev blueprints - then read full Jev setup below ↓

Asteri

16,629 views • 1 month ago

No more content to load