Loading video...

Video Failed to Load

Go Home

Bruh... Stop building skeleton loaders manually 🦴 This open-source web component lets you automatically generate shimmer loading skeletons from your real UI with multiple customization options. → no separate skeleton components → generates loaders from actual DOM layout → customizable shimmer effects & styles → works with React, Vue,...

rammcodes's profile picture

Ram Maheshwari

4,458 subscribers

17,348 views • 5 months ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

5 Comments

Lezvix's profile picture
Lezvix5 months ago

How is this better than 0xGF/boneyard?

Bla Blu's profile picture
Bla Blu5 months ago

Claude/any coding agent does it for anything. Why do you need a component library in this day and age when anything can be built following the overall design guidelines.

Ben's profile picture
Ben5 months ago

Stop building skeleton loaders. There, fixed it.

Bilko - BG Labs's profile picture
Bilko - BG Labs5 months ago

every hand-built skeleton i've made has drifted from the actual layout within two refactors. reading shape from the real dom fixes it at the source.

Aejkatappaja's profile picture
Aejkatappaja5 months ago

Thanks for sharing!

Related Videos

Brooooooooooooo... this feels like a dream come true for every developer & designer. 🦴 Now you don't have to manually design skeleton screens for your UI. Boneyard automatically extracts the layout from your real UI and generates pixel-perfect skeleton loading screens from it. Just wrap your UI components with Boneyard, run the build, and it creates the skeletons for you :) Follow me for more amazing AI, Coding & Web Dev insights 💎
0:32

Brooooooooooooo... this feels like a dream come true for every developer & designer. 🦴 Now you don't have to manually design skeleton screens for your UI. Boneyard automatically extracts the layout from your real UI and generates pixel-perfect skeleton loading screens from it. Just wrap your UI components with Boneyard, run the build, and it creates the skeletons for you :) Follow me for more amazing AI, Coding & Web Dev insights 💎

Ram Maheshwari

55,108 views • 2 months ago

Bruh… this carousel system is so sleek 🎠 Blossom is an open-source carousel system with tons of beautiful patterns and examples. It also comes with AI agent skills and supports React, Vue, Svelte, and Web Components. Perfect if you're looking for modern, highly customizable carousels without the usual bloat :) Source 🔗: github(DOT)com/jespervos/blossom-carousel Follow Ram Maheshwari for more 💎 #html #ai #javascript #coding #webdevelopment #programming
0:42

Bruh… this carousel system is so sleek 🎠 Blossom is an open-source carousel system with tons of beautiful patterns and examples. It also comes with AI agent skills and supports React, Vue, Svelte, and Web Components. Perfect if you're looking for modern, highly customizable carousels without the usual bloat :) Source 🔗: github(DOT)com/jespervos/blossom-carousel Follow Ram Maheshwari for more 💎 #html #ai #javascript #coding #webdevelopment #programming

Ram Maheshwari

24,109 views • 5 months ago

Small update to the Skeleton component. You can now wrap your actual UI with Skeleton, set isLoading, and everything inside will automatically animate as a loading state. Cleaner API, less duplicated placeholder markup.
0:20

Small update to the Skeleton component. You can now wrap your actual UI with Skeleton, set isLoading, and everything inside will automatically animate as a loading state. Cleaner API, less duplicated placeholder markup.

Irsyad A. Panjaitan

26,236 views • 5 months ago

Introducing Canvas UI, the first ever html-in-canvas component library. Your DOM is the render target now. Real-time shaders over real, interactive UI. 24 components. React, Vue, Svelte, vanilla TS. Free. Open source. 🧵
0:48

Introducing Canvas UI, the first ever html-in-canvas component library. Your DOM is the render target now. Real-time shaders over real, interactive UI. 24 components. React, Vue, Svelte, vanilla TS. Free. Open source. 🧵

David Haz

1,427,809 views • 3 months ago

Bruh… this File-Tree component is ridiculously polished 🌳 Trees is an open-source file tree system for building IDE-style file explorers with search, drag-and-drop, file selection, Git status indicators, and more. Perfect for code editors, developer tools, file managers, and apps that need a modern file explorer UI :) Follow Ram Maheshwari for more 💎 #html #ai #javascript #coding #webdevelopment #programming
0:34

Bruh… this File-Tree component is ridiculously polished 🌳 Trees is an open-source file tree system for building IDE-style file explorers with search, drag-and-drop, file selection, Git status indicators, and more. Perfect for code editors, developer tools, file managers, and apps that need a modern file explorer UI :) Follow Ram Maheshwari for more 💎 #html #ai #javascript #coding #webdevelopment #programming

Ram Maheshwari

15,692 views • 5 months ago

I recently worked on a skeleton component that works with any layout automatically. You can render any real component with mock content, wrap it with a <Skeleton>, and any text, images, etc. get replaced with a shimmer effect. Waaaay easier than manually sizing rectangles. 😃
0:54

I recently worked on a skeleton component that works with any layout automatically. You can render any real component with mock content, wrap it with a <Skeleton>, and any text, images, etc. get replaced with a shimmer effect. Waaaay easier than manually sizing rectangles. 😃

Devon Govett

116,488 views • 2 years ago

Use Claude Code inside VS Code 🫡 Follow Ram Maheshwari for more 💎 #html #ai #javascript #coding #webdevelopment #programming
0:51

Use Claude Code inside VS Code 🫡 Follow Ram Maheshwari for more 💎 #html #ai #javascript #coding #webdevelopment #programming

Ram Maheshwari

13,763 views • 8 months ago

Bruh... this AI skill actually makes AI-generated UIs look better 🤯 Taste Skill is an open-source skill that helps AI coding agents generate cleaner, more polished frontends, and it's compatible with popular agents like Claude Code, Codex, Gemini, Cursor, Lovable, and more :) Follow Ram Maheshwari for more 💎 #html #ai #javascript #coding #webdevelopment #programming
0:28

Bruh... this AI skill actually makes AI-generated UIs look better 🤯 Taste Skill is an open-source skill that helps AI coding agents generate cleaner, more polished frontends, and it's compatible with popular agents like Claude Code, Codex, Gemini, Cursor, Lovable, and more :) Follow Ram Maheshwari for more 💎 #html #ai #javascript #coding #webdevelopment #programming

Ram Maheshwari

64,387 views • 4 months ago

Introducing Loading UI ⏳ if your loading state is just <Loader2 /> it's for you → 35+ components → shadcn compatible → simplest api, fully customizable free and open-source install, customize, plug-in check at loading-ui(.)com 🔥
0:24

Introducing Loading UI ⏳ if your loading state is just <Loader2 /> it's for you → 35+ components → shadcn compatible → simplest api, fully customizable free and open-source install, customize, plug-in check at loading-ui(.)com 🔥

Bart ⚡

106,523 views • 6 months ago

I wish I found this sooner. 🫡 This open-source collection of Agentic UI Skills teaches AI coding agents how to build interfaces that feel polished, not just functional. You'll find specialized skills for things like: → Better User Interface → Better Typography → Better Colors → Better Layout → Better Accessibility ....& more Instead of relying on generic UI patterns, your AI agent can load the right design-engineering skill for the task at hand. If you're building modern frontends with AI coding agents, this is definitely worth bookmarking :) Source 🔗: github(DOT)com/jakubkrehel/skills Follow me for more amazing AI, Coding & Web Dev insights 💎
0:23

I wish I found this sooner. 🫡 This open-source collection of Agentic UI Skills teaches AI coding agents how to build interfaces that feel polished, not just functional. You'll find specialized skills for things like: → Better User Interface → Better Typography → Better Colors → Better Layout → Better Accessibility ....& more Instead of relying on generic UI patterns, your AI agent can load the right design-engineering skill for the task at hand. If you're building modern frontends with AI coding agents, this is definitely worth bookmarking :) Source 🔗: github(DOT)com/jakubkrehel/skills Follow me for more amazing AI, Coding & Web Dev insights 💎

Ram Maheshwari

15,385 views • 3 months ago

Bruh... someone recreated the UI of Claude Code, Codex & Grok as reusable ShadCN components. 🤯 This open-source library lets you drop beautifully recreated AI interface components straight into your own apps or CLI projects. You'll find components for: → prompts & chat messages → tool calls → code diffs → permission dialogs → todo lists → slash commands → and much more... Perfect if you're building AI apps, terminal UIs (TUIs), or CLI-based developer tools and don't want to build everything from scratch :) Source 🔗: github(DOT)com/theswerd/brainless Follow me for more amazing AI, Coding & Web Dev insights 💎
0:39

Bruh... someone recreated the UI of Claude Code, Codex & Grok as reusable ShadCN components. 🤯 This open-source library lets you drop beautifully recreated AI interface components straight into your own apps or CLI projects. You'll find components for: → prompts & chat messages → tool calls → code diffs → permission dialogs → todo lists → slash commands → and much more... Perfect if you're building AI apps, terminal UIs (TUIs), or CLI-based developer tools and don't want to build everything from scratch :) Source 🔗: github(DOT)com/theswerd/brainless Follow me for more amazing AI, Coding & Web Dev insights 💎

Ram Maheshwari

56,732 views • 3 months ago

Your AI designs look generic? I gotchu 👇 — Web, branding, motion & 3D inspiration — UI inspiration by category — UI components for AI coding agents — Generate editable UI from prompts — Customizable React design system — Interactive web sections & animations — UI animation inspiration — Ready-to-use backgrounds & gradients — Website design inspiration — Web, branding, motion & 3D inspiration — UI ideas for your next project — Website footer inspiration — Share your work with designers Save these before your next AI build. 🔖
0:31

Your AI designs look generic? I gotchu 👇 — Web, branding, motion & 3D inspiration — UI inspiration by category — UI components for AI coding agents — Generate editable UI from prompts — Customizable React design system — Interactive web sections & animations — UI animation inspiration — Ready-to-use backgrounds & gradients — Website design inspiration — Web, branding, motion & 3D inspiration — UI ideas for your next project — Website footer inspiration — Share your work with designers Save these before your next AI build. 🔖

Nero

43,166 views • 5 days ago

- 79 UI styles and 192 color palettes for coding agents - 392 shadcn registries searchable via MCP for coding agents - 184 React components, templates with shadcn cli and mcp - 100 free open-source animated React components - curated web design inspiration
0:59

- 79 UI styles and 192 color palettes for coding agents - 392 shadcn registries searchable via MCP for coding agents - 184 React components, templates with shadcn cli and mcp - 100 free open-source animated React components - curated web design inspiration

Csaba Kissi

14,124 views • 1 month ago

Every serious vibe coder should have bookmarked it. 25 vibe coding resources to keep yourself ahead of the competition. 1. - 600+ award-winning prompts + full source code for 3D and scroll-driven websites. - 100+ 3D scenes, 200+ interactive gradients, 200+ UI components. - Copy the prompt, paste into Claude, Cursor or Lovable, launch live. 2. Minimal Gallery ( - curated high-end sites to feed your agent 3. Godly ( - hand-picked sites with serious craft 4. Refero Styles ( - 2,000+ real product styles with typography 5. Component Gallery ( - 2,600+ examples of how top design systems solve the same element 6. Mobbin ( - real app flows from real products 7. DESIGNmd ( - design systems as markdown your agent can read 8. VibePrompt ( - ready-made prompts for dashboards and landing pages 9. ( - component registry that plugs into agents via MCP 10. Kinetics ( - 150+ motion effects with React code and prompts 11. shadcn/ui ( - still the gold standard for clean, reusable UI 12. Aceternity UI ( - 200+ animated React/Tailwind components 13. Magic UI ( - beautifully designed components for modern web apps 14. Motion Primitives ( - ready-to-use animation and interaction components 15. Uiverse ( - community-built UI elements and interactive components 16. Shadcnblocks ( - full blocks, not just buttons 17. mapcn ( - map components, markers, routes, popups 18. Awwwards ( - the sites that actually won 19. Liquid Glass ( - glass refraction components and effects 20. CSS Text Effects ( - creative CSS text animations and effects 21. Circle Loaders ( - creative loading animations and loaders 22. Gradient Buttons ( - gradient button styles and effects 23. Shadertoy ( - shaders to study and remix 24. 3Dicons ( - a library of free 3D icons for modern interfaces 25. Anime.js ( - lightweight JavaScript animation library for the web If you're building with AI, this list will save you hours. Save it. 🔖
0:21

Every serious vibe coder should have bookmarked it. 25 vibe coding resources to keep yourself ahead of the competition. 1. - 600+ award-winning prompts + full source code for 3D and scroll-driven websites. - 100+ 3D scenes, 200+ interactive gradients, 200+ UI components. - Copy the prompt, paste into Claude, Cursor or Lovable, launch live. 2. Minimal Gallery ( - curated high-end sites to feed your agent 3. Godly ( - hand-picked sites with serious craft 4. Refero Styles ( - 2,000+ real product styles with typography 5. Component Gallery ( - 2,600+ examples of how top design systems solve the same element 6. Mobbin ( - real app flows from real products 7. DESIGNmd ( - design systems as markdown your agent can read 8. VibePrompt ( - ready-made prompts for dashboards and landing pages 9. ( - component registry that plugs into agents via MCP 10. Kinetics ( - 150+ motion effects with React code and prompts 11. shadcn/ui ( - still the gold standard for clean, reusable UI 12. Aceternity UI ( - 200+ animated React/Tailwind components 13. Magic UI ( - beautifully designed components for modern web apps 14. Motion Primitives ( - ready-to-use animation and interaction components 15. Uiverse ( - community-built UI elements and interactive components 16. Shadcnblocks ( - full blocks, not just buttons 17. mapcn ( - map components, markers, routes, popups 18. Awwwards ( - the sites that actually won 19. Liquid Glass ( - glass refraction components and effects 20. CSS Text Effects ( - creative CSS text animations and effects 21. Circle Loaders ( - creative loading animations and loaders 22. Gradient Buttons ( - gradient button styles and effects 23. Shadertoy ( - shaders to study and remix 24. 3Dicons ( - a library of free 3D icons for modern interfaces 25. Anime.js ( - lightweight JavaScript animation library for the web If you're building with AI, this list will save you hours. Save it. 🔖

Himanshu Hingorani

26,043 views • 21 days ago

The best UI components, ready to use. — Beautiful UI components. — Modern UI components. — UI inspiration and components. — Customizable chart components. — Smooth UI animations — Animated React components. — Components for dashboards. Save this for your next project.🔖
0:23

The best UI components, ready to use. — Beautiful UI components. — Modern UI components. — UI inspiration and components. — Customizable chart components. — Smooth UI animations — Animated React components. — Components for dashboards. Save this for your next project.🔖

Nero

92,445 views • 19 days ago

Bruh... This SVG vector shapes collection is so fascinating 🔥 Find tons of beautiful abstract SVG shapes and instantly copy the code with one click. Perfect for designers and developers who want to make their interfaces feel more dynamic and visually rich :) Follow Ram Maheshwari for more 💎 #html #ai #javascript #coding #webdevelopment #programming
0:25

Bruh... This SVG vector shapes collection is so fascinating 🔥 Find tons of beautiful abstract SVG shapes and instantly copy the code with one click. Perfect for designers and developers who want to make their interfaces feel more dynamic and visually rich :) Follow Ram Maheshwari for more 💎 #html #ai #javascript #coding #webdevelopment #programming

Ram Maheshwari

13,744 views • 5 months ago

Broooooooooo.... this is sooo damn coooool to add Glass Effects in any UI. 😍 This free tool lets you generate stunning glassmorphism effects with plenty of customization options. It even supports liquid-glass and neumorphic designs. Once you're done, simply copy the code and start using it in your vibe coded or custom coded projects :) Follow me for more amazing AI, Coding & Web Dev insights 💎
0:27

Broooooooooo.... this is sooo damn coooool to add Glass Effects in any UI. 😍 This free tool lets you generate stunning glassmorphism effects with plenty of customization options. It even supports liquid-glass and neumorphic designs. Once you're done, simply copy the code and start using it in your vibe coded or custom coded projects :) Follow me for more amazing AI, Coding & Web Dev insights 💎

Ram Maheshwari

31,736 views • 2 months ago

Broooooooooo.... this is sooo damn coooool to add Glass Effects in any UI. 😍 This free tool lets you generate stunning glassmorphism effects with plenty of customization options. It even supports liquid-glass and neumorphic designs. Once you're done, simply copy the code and start using it in your vibe coded or custom coded projects :) Follow me for more amazing AI, Coding & Web Dev insights 💎
0:27

Broooooooooo.... this is sooo damn coooool to add Glass Effects in any UI. 😍 This free tool lets you generate stunning glassmorphism effects with plenty of customization options. It even supports liquid-glass and neumorphic designs. Once you're done, simply copy the code and start using it in your vibe coded or custom coded projects :) Follow me for more amazing AI, Coding & Web Dev insights 💎

Ram Maheshwari

14,832 views • 1 month ago

- free UI taste skill that stops coding agents shipping AI slop - 171 animated React components with Tailwind & MCP support - 100+ open-source React components for coding agents - Beautiful theme toggle icons - open-source skills that give coding agents a repeatable dev workflow
0:39

- free UI taste skill that stops coding agents shipping AI slop - 171 animated React components with Tailwind & MCP support - 100+ open-source React components for coding agents - Beautiful theme toggle icons - open-source skills that give coding agents a repeatable dev workflow

Csaba Kissi

24,049 views • 1 month ago

Introducing ! 🤩🎉 Open Source alternative v0! Generate usable Vue component, not just UI. Support `shadcn/vue` for now, but will address more library in soon! Fork it, Host it, Star it ⭐️ --- Made with Nuxt Drizzle ORM shadcn UI
0:47

Introducing ! 🤩🎉 Open Source alternative v0! Generate usable Vue component, not just UI. Support `shadcn/vue` for now, but will address more library in soon! Fork it, Host it, Star it ⭐️ --- Made with Nuxt Drizzle ORM shadcn UI

Zernonia

295,972 views • 2 years ago