$ ~/registry/skill/facebook-packages-starter-assets-claude-injections-skills-iwsdk-ui

SKILL

iwsdk-ui

Name: iwsdk-ui
Author: facebook

Create, modify, debug, and preview PanelUI components in IWSDK apps.

Stars

★ 357

Source

GitHub

Updated

2026-07-08

// securityCaution

Prompt only, no code
Open source

Summary

This skill is marked as prompt-only with no required secrets and no declared remote endpoints, so overall risk is low. Its instructions mainly guide an agent to inspect, edit, and verify local UI files, but the source repository has low community adoption and unknown maintenance status, so supply-chain trust deserves some caution.

CredentialsLow risk

The materials explicitly state that no keys or environment variables are required, and there is no request for API tokens, account credentials, or other sensitive authentication data, so credential exposure and abuse risk appears low.

Network egressLow risk

The materials declare no remote endpoints, and the README mainly describes local UI file editing, ECS inspection, and screenshot-based verification, with no factual indication that user data is sent to third-party services.

Code executionLow risk

The system flags it as prompt-only; based on the materials, it provides workflow instructions rather than bundled executables, install scripts, or requests for additional system privileges. While it describes code-editing and debugging steps, there is no clear execution red flag beyond normal skill prompting.

Data accessLow risk

The instructions involve locating panel entities, reading component config, editing `.uikitml` files under `ui/`, and inspecting compiled `public/ui/*.json`, which is consistent with the stated UI panel development purpose. There is no sign of unrelated sensitive data access or excessive authorization requests.

Supply chainCaution

A positive factor is that it is open-source on GitHub and the source is auditable; however, the repository has 0 stars, unknown maintenance status, and no declared license, so evidence of trust and ongoing upkeep is limited. This supports a caution rating rather than high risk.

Recommendations

Use it in an isolated development environment and restrict writable paths to the target project workspace.
Review the repository source and recent commits first to confirm it is genuinely related to IWSDK UI development.
If actual use reveals undeclared network activity, dependency downloads, or extra permission requests, reassess the security posture.
Keep the project under version control or make backups so automated edits can be rolled back easily.

Audited by: gpt-5.4 · 2026-06-16

// install

Copy the install command and let the AI configure it · recommended for beginners

Please install the "iwsdk-ui" skill from askskill:
1. Download https://raw.githubusercontent.com/facebook/immersive-web-sdk/main/packages/starter-assets/claude-injections/skills/iwsdk-ui/SKILL.md
2. Save it as ~/.claude/skills/iwsdk-ui/SKILL.md
3. Reload skills and tell me it's ready

// download

Download SKILL.mdInstall manifest ↗

// examples

Create a new settings panel

Prompt

Create a settings panel for my IWSDK app using UIKITML. Include a title, volume slider, language dropdown, and save button, and provide a clear component structure.

Expected

A PanelUI structure and UIKITML example for IWSDK, including key components and layout guidance.

Modify an existing panel layout

Prompt

Please improve this IWSDK PanelUI: change the buttons to a two-column layout, add top spacing, unify font sizes, and keep the mobile full-screen preview looking good.

Expected

Updated layout suggestions, UIKITML changes, and notes for full-screen preview compatibility.

Debug a UI rendering issue

Prompt

My IWSDK panel has overlapping text and buttons overflowing the boundary in ScreenSpace full-screen preview. Help identify likely causes and provide actionable fixes.

Expected

An analysis of likely causes, style or structure checks to perform, and specific fix recommendations.

// docs

UI Panel Development

Efficiently develop and iterate on IWSDK PanelUI panels using ScreenSpace for full-screen 2D preview. The workflow has a required core (setup for iteration) and optional extensions (the actual UI work, driven by user intent).

User request is in $ARGUMENTS.

Required Core

Step 1: Identify the panel

Find the panel entity and its UIKITML source file.

Panel entities have the PanelUI component. Use ecs_find_entities with withComponents: ["PanelUI"] to find them.
Read the PanelUI component's config field with ecs_query_entity to find the JSON path (e.g., ./ui/welcome.json).
The UIKITML source lives in ui/ with the same name but .uikitml extension (e.g., ui/welcome.uikitml).

Step 2: Set up full-screen preview

The ScreenSpace component positions a panel in front of the camera so it appears as a 2D UI — ideal for fast iteration.

If the entity already has ScreenSpace: Note the current settings so they can be restored later.

ecs_query_entity(entityIndex, components: ["ScreenSpace"]) → save the values

If the entity does not have ScreenSpace: You will need to add it in code.

Either way, set ScreenSpace to fill the entire viewport in code:

.addComponent(ScreenSpace, {
  top: "0px",
  left: "0px",
  width: "100vw",
  height: "100vh",
});

Setting this in code (not via ecs_set_component) ensures it persists across hot reloads.

Step 3: Verify setup

Take a browser_screenshot to confirm the panel fills the screen and is ready for iteration.

UI Editing

This is where the user's request drives the work. Edit the .uikitml file in ui/.

Key facts about UIKITML

UIKITML is a subset of HTML, not all syntax is supported.
Before writing markup, use mcp__iwsdk-reference__search_code to query for supported UIKITML element types and CSS properties. Search for things like "uikitml interpret container text" or specific element types you need.
Supported selectors: #id and .class (via PanelDocument's querySelector).
Units are in centimeters (e.g., width: 50 = 50cm). World space uses meters. 100cm = 1m.
The source of truth is the .uikitml file. Changes are auto-compiled by the vite plugin and hot-reloaded.
The compiled .json file in public/ui/ should never be modified directly, but can be read for quick debugging to inspect the compiled element tree, class definitions, and properties.

Verify changes

After each edit to the .uikitml file:

Wait a moment for the vite plugin to compile and hot-reload.
Take a browser_screenshot to visually verify the change.
If needed, read the compiled JSON (public/ui/<name>.json) to debug layout issues or inspect computed properties.

Repeat the edit-screenshot cycle as needed.

Cleanup (Required)

When done with UI work, always restore the ScreenSpace component to its original state.

If it had ScreenSpace before: Restore the original values that were noted in Step 2.

// Restore original settings
.addComponent(ScreenSpace, {
  top: "20px",
  left: "20px",
  height: "40%",
  // ... whatever was noted
});

If it did not have ScreenSpace before: Remove the ScreenSpace component addition from code.

Take a final browser_screenshot to confirm the panel is back to its normal state.

Notes

Always edit .uikitml, never the compiled .json — the JSON is auto-generated and will be overwritten.
ScreenSpace behavior in VR: When entering VR, ScreenSpace automatically detaches the panel from the camera and it returns to world-space positioning. This is handled by the ScreenSpaceUISystem.
PanelDocument for element access: Use getElementById(id) or querySelector(selector) on the PanelDocument to access UI elements programmatically in systems. Elements can be named with .name = "id" to make them discoverable in the scene hierarchy.

…

View full docs ↗

Implement physics simulation, interactions, and collision debugging in IWSDK projects.

facebookGet→

$ loading_