Loading video...

Video Failed to Load

Go Home

i created a Claude Skill that makes perfect @Framer components & overrides ideal for: - webgl & shaders - CMS-fed items - perfect property controls - react hydration/SSR context - shared states - canvas/preview detection - safari fixes - & so much more github link below ↓

74,905 views • 8 months ago •via X (Twitter)

64 Comments

Fred Moon 🚀's profile picture
Fred Moon 🚀8 months ago

link → it's trained on 30+ custom comps I have created over the years: some very functional, but also some creative ones like my Image to Particles and other webgl goodies

Fred Moon 🚀's profile picture
Fred Moon 🚀8 months ago

How to install → npx skills add fredm00n/framerlabs --skill framer-code-components-overrides

Fred Moon 🚀's profile picture
Fred Moon 🚀8 months ago

you'll be happily surprised how helpful it can sometimes be 👀

✌︎ frederik ✌︎'s profile picture
✌︎ frederik ✌︎8 months ago

@framer Since you're the Claude/Framer expert now, do you know if it would be possible to make a Claude skill that can go through a template and check if it meets all the technical demands before submitting it? Maybe in conjunction with the Framer MCP?

Fred Moon 🚀's profile picture
Fred Moon 🚀8 months ago

@framer Maybe yes for some technical bits like SEO hierarchy, dead links, text-styles, color-styles... Basically anything that's doable via the plugin API the MCP can do too cc @__morse

✌︎ frederik ✌︎'s profile picture
✌︎ frederik ✌︎8 months ago

@framer @__morse Hmm... maybe worth checking out. Thx :)

Max Palmer's profile picture
Max Palmer8 months ago

@framer

Jeremiah Welch's profile picture
Jeremiah Welch8 months ago

@framer Please like this comment so I can set this up when I get home. Thank you 🙏

Fred Moon 🚀's profile picture
Fred Moon 🚀8 months ago

@framer yes sir

Kevin Williams's profile picture
Kevin Williams8 months ago

@framer Love this!

Mariusz's profile picture
Mariusz8 months ago

@framer Can I create e-commerce in framer with that?

Fred Moon 🚀's profile picture
Fred Moon 🚀8 months ago

@framer Not that simple I'm afraid

Clément Lionne's profile picture
Clément Lionne8 months ago

@framer Thanks mate! I'm adding this directly to my workflow

Fred Moon 🚀's profile picture
Fred Moon 🚀8 months ago

@framer Nice one! Let me know how it goes 🙏

Clément Lionne's profile picture
Clément Lionne8 months ago

@framer Pretty well! I have pretty long documentation already but it's always nice to keep it updated

Jakub's profile picture
Jakub8 months ago

@framer Love this liquid metal effect 👌🏻

Fred Moon 🚀's profile picture
Fred Moon 🚀8 months ago

@framer Yes it's beautiful. Kudos to @paper as mentioned on

Gustav ❖'s profile picture
Gustav ❖8 months ago

@framer So cool you’re sharing this! Def trying it out

Fred Moon 🚀's profile picture
Fred Moon 🚀8 months ago

@framer Nice one! Let me know how it goes with it

Akshat's profile picture
Akshat8 months ago

@framer Will definitely give it a try. Thanks for putting in the work and coming up with this brother, appreciate it!🙌🏼

Fred Moon 🚀's profile picture
Fred Moon 🚀8 months ago

@framer 🙌

Georgi's profile picture
Georgi8 months ago

@framer You're a godsend Fred, thanks so much for sharing this!

Fred Moon 🚀's profile picture
Fred Moon 🚀8 months ago

@framer Mnogo merci gotin 😄

Georgi's profile picture
Georgi8 months ago

@framer hahah, jiv I zdrav, brat! 🤍

hehehaha's profile picture
hehehaha8 months ago

@framer @grok I'm a noob. I have a free framer account. How to use this into my project?

natan —'s profile picture
natan —8 months ago

@framer @readwise save thread

Siddharth Ponnapalli's profile picture
Siddharth Ponnapalli8 months ago

@framer You’re a legend

Fred Moon 🚀's profile picture
Fred Moon 🚀8 months ago

@DesignSiddharth @framer 🙏

Mason Price's profile picture
Mason Price8 months ago

@framer Just sent clawdbot this link and asked him to install for me 🫡

Fred Moon 🚀's profile picture
Fred Moon 🚀8 months ago

@framer this is the way 🫡

Gustave Flowbert's profile picture
Gustave Flowbert8 months ago

@framer how do you usually work tho? when i do custom components it's always tricky to test them because i'm using the framer code editor and each time i have to close it, open the component and test. Maybe there is a better way

Fred Moon 🚀's profile picture
Fred Moon 🚀8 months ago

@framer you could use mcp from your IDE to streamline this process if you don't want to copy/paste keep a Framer preview open and simply refresh it see video example (2x speed)

Gustave Flowbert's profile picture
Gustave Flowbert8 months ago

@framer interesting, gotta dig it, would be really nice to have the chance to code in cursor and see the result in framer directly

Fred Moon 🚀's profile picture
Fred Moon 🚀8 months ago

@framer can definitely do that - either with the mcp as above or the API which is coming soon

Gustave Flowbert's profile picture
Gustave Flowbert8 months ago

@framer damn, need to give it a shot! thanks sir

Clau Marin's profile picture
Clau Marin8 months ago

@framer legend

Fred Moon 🚀's profile picture
Fred Moon 🚀8 months ago

@framer 🙏

Marcelo Design X's profile picture
Marcelo Design X8 months ago

@framer This is insane

Meris's profile picture
Meris8 months ago

@framer Sick stuff Fred

Sergei X's profile picture
Sergei X8 months ago

@framer Thank you so much! I'll test it today

Fred Moon 🚀's profile picture
Fred Moon 🚀8 months ago

@framer Yay!

Daniel White's profile picture
Daniel White8 months ago

@framer Thank you so much for sharing I would have to have a look

Fred Moon 🚀's profile picture
Fred Moon 🚀8 months ago

@DanielWhit21874 @framer enjoy

Daniel White's profile picture
Daniel White8 months ago

@framer Thank you !’

nowmo.design's profile picture
nowmo.design8 months ago

@framer Excellent 👌 thanks for the llink

Fred Moon 🚀's profile picture
Fred Moon 🚀8 months ago

@framer 👍

Beldon Wolson's profile picture
Beldon Wolson8 months ago

@framer It’s work like this that people are humbled by, myself included. If you don’t know what .md files can do for you just troll YT for a bit. The fact you’re providing, for free 🤯

Fred Moon 🚀's profile picture
Fred Moon 🚀8 months ago

@framer 🙏

Rohan Moura's profile picture
Rohan Moura8 months ago

@framer This is seriously powerful, thanks for sharing this, Fred 🙌 Super useful for Framer builders. Love how it combines MCP + smart code components. Excited to try it out!

𝙲𝚑𝚛𝚒𝚜 ×͜×'s profile picture
𝙲𝚑𝚛𝚒𝚜 ×͜×8 months ago

@framer Love these 👌

Pratik's profile picture
Pratik8 months ago

@framer oh this is amazing! thank you!

Fred Moon 🚀's profile picture
Fred Moon 🚀8 months ago

@framer Pleasure!

Daksh P. Jain's profile picture
Daksh P. Jain8 months ago

@framer You're amazing! Thank you so much ❤️

Lea's profile picture
Lea8 months ago

@framer looks stunning

Ferdinand's profile picture
Ferdinand8 months ago

@framer Lfg

Shahid Shaikh's profile picture
Shahid Shaikh8 months ago

@framer this looks super useful for workflows

Fred Moon 🚀's profile picture
Fred Moon 🚀8 months ago

@framer yes it should definitely help. lmk if you try it

Ammy's profile picture
Ammy8 months ago

@framer Hey fred. Thank you.

Fred Moon 🚀's profile picture
Fred Moon 🚀8 months ago

@framer most welcome

Steve Lauda's profile picture
Steve Lauda8 months ago

@framer Man, thank you so much for this!

Fred Moon 🚀's profile picture
Fred Moon 🚀8 months ago

@framer Pleasure! Hope you find it useful. Will keep updating it when I can.

Muwuso Mkochi's profile picture
Muwuso Mkochi8 months ago

@framer Damn homie @fw3d

Rohit Ghumare's profile picture
Rohit Ghumare8 months ago

@framer npx skillkit add fredm00n/framerlabs --skill framer-code-components-overrides And translate to any agents with

litt's profile picture
litt8 months ago

@framer Thats killer! Appreciate you!

Related Videos