@dcl-regenesislabs/opendcl 0.1.0-22239132687.commit-eccf1dd → 0.1.0-22312642473.commit-ea3ce8c

package/skills/build-ui/SKILL.md

@@ -11,25 +11,23 @@ Decentraland SDK7 uses a React-like JSX system for 2D UI overlays.
 
 ### File: src/ui.tsx
 ```tsx
-import ReactEcs, { UiEntity, Label, Button } from '@dcl/sdk/react-ecs'
-
-function MyUI() {
-  return (
-    <UiEntity
-      uiTransform={{
-        width: '100%',
-        height: '100%',
-        justifyContent: 'center',
-        alignItems: 'center'
-      }}
-    >
-      <Label value="Hello Decentraland!" fontSize={24} />
-    </UiEntity>
-  )
-}
+import ReactEcs, { ReactEcsRenderer, UiEntity, Label, Button } from '@dcl/sdk/react-ecs'
+
+const MyUI = () => (
+  <UiEntity
+    uiTransform={{
+      width: '100%',
+      height: '100%',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }}
+  >
+    <Label value="Hello Decentraland!" fontSize={24} />
+  </UiEntity>
+)
 
 export function setupUi() {
-  ReactEcs.setUiRenderer(MyUI)
+  ReactEcsRenderer.setUiRenderer(MyUI)
 }
 ```
 
@@ -56,6 +54,8 @@ export function main() {
 
 ### UiEntity (Container)
 ```tsx
+import { Color4 } from '@dcl/sdk/math'
+
 <UiEntity
   uiTransform={{
     width: 300,              // Pixels or '50%'
@@ -70,17 +70,19 @@ export function main() {
     display: 'flex'           // 'flex' | 'none' (hide)
   }}
   uiBackground={{
-    color: { r: 0, g: 0, b: 0, a: 0.8 } // Semi-transparent black
+    color: Color4.create(0, 0, 0, 0.8) // Semi-transparent black
   }}
 />
 ```
 
 ### Label (Text)
 ```tsx
+import { Color4 } from '@dcl/sdk/math'
+
 <Label
   value="Score: 100"
   fontSize={18}
-  color={{ r: 1, g: 1, b: 1, a: 1 }}
+  color={Color4.White()}
   textAlign="middle-center"
   font="sans-serif"
   uiTransform={{ width: 200, height: 30 }}
@@ -103,12 +105,16 @@ export function main() {
 ### Input
 ```tsx
 import { Input } from '@dcl/sdk/react-ecs'
+import { Color4 } from '@dcl/sdk/math'
 
 <Input
   placeholder="Type here..."
   fontSize={14}
-  color={{ r: 1, g: 1, b: 1, a: 1 }}
+  color={Color4.White()}
   uiTransform={{ width: 250, height: 35 }}
+  onChange={(value) => {
+    console.log('Value changing:', value)
+  }}
   onSubmit={(value) => {
     console.log('Submitted:', value)
   }}
@@ -135,45 +141,45 @@ import { Dropdown } from '@dcl/sdk/react-ecs'
 Use module-level variables for UI state (React hooks are NOT available):
 
 ```tsx
+import { Color4 } from '@dcl/sdk/math'
+
 let score = 0
 let showMenu = false
 
-function GameUI() {
-  return (
-    <UiEntity uiTransform={{ width: '100%', height: '100%' }}>
-      {/* HUD - always visible */}
-      <Label
-        value={`Score: ${score}`}
-        fontSize={20}
+const GameUI = () => (
+  <UiEntity uiTransform={{ width: '100%', height: '100%' }}>
+    {/* HUD - always visible */}
+    <Label
+      value={`Score: ${score}`}
+      fontSize={20}
+      uiTransform={{
+        positionType: 'absolute',
+        position: { top: 10, left: 10 }
+      }}
+    />
+
+    {/* Menu - conditionally shown */}
+    {showMenu && (
+      <UiEntity
         uiTransform={{
+          width: 300,
+          height: 400,
           positionType: 'absolute',
-          position: { top: 10, left: 10 }
+          position: { top: '50%', left: '50%' }
         }}
-      />
-
-      {/* Menu - conditionally shown */}
-      {showMenu && (
-        <UiEntity
-          uiTransform={{
-            width: 300,
-            height: 400,
-            positionType: 'absolute',
-            position: { top: '50%', left: '50%' }
-          }}
-          uiBackground={{ color: { r: 0.1, g: 0.1, b: 0.1, a: 0.9 } }}
-        >
-          <Label value="Game Menu" fontSize={24} />
-          <Button
-            value="Resume"
-            variant="primary"
-            onMouseDown={() => { showMenu = false }}
-            uiTransform={{ width: 200, height: 40 }}
-          />
-        </UiEntity>
-      )}
-    </UiEntity>
-  )
-}
+        uiBackground={{ color: Color4.create(0.1, 0.1, 0.1, 0.9) }}
+      >
+        <Label value="Game Menu" fontSize={24} />
+        <Button
+          value="Resume"
+          variant="primary"
+          onMouseDown={() => { showMenu = false }}
+          uiTransform={{ width: 200, height: 40 }}
+        />
+      </UiEntity>
+    )}
+  </UiEntity>
+)
 
 // Update state from game logic
 export function addScore(points: number) {
@@ -189,25 +195,25 @@ export function toggleMenu() {
 
 ### Health Bar
 ```tsx
+import { Color4 } from '@dcl/sdk/math'
+
 let health = 100
 
-function HealthBar() {
-  return (
+const HealthBar = () => (
+  <UiEntity
+    uiTransform={{
+      width: 200, height: 20,
+      positionType: 'absolute',
+      position: { bottom: 20, left: '50%' }
+    }}
+    uiBackground={{ color: Color4.create(0.3, 0.3, 0.3, 0.8) }}
+  >
     <UiEntity
-      uiTransform={{
-        width: 200, height: 20,
-        positionType: 'absolute',
-        position: { bottom: 20, left: '50%' }
-      }}
-      uiBackground={{ color: { r: 0.3, g: 0.3, b: 0.3, a: 0.8 } }}
-    >
-      <UiEntity
-        uiTransform={{ width: `${health}%`, height: '100%' }}
-        uiBackground={{ color: { r: 0.2, g: 0.8, b: 0.2, a: 1 } }}
-      />
-    </UiEntity>
-  )
-}
+      uiTransform={{ width: `${health}%`, height: '100%' }}
+      uiBackground={{ color: Color4.create(0.2, 0.8, 0.2, 1) }}
+    />
+  </UiEntity>
+)
 ```
 
 ### Image Background
@@ -228,4 +234,4 @@ function HealthBar() {
 - UI is rendered as a 2D overlay on top of the 3D scene
 - Use `display: 'none'` in `uiTransform` to hide elements without removing them
 - File extension must be `.tsx` for JSX support
-- Only one `ReactEcs.setUiRenderer()` call per scene — combine all UI into one root component
+- Only one `ReactEcsRenderer.setUiRenderer()` call per scene — combine all UI into one root component

package/skills/camera-control/SKILL.md

@@ -10,7 +10,7 @@ description: Control camera behavior in Decentraland scenes. Switch between firs
 Access the camera's current position and rotation via the reserved `engine.CameraEntity`:
 
 ```typescript
-import { engine, Transform, CameraMode, CameraType } from '@dcl/sdk/ecs'
+import { engine, Transform } from '@dcl/sdk/ecs'
 
 function trackCamera() {
   if (!Transform.has(engine.CameraEntity)) return
@@ -28,6 +28,8 @@ engine.addSystem(trackCamera)
 Check whether the player is in first-person or third-person:
 
 ```typescript
+import { engine, CameraMode, CameraType } from '@dcl/sdk/ecs'
+
 function checkCameraMode() {
   if (!CameraMode.has(engine.CameraEntity)) return
 
@@ -73,7 +75,7 @@ When the player leaves the area, the camera reverts to their preferred mode.
 Create scripted camera positions for cutscenes or special views:
 
 ```typescript
-import { engine, Transform, VirtualCamera, CameraTransition } from '@dcl/sdk/ecs'
+import { engine, Transform, VirtualCamera, MainCamera } from '@dcl/sdk/ecs'
 import { Vector3, Quaternion } from '@dcl/sdk/math'
 
 const cinematicCam = engine.addEntity()
@@ -84,16 +86,23 @@ Transform.create(cinematicCam, {
 
 VirtualCamera.create(cinematicCam, {
   defaultTransition: {
-    transitionMode: CameraTransition.CT_SPEED,
-    speed: 1.0
+    transitionMode: VirtualCamera.Transition.Speed(1.0)
   }
 })
+
+// Activate the virtual camera
+MainCamera.getMutable(engine.CameraEntity).virtualCameraEntity = cinematicCam
+
+// Return to normal camera
+MainCamera.getMutable(engine.CameraEntity).virtualCameraEntity = undefined
 ```
 
 ### Transition Modes
 
-- `CameraTransition.CT_SPEED` — smooth transition at a fixed speed
-- Higher `speed` values = faster camera movement to the virtual camera position
+```typescript
+VirtualCamera.Transition.Speed(1.0)  // Speed-based smooth transition
+VirtualCamera.Transition.Time(2)     // Time-based transition (2 seconds)
+```
 
 ### Look-At Target
 
@@ -106,10 +115,12 @@ Transform.create(target, { position: Vector3.create(8, 1, 8) })
 VirtualCamera.create(cinematicCam, {
   lookAtEntity: target,
   defaultTransition: {
-    transitionMode: CameraTransition.CT_SPEED,
-    speed: 2.0
+    transitionMode: VirtualCamera.Transition.Speed(2.0)
   }
 })
+
+// Activate
+MainCamera.getMutable(engine.CameraEntity).virtualCameraEntity = cinematicCam
 ```
 
 ## Tracking Camera Position
@@ -117,7 +128,7 @@ VirtualCamera.create(cinematicCam, {
 Poll camera position each frame for camera-triggered events:
 
 ```typescript
-import { engine, Transform, CameraMode, CameraType } from '@dcl/sdk/ecs'
+import { engine, Transform } from '@dcl/sdk/ecs'
 import { Vector3 } from '@dcl/sdk/math'
 
 let lastNotifiedZone = ''

package/skills/create-scene/SKILL.md

@@ -16,11 +16,26 @@ If the user hasn't described their scene, ask them:
 
 ## 2. Scaffold the Project with `/init`
 
-**Always run `/init` first.** This uses the official `@dcl/sdk-commands init` to create scene.json, package.json, tsconfig.json, and src/index.ts with the correct, up-to-date configuration.
+**Always run `/init` first.** This uses the official `@dcl/sdk-commands init` to create scene.json, package.json, tsconfig.json, and src/index.ts with the correct, up-to-date configuration, and installs dependencies automatically.
 
 Never manually create scene.json, package.json, or tsconfig.json — the SDK templates may change between versions and hand-written copies will diverge.
 
-## 3. Customize the Generated Files
+## 3. Find Matching 3D Assets
+
+Before writing scene code, check both asset catalogs for free models that match the user's theme:
+
+1. Read `context/asset-packs-catalog.md` (2,700+ Creator Hub models — furniture, structures, decorations, nature, etc.)
+2. Read `context/open-source-3d-assets.md` (991 CC0 models — cyberpunk, medieval, nature, sci-fi, etc.)
+3. Suggest matching models to the user
+4. Download selected models into the scene's `models/` directory:
+   ```bash
+   mkdir -p models
+   curl -o models/arcade_machine.glb "https://builder-items.decentraland.org/contents/bafybei..."
+   ```
+
+> **Important**: `GltfContainer` only works with local files. Never use external URLs for the model `src` field.
+
+## 4. Customize the Generated Files
 
 After `/init` completes, customize the generated files based on what the user wants:
 
@@ -51,12 +66,11 @@ export function main() {
 }
 ```
 
-## 4. Post-Creation Steps
+## 5. Post-Creation Steps
 
-After creating the files, tell the user:
-1. Run `npm install` to install dependencies
-2. Use the `preview` tool to start the preview server (or run `npx @dcl/sdk-commands start --bevy-web` manually)
-3. The scene will open in a browser at http://localhost:8000
+After customizing the files:
+1. Use the `preview` tool to start the preview server (or run `npx @dcl/sdk-commands start --bevy-web` manually)
+2. The scene will open in a browser at http://localhost:8000
 
 ## Important Notes
 

package/skills/lighting-environment/SKILL.md

@@ -39,6 +39,8 @@ LightSource.create(light, {
 Emit a cone of light in a direction:
 
 ```typescript
+import { Quaternion } from '@dcl/sdk/math'
+
 const spotlight = engine.addEntity()
 Transform.create(spotlight, {
   position: Vector3.create(8, 4, 8),
@@ -175,10 +177,10 @@ For a visual glow without casting light on surroundings:
 import { engine, Material } from '@dcl/sdk/ecs'
 import { Color4, Color3 } from '@dcl/sdk/math'
 
-// Self-illuminated material
+// Self-illuminated material (emissiveColor uses Color3, not Color4)
 Material.setPbrMaterial(entity, {
   albedoColor: Color4.create(0, 0, 0, 1),
-  emissiveColor: Color4.create(0, 1, 0, 1),  // Green glow
+  emissiveColor: Color3.create(0, 1, 0),  // Green glow
   emissiveIntensity: 2.0
 })
 ```
@@ -190,7 +192,7 @@ For an object that both glows visually and casts light:
 ```typescript
 // Visual glow on the mesh
 Material.setPbrMaterial(bulb, {
-  emissiveColor: Color4.create(1, 0.9, 0.7, 1),
+  emissiveColor: Color3.create(1, 0.9, 0.7),
   emissiveIntensity: 1.5
 })
 

package/skills/multiplayer-sync/SKILL.md

@@ -9,25 +9,29 @@ Decentraland scenes are inherently multiplayer. All players in the same scene sh
 
 ## How Sync Works
 
-- Components on entities created via `engine.addEntity()` are **automatically synced** between all players in the scene.
+- Entities must be explicitly synced using `syncEntity()` from `@dcl/sdk/network`.
 - The Decentraland runtime uses CRDTs (Conflict-free Replicated Data Types) to resolve conflicts.
 - Last-write-wins semantics for most components (Transform, Material, etc.).
 - No server code needed — sync is built into the runtime.
 
 ## Basic Synced Entity
 
-Any entity with standard components syncs automatically:
+Use `syncEntity()` to mark an entity and its components for multiplayer sync:
 
 ```typescript
 import { engine, Transform, MeshRenderer, Material } from '@dcl/sdk/ecs'
+import { syncEntity } from '@dcl/sdk/network'
 import { Vector3, Color4 } from '@dcl/sdk/math'
 
-// This entity and all its components sync to all players
+// Create entity
 const sharedCube = engine.addEntity()
 Transform.create(sharedCube, { position: Vector3.create(8, 1, 8) })
 MeshRenderer.setBox(sharedCube)
 Material.setPbrMaterial(sharedCube, { albedoColor: Color4.Red() })
 
+// Sync this entity's Transform to all players
+syncEntity(sharedCube, [Transform.componentId])
+
 // When any player changes the transform, all players see it
 function moveCube() {
   const transform = Transform.getMutable(sharedCube)
@@ -37,23 +41,25 @@ function moveCube() {
 
 ## Custom Synced Components
 
-Define custom components that sync between players:
+Define custom components and sync them between players:
 
 ```typescript
 import { engine, Schemas } from '@dcl/sdk/ecs'
+import { syncEntity } from '@dcl/sdk/network'
 
-// Define a custom synced component
+// Define a custom component
 const ScoreBoard = engine.defineComponent('scoreBoard', {
   score: Schemas.Int,
   playerName: Schemas.String,
   lastUpdated: Schemas.Int64
 })
 
-// Use it on an entity — automatically syncs
+// Create and sync the entity
 const board = engine.addEntity()
 ScoreBoard.create(board, { score: 0, playerName: '', lastUpdated: 0 })
+syncEntity(board, [ScoreBoard.componentId])
 
-// Update from any player
+// Update from any player — synced via CRDT
 function addScore(points: number) {
   const data = ScoreBoard.getMutable(board)
   data.score += points
@@ -124,9 +130,10 @@ engine.addSystem(() => {
 
 ## Important Notes
 
-- **All component changes sync automatically** — no explicit "send" calls needed
+- **Entities must be explicitly synced** via `syncEntity(entity, [componentIds])` — pass the `componentId` of each component to sync
 - **CRDT resolution**: If two players change the same component simultaneously, last-write-wins
 - **No server-side code**: Decentraland scenes run entirely client-side with CRDT sync
 - **Entity limits apply**: Each synced entity counts toward the scene's entity budget
 - **Custom schemas must be deterministic**: Same component name = same schema across all clients
+- **Use `Schemas.Int64` for timestamps**: `Schemas.Number` corrupts large numbers (13+ digits). Always use `Schemas.Int64` for values like `Date.now()`
 - For server-authoritative multiplayer with validation and anti-cheat, see the `authoritative-server` skill

package/skills/player-avatar/SKILL.md

@@ -138,13 +138,34 @@ Transform.create(npc, { position: Vector3.create(8, 0, 8) })
 AvatarShape.create(npc, {
   id: 'npc-1',
   name: 'Guard',
+  bodyShape: 'urn:decentraland:off-chain:base-avatars:BaseMale',  // or BaseFemale
   wearables: [
-    'urn:decentraland:off-chain:base-avatars:f_eyes_01',
-    'urn:decentraland:off-chain:base-avatars:f_eyebrows_01',
-    'urn:decentraland:off-chain:base-avatars:f_mouth_01',
-    'urn:decentraland:off-chain:base-avatars:sport_jacket',
-    'urn:decentraland:off-chain:base-avatars:oxford_pants'
-  ]
+    'urn:decentraland:off-chain:base-avatars:eyebrows_00',
+    'urn:decentraland:off-chain:base-avatars:mouth_00',
+    'urn:decentraland:off-chain:base-avatars:eyes_00',
+    'urn:decentraland:off-chain:base-avatars:blue_tshirt',
+    'urn:decentraland:off-chain:base-avatars:brown_pants',
+    'urn:decentraland:off-chain:base-avatars:classic_shoes',
+    'urn:decentraland:off-chain:base-avatars:short_hair'
+  ],
+  hairColor: { r: 0.92, g: 0.76, b: 0.62 },  // RGB values 0-1
+  skinColor: { r: 0.94, g: 0.85, b: 0.6 },   // RGB values 0-1
+  emotes: []
+})
+```
+
+### Mannequin (Show Only Wearables)
+
+Display just the wearables without a full avatar body:
+
+```typescript
+AvatarShape.create(mannequin, {
+  id: 'mannequin-1',
+  name: 'Display',
+  wearables: [
+    'urn:decentraland:matic:collections-v2:0x90e5cb2d673699be8f28d339c818a0b60144c494:0'
+  ],
+  show_only_wearables: true
 })
 ```