skills.rest
gmolike
gmolikeCOMMUNITY
Explore all skills by this author →
GitHub

fsd-3d-fal-pipeline

Implements FSD-structured React Three Fiber scenes with Motion animations and fal.ai asset generation pipelines.

Updated Mar 4, 2026
Search Tags:#typescript#feature-sliced design#fal.ai#asset pipeline#react three fiber#3d generation#motion animation
One-click install
npx skills add https://github.com/gmolike/Claude-Template --skill fsd-3d-fal-pipeline-gmolike
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fsd-3d-fal-pipeline
Source: https://github.com/gmolike/Claude-Template/tree/main/.claude/skills/fsd-3d-fal-pipeline
Command: npx skills add https://github.com/gmolike/Claude-Template --skill fsd-3d-fal-pipeline-gmolike

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three, @react-three/fiber, @react-three/drei, motion, @tanstack/react-query, @fal-ai/client, hono, zod, @aws-sdk/client-s3, @upstash/redis, @gltf-transform/core, sharp, and includes references (resource) components.

What problem does it solve? Building React applications that combine 3D scenes, animation systems, and AI-generated assets involves scattered decisions: where components belong in Feature-Sliced Design, which fal.ai model endpoints are actually live and correctly spelled, how to keep API keys server-side, and how to control generation costs. This Skill encodes verified endpoint IDs, placement rules, and a mandatory backend pipeline so these decisions are made correctly the first time. ## Core Features & Use Cases - Verified fal.ai model catalog: Current endpoint IDs and prices for 3D models (Hyper3D Rodin, Hunyuan3D, TRELLIS), images (FLUX schnell, FLUX.2 Pro), video (Wan, Kling, Veo 3.1), plus a two-route verification method with positive and negative controls to avoid dead or deprecated endpoints. - FSD placement rules: A decision matrix mapping 3D widgets, generation features, fal API clients, and motion tokens to the correct Feature-Sliced Design layers, with cross-slice import rules. - Mandatory backend pipeline: Every fal route must run Zod validation, cache lookup, fal call, optimization (Draco/KTX2 via gltf-transform), R2 upload, and cache write, with rate limiting to prevent cost explosions. - Motion token system: Duration, easing, and spring tokens with LazyMotion strict mode and reduced-motion handling. - Use Case: A developer asked to add a hero 3D scene with AI-generated textures to a landing page gets the correct widget placement, a verified text-to-3D endpoint, a cost estimate, and a complete backend route structure instead of guessing. ## Quick Start Ask the assistant to build a hero 3D scene with an AI-generated model and textures for your React TypeScript project using this skill.

Frequently Asked Questions about fsd-3d-fal-pipeline

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add AI-generated 3D models to a React Three Fiber app?▼

Use a fal.ai text-to-3D endpoint such as fal-ai/hunyuan-3d/v3.1/rapid/text-to-3d for runtime generation or fal-ai/hyper3d/rodin for brand-critical hero assets. Call it from your own backend, optimize the GLB with Draco compression, upload to R2, then load it in R3F with useGLTF.

Which fal.ai model should I use for text-to-3D generation?▼

Use Hyper3D Rodin ($0.40 per generation) for brand-critical one-shot assets, Hunyuan3D v3.1 Rapid ($0.225) as the runtime default, and TRELLIS ($0.02) for previews. Verify every endpoint ID against the fal.ai model page before use, since IDs mix slashes and hyphens unpredictably.

Where do 3D components go in Feature-Sliced Design?▼

Self-contained 3D UI blocks without user actions go in widgets/, user-triggered generation forms go in features/, the fal API client goes in shared/api/fal/, and generic canvas wrappers go in shared/ui/canvas/. Backend routes live outside the FSD src tree in a separate backend directory.

Can I use the FAL_KEY in frontend React code?▼

No. The FAL_KEY must stay server-side only; placing it in VITE_* environment variables ships it in the client bundle. The frontend calls your own backend at /api/fal/* routes, which handle validation, caching, rate limiting, and the actual fal.ai call.

Why is my fal.ai endpoint returning 404 or deprecated warnings?▼

fal.ai mixes slash and hyphen conventions within the same model family, so analogically derived IDs are often dead. Some deprecated endpoints like fal-ai/veo3 still return HTTP 200, so you must read the page content, not just the status code, and test with positive and negative controls.

How do I prevent fal.ai API costs from exploding?▼

Add rate-limit middleware on every /api/fal/* route, set a spending limit in the fal dashboard, and cache results with a SHA-256 key of endpoint plus input. Without rate limiting, a single bot at 10 requests per second can burn over $194,000 in one day on 3D generation.

Related Skills

Explore More Software Engineering Skills→
AgentiveCityAgentiveCity
2

hono-r2-integration

Integrate Cloudflare R2 storage into Hono TypeScript apps on Workers.

Official
Advanced
leadgenjayleadgenjay
11

brand-image-generator

Generate brand-consistent visuals for marketing assets using fal.ai FLUX.1.

Community
Intermediate
jhlee0409jhlee0409
4

boundary-checker

Detect FSD import boundary violations in TypeScript/JavaScript codebases.

Community
Intermediate
PlayableIntelligencePlayableIntelligence
307

add-3d-assets

Replace primitive 3D shapes with animated GLB models in Three.js games.

Official
Advanced