Stats
Actions
Tags
'%20stop-opacity%3D'0.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(200%2C90%2C60)'%20stop-opacity%3D'0.03'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'320'%20height%3D'200'%20fill%3D'url(%23g)'%2F%3E%3Ccircle%20cx%3D'250'%20cy%3D'56'%20r%3D'92'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.06'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'172'%20r%3D'58'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fsvg%3E)
From design-forge
Builds production-ready React/Next.js components for premium interactive experiences: canvas visualizations, glassmorphism, Framer Motion/GSAP animations, Three.js/Spline 3D, micro-interactions, particles, and sound design.
How this skill is triggered — by the user, by Claude, or both
Slash command
/design-forge:design-forgeThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Design Forge provides production-ready components AND design methodology for building premium interactive web experiences in React/Next.js. It covers canvas visualizations, glassmorphism, animations (Framer Motion, GSAP), 3D (Three.js, Spline), micro-interactions, sound design, and accessibility.
Design Forge provides production-ready components AND design methodology for building premium interactive web experiences in React/Next.js. It covers canvas visualizations, glassmorphism, animations (Framer Motion, GSAP), 3D (Three.js, Spline), micro-interactions, sound design, and accessibility.
Load each step through the fetch command (handles caching, decryption, and auth):
"~/.composure/bin/composure-fetch.mjs" skill design-forge design-forge {step-filename}
Do NOT read cache files directly — they are encrypted at rest. Always use the fetch command above.
animationsassetscanvas-2dinteractionslayoutssectionsthree-js3d-integration.mdaccessibility.mdanimation-recipes.mdasset-generation.mdcanvas-system.mddesign-patterns.mdgsap-framework-patterns.mdgsap-plugins.mdgsap-scrolltrigger-advanced.mdmicro-interactions.mdnextjs-conf-patterns.mdThis skill has category-specific content:
taxonomy/ — 20 filesFetch category content: "~/.composure/bin/composure-fetch.mjs" skill design-forge design-forge {category}/{filename}
npx claudepluginhub hrconsultnj/claude-plugins --plugin design-forgeProvides 2024-2025 web design trends, principles, and CSS patterns for bold minimalism, performance optimization, accessibility, micro-interactions, and design systems.
Generates production-quality React and Next.js UI components and full pages using Tailwind CSS and Framer Motion for hero sections, SaaS dashboards, pricing pages, bento grids, forms, cards, and animated elements.
Builds complete, visually striking frontend pages with premium UI, cinematic animations, AI-generated media assets, persuasive copy, and generative art. Use for landing pages, marketing sites, dashboards, and media generation.