freshtechbro/claudedesignskills
23 skills18.8k installs5.2k starsGitHub
Install
npx skills add https://github.com/freshtechbro/claudedesignskillsSkills in this repo
1Threejs WebglThree.js WebGL is an agent skill for solo builders creating interactive 3D in the browser with Three.js, WebGL, and emerging WebGPU render paths. It triggers when tasks mention scenes, cameras, meshes, materials, textures, animations, or immersive product experiences. The skill explains hierarchical scene graphs—from lights and groups to InstancedMesh—and the non-negotiable trio of scene, camera, and renderer. You get opinionated quick-start patterns so an agent does not hallucinate deprecated APIs or omit resize and animation loop basics. It suits indie SaaS landing pages with hero 3D, ecommerce configurators, data visualizations, and portfolio pieces where WebGL performance and readable structure matter. Complexity sits at intermediate: you need JavaScript comfort but not a graphics PhD. Pair it with your existing bundler or framework; the skill focuses on Three.js craft rather than full-stack deployment.1.1kinstalls2Motion FramerMotion & Framer Motion is an agent skill for solo builders polishing React and JavaScript interfaces with production-grade animation without hand-rolling every CSS keyframe. It covers the modern Motion library (v11+) and the widely deployed Framer Motion lineage, explaining when to reach for motion wrappers instead of brittle transition strings. Typical triggers match Prism’s Build phase: interactive buttons and cards, page and route transitions, drag-and-drop panels, scroll-based storytelling, and layout shifts when lists reorder or sidebars collapse. The skill positions animations as controllable, accessible UI behavior—not decoration only—so you can ship micro-interactions that feel native on SaaS dashboards, landing pages, and extension popups. Use it while implementing frontend components; pair with your design system tokens and performance budgets before Ship.949installs3Blender Web PipelineBlender Web Pipeline is an agent skill and asset bundle for solo builders who want repeatable Blender-to-web 3D without reinventing export settings every sprint. It centers on export_template.blend—a starting scene with export presets, PBR material examples, level-of-detail patterns, and sane UV unwrap expectations—and a shader_library/ folder of web-minded materials spanning basic PBR, emissive, transparency, and metal. The documented flow is intentionally short: open the template, swap placeholder geometry, assign library materials, export glTF 2.0 as .glb, then validate in a web viewer before shipping to production. Command-line snippets show how to launch Blender against the template or fork a clean project with --factory-startup and --save-as. The readme also embeds a bpy quick reference for scenes, objects, collections, materials, and mesh data—enough to script repetitive export prep alongside the static assets. For indie game demos, marketing sites with 3D heroes, or SaaS configurators, it pairs procedural guidance with concrete files so agents and humans share the same pipeline vocabulary.918installs4Modern Web DesignModern-web-design is a meta-oriented agent skill for solo builders who want contemporary sites that still score on accessibility and speed. It frames 2024–2025 principles—performance-first choices, meaningful motion, and inclusive patterns—then routes implementation to sibling animation and 3D skills in the same repository. Triggers include design systems, scrollytelling, glassmorphism, cursor UX, micro-interactions, and hitting LCP under 2.5s, FID under 100ms, CLS under 0.1, and INP under 200ms. Use it when scoping a marketing site, product dashboard, or interactive landing page before you pick libraries. It does not replace deep library docs; it orchestrates when and why to reach for motion or 3D stacks.915installs5Animated Component LibrariesAnimated Component Libraries is an agent skill for solo builders shipping polished marketing sites, SaaS landing pages, or dashboard shells in React. It compares and applies two production-oriented libraries: Magic UI, with over 150 TypeScript components built on Tailwind and Framer Motion and aimed at shadcn/ui workflows, and React Bits, with over 90 lean animated pieces focused on backgrounds and micro-interactions. Use it when tasks mention Magic UI, React Bits, animated heroes, or choosing between pre-made motion primitives and bespoke GSAP or Motion code. The skill explains architecture, integration paths, and when library copy-paste beats custom animation engineering. That shortens Build frontend work while keeping performance and dependency discipline reasonable for indie teams without a dedicated motion designer.910installs6React Three FiberReact Three Fiber is an agent skill that packages real-world R3F component recipes for solo builders who want 3D on the web without reinventing loaders, suspense fallbacks, or interaction loops. It walks through GLTF and animated models, product viewers, scroll-linked motion, particle systems, 3D typography, post-processing, physics hooks, camera animation, level-of-detail, and on-screen performance monitoring—each as copy-paste-oriented JSX aligned with `@react-three/drei` helpers. Install it when you are building a landing hero, configurable product preview, or immersive portfolio and your agent keeps generating flat React instead of a disciplined Canvas tree. The skill is pattern-heavy rather than a single end-to-end app generator, so you still own routing, assets, and deployment. Intermediate familiarity with React hooks and basic Three.js concepts helps; beginners can start with the basic GLTF loader section and grow into scroll and physics chapters.897installs7Lottie AnimationsLottie Animations is a production-minded React + Vite starter template aimed at solo and indie builders who want lightweight vector motion in web apps without wrestling with raw animation APIs. It bundles DotLottie React, ships working basic and interactive component examples, and documents npm workflows from install through preview builds. The README positions the pack as responsive and production-ready, which makes it a practical scaffold when you are in the Build phase polishing marketing sites, onboarding flows, or micro-interactions inside a SaaS dashboard. Agents can clone the structure, drop branded `.lottie` assets into `public/animations`, and iterate on controls and layout in familiar JSX. It is a template skill—not a design critique or asset marketplace—so you still source or commission Lottie files separately. Best when you already chose React and want a fast, typed-friendly dev loop with Vite rather than configuring bundlers and player libraries by hand.894installs8Spline InteractiveSpline Interactive is a design-focused agent skill for solo builders who want 3D marketing or product visuals inside React without hand-rolling Vite or Next.js boilerplate. It centers on two Python helpers: a project generator that outputs package.json, framework config, App entrypoints, and setup docs, and a component builder that writes named Spline wrappers to your tree. You pick interactive versus animated patterns when you need click and hover wiring on top of a simple scene loader. Use it during the Build phase when the UI needs Spline instead of flat hero sections, especially for landing pages and product viewers. It complements general frontend skills by encoding Freshtechbro’s Spline + React conventions so your agent does not guess folder layout or dependency versions. Expect generated scaffolds you extend with your own scenes and branding rather than a hosted Spline editor replacement.877installs9Pixijs 2dPixiJS 2D is a pattern library skill for solo developers building browser-based 2D graphics, lightweight games, and interactive experiences on PixiJS v8 and later. It walks from a minimal Application bootstrap through responsive sizing, input, particle systems, filter stacks, custom shaders, animation idioms, and framework embedding, with explicit sections on performance and mobile constraints. Indie builders choose it when agents otherwise hallucinate deprecated Pixi APIs or skip ticker deltaTime and asset loading details that break production canvases. The skill is reference-heavy procedural knowledge— you still own asset pipelines, bundlers, and deployment—but it shortens the path from empty repo to a rotating sprite or shippable mini-game loop without spelunking scattered docs.870installs10Web3d Integration PatternsWeb3d-integration-patterns is a meta-skill for solo builders and small front-end teams who need one coherent playbook when a marketing site or product UI mixes Three.js, GSAP ScrollTrigger, React Three Fiber, Motion, and React Spring. Instead of installing five separate skills and guessing how scroll progress should drive camera moves or how physics hooks interact with the render loop, this skill focuses on architecture, shared state, and performance budgets across libraries. It applies when you build scroll-driven 3D storytelling, physics-based interactions, or large interactive demos where jank and duplicate animation controllers are the usual failure mode. Triggers include multi-library integration tasks, orchestrating scroll with WebGL, and optimizing frame times when DOM and canvas both animate. The skill is advanced by nature: expect patterns for component boundaries, render scheduling, and choosing when to migrate from one animation stack to another. It does not replace learning each library’s basics—it coordinates them for shippable, maintainable 3D web apps.840installs11Gsap Scrolltriggergsap-scrolltrigger is a design-oriented agent skill for solo builders polishing web front ends with GreenSock ScrollTrigger. It sits in the Build frontend lane when you want sections that animate on scroll, pin hero content, or sync timelines to scroll position—common on indie SaaS landers and portfolio sites. Prism lists it from freshtechbro/claudedesignskills, a GitHub-sourced skills bundle aimed at Claude-assisted UI work. Install the skill when your agent should follow established ScrollTrigger conventions rather than inventing fragile scroll listeners. Expect intermediate familiarity with modern JavaScript bundlers and DOM structure; the skill encodes procedural know-how for GSAP’s plugin model. It does not replace performance budgeting or accessibility review—pair with ship-phase checks if motion affects CLS or reduced-motion users. Detail page stats such as install counts live in Prism’s ingested metrics, not in duplicated tag fields.825installs12Animejsanimejs is a Claude Design Skills entry that equips solo frontend builders to ship polished web motion with the Anime.js library. Rather than guessing easing curves or stagger syntax, the skill bundles a recommended Vite vanilla template, install commands, and a categorized map of official CodePen references spanning basic tweens, staggered reveals, multi-step timelines, and SVG line-draw effects. That structure helps agents propose idiomatic Anime.js code during feature work—hero entrances, dashboard micro-interactions, or marketing page choreography—without pulling in a heavier animation framework. Complexity stays beginner-friendly if you already run npm projects; you still need to judge performance and reduced-motion preferences yourself. Use it when JavaScript-driven DOM animation is the right tool; skip when you only need CSS transitions, native View Transitions, or React-first motion libraries tied to a component model you cannot change.798installs13Babylonjs EngineBabylon.js Engine collects real-world, copy-ready snippets for solo builders shipping 3D configurators, games, or immersive marketing experiences in the browser. It spans model loading with progress UI, PBR materials, physics and particles, post-processing, Babylon GUI, WebXR, performance tuning, cameras, and animation—organized as a table of contents rather than a single toy demo. The skill suits developers who already chose Babylon.js over Three.js and want agent assistance that matches current modular import paths. Expect advanced complexity: you need JavaScript modules, asset pipelines, and often GPU budgeting. Use during feature implementation and prototyping; it is not a substitute for art direction, server-side matchmaking, or DevOps for dedicated game servers.764installs14Locomotive Scrolllocomotive-scroll is a Frontend Development skill from the freshtechbro Claude Design Skills collection, intended for solo builders who want polished scroll-linked animations on landing pages without manually re-reading library docs each time. The catalog entry identifies Locomotive Scroll—a widely used pattern for smooth scrolling, parallax sections, and reveal-on-scroll effects—as the focus, with installation routed through the claudedesignskills GitHub repository mirrored on skills.sh. Prism lists it under Build → frontend because the work is wiring DOM structure, data attributes or API calls, and CSS transforms in your site or framework, not configuring servers or growth analytics. Agents discover it when users ask for cinematic scroll storytelling on product sites, portfolios, or launch pages. Because the ingested SKILL stub is metadata-heavy, treat the skill as a procedural guide bundled with the repo: invoke it when you are ready to implement or debug scroll behavior, and validate reduced-motion preferences and mobile performance in your own QA pass.762installs15Lightweight 3d EffectsLightweight 3D Effects is an agent skill that catalogs real-world front-end recipes for subtle depth and motion using Vanta.js, Zdog, and Vanilla-Tilt. Solo builders shipping landing pages, product marketing sites, or portfolio showcases install it when they want polished hero sections and interactive cards without adopting Unity, Three.js pipelines, or design-agency budgets. The readme walks through eight scenario chapters—from split heroes with animated backgrounds and rotating brand marks to product cards, portfolio grids, dashboards, and full SaaS landing compositions—each with concrete markup and styling cues agents can adapt. It fits the Build phase frontend shelf because every deliverable is implementation-ready UI, not research or launch copy. Intermediate complexity assumes comfort editing HTML, CSS, and script tags in an existing stack. Use it when you need credible motion and dimensionality that still respects page weight and maintenance for a one-person team.757installs16Rive InteractiveRive Interactive is a Prism agent skill aimed at solo and indie builders who want polished, designer-authored motion inside React apps. It documents how to install `rive-react`, render `.riv` assets, and drive interactivity through Rive state machines and ViewModels instead of bespoke animation code. You reach for it during the build phase when onboarding Rive exports, prototyping clickable UI chrome, or binding runtime props (like dashboard titles) to authored art. The skill emphasizes practical snippets—standalone components, hover toggles, and ViewModel string hooks—so an agent can scaffold integration quickly. It does not replace Rive Editor workflow for authoring files; it accelerates the React glue layer that many small teams underestimate. If you already ship static Lottie or CSS-only motion, this skill helps you graduate to stateful Rive assets with clearer separation between design and code.752installs17Scroll Reveal LibrariesScroll-reveal-libraries teaches solo builders how to implement basic viewport-triggered animations with AOS on landing pages, blogs, and documentation sites where you want polish without animation-engine overhead. The skill walks minimal setup, HTML data attributes, initialization, and choosing effects from the built-in catalog so an agent can scaffold scroll reveals in a few minutes. It contrasts AOS with heavier stacks so you do not over-engineer marketing sites, while pointing to motion-framer for React-specific motion. Best when the goal is credible marketing motion, not choreographed product UI or scroll-synced storytelling.732installs18React Spring PhysicsReact Spring Physics is an agent skill that helps solo builders add physics-based motion to React interfaces using the React Spring ecosystem and a conventional Vite toolchain. It summarizes how to create a React project, install @react-spring/web, and optionally layer @use-gesture/react for draggable cards, viewpagers, and richer interaction. Rather than reinventing demos, it routes you to maintained official documentation, example galleries, and CodeSandbox templates for springs, trails, transitions, gesture-linked motion, and scroll-driven effects such as progress indicators and parallax sticky layouts. The skill fits indie SaaS dashboards, marketing sites, and product UI where subtle motion improves perceived quality without hand-rolling easing curves. Use it in Claude Code or Cursor when you want copy-pasteable install commands plus a categorized map of vetted examples instead of guessing hook APIs or fighting stale animation snippets from random threads.710installs19Barba JsBarba-js is a Prism skill package for solo builders who want smooth multi-page transitions without adopting a full SPA framework. It documents how Barba.js assets fit the Claude Design Skills repo and drives generation through project_setup.py, either interactively or with --name and --transition for automation. The output is a complete Vite multi-page app: HTML shells with data-barba hooks, main.js wiring Barba initialization to GSAP-friendly transitions, responsive CSS, and a README for the new folder. Pick among fade, slide, scale, stagger, or curtain when you scaffold so motion matches your marketing or portfolio site. Use it during Build when you already chose static or lightly dynamic pages but want app-like navigations; skip it if you are on Next.js App Router or another framework-owned routing model where Barba would fight the bundler.709installs20Aframe Webxraframe-webxr equips agents to build declarative 3D, VR, and AR experiences in the browser using A-Frame’s entity-component architecture on top of Three.js. Solo makers use it when they want immersive demos, product configurators, or lightweight games without writing large imperative render loops first. The skill emphasizes when to choose HTML primitives versus full entities, how to structure ECS components, and triggers spanning WebXR, controller input, and 360° content. It suits rapid prototypes and marketing-grade immersive pages more than native console titles. Expect intermediate comfort with web assets, CDN or bundled A-Frame, and device-specific WebXR availability testing on real hardware.705installs21Substance 3d Texturingsubstance-3d-texturing is an agent skill aimed at solo builders bridging Adobe Substance 3D Painter and browser 3D stacks. The documented workflow centers on export preset JSON that channels Substance document maps—baseColor and normal—into separate PNG files named per texture set, with explicit per-channel routing so BabylonJS PBR materials receive predictable albedo and tangent-space normal inputs. Parameters lock common web defaults such as PNG format and 8-bit depth while exposing resolution control through sizeLog2. Use it when you have authored surfaces in Substance and need repeatable exports for React/Babylon or similar viewers without hand-renaming maps or mismatched channel order. It is narrow and preset-driven rather than a full texturing tutorial; pair it with your mesh UV and engine material setup skills. Ideal for indie 3D commerce, configurators, and lightweight game assets targeting web delivery.705installs22Playcanvas Engineplaycanvas-engine is a reference skill bundling PlayCanvas examples, patterns, and use cases for solo builders shipping web-based 3D experiences. Instead of reading scattered docs, you get a structured table of contents—from a minimal rotating cube through multi-object scenes, physics, animation, user interface overlays, audio, and performance notes. Each example shows entity-component setup in JavaScript with the Application lifecycle, which matches how indie game and interactive demo authors work inside Claude Code or Cursor. Use it while you are actively coding the client; it does not replace game design or asset pipeline planning, but it accelerates implementation when you already chose PlayCanvas as your engine.693installs23Skill Creatorskill-creator is a meta agent skill aimed at solo and indie builders who want durable, shareable procedures instead of repeating the same instructions in every chat. It sits in the Build phase under agent tooling because its main job is to help you define what an agent should do, when to invoke it, and what it must not do—then encode that as a SKILL.md other tools can load. Use it when you are starting a new capability (design review, API integration, launch checklist), splitting a bloated monolithic prompt into focused skills, or hardening an existing skill after real project use. The skill emphasizes explicit invoke triggers, anti-patterns, deliverables, and optional eval comparisons so you can see whether the packaged workflow actually saves tokens and mistakes. It matters on Prism because the catalog is journey-organized: well-tagged skills are easier for you and for search engines to cite by phase. Treat skill-creator as infrastructure for your agent stack, not as a runtime integration by itself.663installs