I Was Solving the Same 10 Problems From Memory
Every time I wrote a landing page, translated a section into Persian, or rendered a video, I was reinventing the wheel. The knowledge was in my head. It needed to be in a system anyone can use.
Three months ago I wrote the same translation quality checklist three separate times. Once for the waitlist, once for the founder story, once for the features pages. Each time I "discovered" the same rules about Persian sentence completeness. Each time I forgot half by next week.
The same pattern everywhere. SEO metadata — re-checking hreflang. Content writing — re-discovering banned phrases come back. Analytics — re-implementing consent from scratch. The problem was not capability. It was repetition without a system.
So I built one. 10 skills. Each a complete workflow: mission, scope, rules, step-by-step instructions, verification gates, and output templates. Every rule comes from a mistake I made. Every gate comes from a failure I shipped.
A prompt is a one-time instruction. A skill is a repeatable workflow that gets better every time you use it.
Create Videos From HTML. No After Effects.
Write an HTML file with CSS animations. Puppeteer captures each frame. FFmpeg encodes them into MP4. Four aspect ratios. One command.
This is the skill I use most. I stopped exporting from Figma and importing into Premiere. The animations are already in HTML and CSS on the website. Why not just record the browser?
Here is the launch video we built with this pipeline. Every frame rendered from HTML. Every animation controlled by CSS. The virtual clock advances the timeline, Puppeteer screenshots each frame, FFmpeg encodes the result:
The best video tool is the one you already have: a browser.
Install It. 3 Steps.
Node.js, Puppeteer, FFmpeg. That is the entire stack. No After Effects. No Premiere. No Figma export.
Clone the repo
git clone https://github.com/ShayanSpiel/Skills.git
The repo has 10 skills, rendering scripts, HTML templates, and fill-in-your-own canvases.
Install dependencies
npm install puppeteer && brew install ffmpeg
Puppeteer downloads headless Chrome. FFmpeg handles the encoding. Both are free.
Render your first video
bash scripts/render-all.sh b 30
One HTML file. Four aspect ratios. Output lands in output/.
Every skill follows the same pattern: read the SKILL.md, fill in the templates for your product, use the workflow. The full customization guide walks you through adapting every skill.
MiMo 2.5 Wrote the Code. I Directed the Work.
This entire video pipeline was built with MiMo 2.5 — the same model that designed the 404 page animation you see on this site.
The workflow is not "prompt AI, get video." The workflow is: I define the scenes and timing, MiMo 2.5 writes the HTML/CSS animation, I review the output, Puppeteer renders the frames. The AI does not guess what the video should look like. I tell it. It writes the code. I verify.
This is the gates-not-models pattern applied to video production. The creative direction is mine. The execution is MiMo 2.5. The quality gates are the same 30 checks I use for everything: does the hook land, is the text readable, does the CTA connect to the right page, are the colors from the design system.
MiMo 2.5 writes the code. I direct the work. The gates decide what ships. That is the workflow.
This Is What MiMo 2.5 Can Design
Open /404/ on this site. Every animation — orbits, radar, particles, glitch — was generated by MiMo 2.5 from a single prompt describing the design tokens and motion contracts.
The 404 page is the best showcase of what MiMo 2.5 can do with design. It uses the exact same CSS custom properties as the rest of the site. The same Outfit font. The same Gruvbox Dark palette. The same border-radius tokens. The only difference is the motion: CSS keyframes driving orbit speeds, radar rotations, particle floats, and glitch effects.
I gave MiMo 2.5 the design system tokens, the animation keyframes, and one instruction: make the 404 page feel like an AI command center that lost connection. It wrote 400 lines of HTML/CSS/JS. I reviewed. It shipped. The same pipeline works for any page on the site.
The Full Stack. One Repo.
Each skill is a complete workflow: mission, scope, core rules, step-by-step instructions, verification gates, and output rules. All customizable for your product.
Use These Skills With Your AI Agent
Load a SKILL.md into your LLM context. The skill becomes the agent workflow. No custom framework required.
Pick a skill Read the SKILL.md. Every skill starts with “Customize This Skill” — what to change for your product. Browse all 10.
Fill in the templates ICP canvas, glossary template, design token reference, video scene template. Structured frameworks with examples, not blank docs.
Load into your agent Paste the SKILL.md into your LLM context window. The agent now has the full workflow: mission, rules, verification steps. This is how SpielOS runs — every agent operation goes through a skill.
These are not demos. These are the systems behind SpielOS. Every rule comes from a mistake. Every gate comes from a failure. Now they are public.
Clone the repo, fill in your product details, and start shipping.
Clone the Skills repo