The setup, and three prompts
Two of the five need wiring in. The other three you just visit. This prompt does the wiring, works out which computer you are on first, and stops to check with you at each step instead of installing a pile of things you did not ask for.
Works in Claude Code or Codex
All three prompts run in either. Where a command needs to know which one you are using, it says so — and where it does not, that is because these are just files and folders on your own machine.
I want to set up a few free resources so you can use them when you build things for me. Work out which operating system I am on first and use the right commands for it — do not assume. Do these one at a time and tell me plainly whether each worked before moving on. 1. The skills directory. Check whether npx is available (it comes with Node). If it is not, tell me how to install Node on MY operating system and stop until I have done it. Then explain in one sentence what "npx skills add owner/repo" does before I run anything. 2. The UI component library. Run: npx @21st-dev/cli@latest init --client claude (If I am using Codex instead, use --client codex.) It will ask me to sign in. Before it does, tell me that the free tier lets me copy two components a day, so we should be choosy rather than browsing. 3. A folder for assets. Make a folder called assets in this project with three subfolders: lottie, video and audio. Put a README.md in it that says which site each type came from and reminds me that Mixkit stock video and Mixkit templates have DIFFERENT licences. 4. Write me a short note called my-resources.md listing what you set up, the exact command for each, and how I would undo it. Do not install anything I have not listed. Do not add any other connectors.
Now the two you will actually use week to week. The first finds you a ready-made skill instead of writing the same brief for the ninth time.
I need help with this job: [describe the job in one sentence — e.g. "writing product descriptions that match my brand voice"]. Go to skills.sh and find me the two or three best existing skills for it. For each one tell me: - what it actually does, in plain English - who published it and when it was last updated - the exact install command, which will look like: npx skills add owner/repo - one honest reason I might NOT want it Then wait. Do not install anything until I pick one. Once I pick, install it, then show me a small real example of it working on my actual job — not a demo. If the skill turns out to be thin or badly written, tell me straight and we will write our own instead.
And this is the one that earns its place. Point it at a page that looks like a robot made it.
This page looks like AI built it and I want to fix that. Here is the page: [paste the URL or the file path]. Work through it in this order and check with me between steps. 1. Tell me what specifically makes it look generic. Be blunt and be concrete — name the font, the spacing, the colour choices, the layout pattern. Do not say "it could be more modern". 2. Pick ONE aesthetic direction and commit to it. Describe it to me in two sentences before you touch anything. If I hate it we pick another one, but we are not doing a bit of everything. 3. Now rebuild the parts that need it. If I have the 21st MCP connected, use it to pull a real component — but only one or two, because the free tier gives me two copies a day and I do not want them spent on something I will delete. 4. If a small animation would genuinely help (a loading state, an empty state, a success tick), get a free Lottie from lottiefiles.com/free-animations. It downloads as a JSON file. Install @lottiefiles/dotlottie-react and render it properly — do not fake it with CSS. If an animation would just be decoration, say so and skip it. 5. Show me before and after side by side, and tell me honestly whether it is actually better or just different.
Why step 1 of that prompt matters
Asking an AI to "make this look better" gets you a slightly different shade of the same thing, because it has no idea what is wrong with it. Making it name the problem out loud first — the font, the spacing, the layout it keeps reaching for — is what turns it into an actual redesign.
The five sites
In the order I named them. Everything below was read off the live site on 08/09/2026, including the prices — I am not repeating a number I have not looked at.
skills.sh
In the videoFree, no sign-upWhat it is: A directory of ready-made skills you can drop into an AI coding agent. A skill is a folder of instructions that teaches your agent how to do one job properly — so instead of writing the same three-paragraph brief every time, you install it once. Its own description: "Skills are reusable capabilities for AI agents. Install them with a single command." skills.sh
Checked 08/09/2026: Made by Vercel, not Anthropic — the footer says "Made with care by Vercel" and it is open source. No account, no pricing page, nothing to pay. Installing is one line: npx skills add owner/repo. And she is right that it is not Claude-only — the site lists Claude Code, Codex, Cursor, GitHub Copilot, Windsurf, Gemini, Cline and several more.
What to watch out for: the site does not publish a total, and the big number on its leaderboard — 1,381,768 — is total installs, not skills. There are at least twenty thousand skill pages in its sitemap, so "tens of thousands" is the honest way to put it. And because anyone can publish, quality swings wildly. Read what a skill actually contains before you install it — it is a folder of instructions your agent will follow, so treat it like hiring someone, not like downloading a font.
mcp.so
In the videoFree, no sign-upWhat it is: A marketplace of connectors — the things that give an AI access to your actual tools rather than just its own knowledge. Its own line: "Discover useful MCP servers and clients." Sorted into plain categories like Developer Tools, Cloud, Memory, Media & Design, and each one has a copy-paste config on its page. mcp.so
Checked 08/09/2026: Live, free, and no sign-up to browse. About 18,600 connectors listed. I have picked this one over the bigger directories on purpose — it is the only one organised for someone who does not already know what they are looking for.
What to watch out for: it is not the biggest, and I do not want that claim floating around because of me. Glama lists 83,883 and PulseMCP lists 21,950 — both read on 08/09/2026 — but they are firehoses. mcp.so also publishes no count of its own; the 18,600 is me counting its sitemap. If you want a curated set instead of a marketplace, I have 25 connectors I have actually checked, which is a shorter and safer place to start.
21st.dev
In the videoFree tier is cappedWhat it is: A library of ready-made interface pieces — buttons, pricing tables, heroes, whole page templates, plus shader and gradient backgrounds. Its own line: "The living library of interfaces". This is the one that takes a page from AI-generic to something that looks designed. 21st.dev
Checked 08/09/2026: The 12,000+ she says on camera is right — it is on the homepage, in the page title and in the site's own structured data: "12,000+ crafted React components, templates, and shadcn themes." Shaders and gradients are real sections, though technically they are categories inside that 12,000 rather than extra on top.
What to watch out for — this is the one I need to correct. It is not free the way the other four are. Browsing is free and you get two component copies a day, and that is the whole free tier. Paid starts at $6 a month billed yearly (Builder), or $15 a month for the version with AI credits. Two a day is genuinely enough to build a page over a week — but it is a cap, and you will hit it if you go browsing. There is also a connector so your agent can pull components directly: npx @21st-dev/cli@latest init --client claude (swap in codex if that is what you use). If you set up the old "Magic MCP" at any point, it is retired and the old keys were reset — redo it with the line above.
LottieFiles
In the videoFree library, paid appWhat it is: Small animated graphics — loading spinners, success ticks, empty states, icons that move. They download as a JSON file, which is why they are so useful here: an animation your agent can actually read, drop into a page and control, rather than a video it has to be handed. lottiefiles.com/free-animations
Checked 08/09/2026: The free library is real and it is large — the free-animations section runs to over three thousand pages. The licence genuinely allows commercial use with no attribution: their Lottie Simple License grants the right to "download, reproduce, modify, publish, distribute... including for commercial purposes" and states that "use of Files without attributing the creator(s) is permitted".
What to watch out for: click Pricing and you will not find a free plan — the cheapest is $19.99 per user per month, billed annually. The free part is the animation library, not the editor and hosting product, and if you have seen a "600,000+ animations" figure, that is their premium library, not the free one. Two conditions in the small print matter: the licence is share-alike, so anything you publish that contains a free Lottie carries the same terms onward; and you may not compile their files into a competing library. Neither affects normal use on your own site.
Mixkit
In the videoFree, no sign-upWhat it is: Free video templates, stock clips, music and sound effects. "Free assets for your next video project." Owned by Envato, the people behind Envato Elements, which is why the quality is a step above most free stock. mixkit.co
Checked 08/09/2026: All four apps she names have a real, live section — Premiere Pro, After Effects, Final Cut Pro and DaVinci Resolve, with 851 templates across them. Also 46,000+ clips, 1,000+ music tracks and 3,000+ sound effects. The template licence is as good as it sounds: "can be used in your commercial and non-commercial projects, for free... Attribution is not required", and no account needed. DaVinci Resolve has the thinnest selection of the four.
What to watch out for — there are two different licences and only one of them is the generous one. The templates are free for commercial work, as above. Some of the stock video sits under a Restricted License that bans commercial projects, advertising, company social posts and YouTube videos. Check which licence a clip is under before you put it in client work — it is on the download page and it takes five seconds. Neither licence lets you bundle the files up and sell them on as a pack. And see the last section for the bit of the pro tip that does not survive contact with reality.
What "free" actually means on each
I called all five free. Three of them straightforwardly are. Two are not, in ways that only show up after you have started building — which is the worst time to find out. Here is the real picture, read off the pricing pages on 08/09/2026.
✅ Actually free
- skills.sh — no account, no pricing page, nothing to pay
- mcp.so — free to browse, no sign-up. The connectors themselves may want their own keys
- Mixkit templates — free for commercial work, no attribution, no account
⚠ Free with a catch
- 21st.dev — browsing free, but two component copies a day. Paid from $6/month billed yearly
- LottieFiles — the animation library is free and commercially licensed, but the product starts at $19.99 per user per month and there is no free plan on the pricing page
The licence bit, since this is client work
Mixkit has two licences and they are very different. Templates: commercial use, no attribution, fine. Some stock video: a Restricted License that bans commercial projects, advertising, company social posts and YouTube. The licence is shown on the download page — look at it before it goes in a client deliverable.
LottieFiles' free licence is share-alike. Anything you publish containing a free Lottie carries the same terms forward. Irrelevant for a normal website. Relevant if you were planning to sell a template pack with one baked in.
Neither lets you rebundle. Both explicitly ban collecting their files up and offering them as your own library or pack.
None of this makes them not worth using
Two component copies a day is genuinely enough to build a good page over a week, and $6 a month is not a real decision if you are shipping sites. I would just rather you knew where the line was before you built half a page and hit it.
What your agent can actually use
I finished the video with a pro tip: you can use these with Claude Code and Codex. Mostly true, and one part of it is not, so here is the honest version.
The correction: Claude Code cannot use the Mixkit templates
Mixkit's templates are project files for Premiere Pro, After Effects, Final Cut and DaVinci Resolve. They only open in those applications. No coding agent can render one — it has nothing to render it with.
What your agent genuinely can use from Mixkit is the free clips and the sound effects. Those are plain video and audio files, and an agent can absolutely cut, trim, stitch and caption them for you. So the tip holds for the media, not for the templates.
skills.sh — yes, directly
The whole point of the site. One line and your agent has a new capability. Works in Claude Code, Codex, Cursor, Copilot and several others.
mcp.so — yes, that is what it is
Every listing is something you connect to your agent. Each page carries a ready-to-paste config for Claude and other clients.
21st.dev — yes, with a connector
Set up their connector and your agent pulls components straight into your project. Just remember the two-a-day cap applies to what it pulls, not only to what you click.
LottieFiles — yes, and this is the best one
A Lottie is a JSON file, which means your agent can read it, place it and control it like any other code. There is also an official connector so it can edit animations, not just drop them in.
Mixkit clips and sounds — yes
Plain mp4 and audio files. Your agent can cut, join, caption and export them in a code-based edit without any application open.
Mixkit templates — no
Project files for a video editor. You open those in the editor yourself. Useful, just not something an agent touches.
If you only do one thing off this page
Run prompt 3 on the ugliest page you own. Not because the sites are magic, but because making the AI say out loud what is wrong with a page before it touches it is the single change that stops you getting the same beige result every time.
Ready to go deeper?
Good components are the easy half. Knowing what to point them at is the other one.
Wright Mode Membership
Join a community of women using AI to take real work off their plate. Live calls, copy-paste prompts and workflows, and ongoing support.
Claude Masterclass
Learn to use Claude like a pro — from prompting fundamentals to building real workflows that save hours every week.
Claude Code Masterclass
Go beyond the chat box. Build automations, process data and create tools with Claude Code — no developer experience needed.