ar-vr-design
Designs interactive AR/VR experiences using 3D modeling, spatial computing, and user interface optimization.
What this skill does
# ar-vr-design
## Purpose
This skill designs interactive AR/VR experiences by integrating 3D modeling, spatial computing, and UI optimization, enabling creation of immersive environments for applications like virtual training or augmented overlays.
## When to Use
Use this skill for projects requiring 3D asset manipulation, spatial interactions, or VR-specific UI tweaks, such as developing a virtual museum tour or AR product visualization in e-commerce apps.
## Key Capabilities
- Import and export 3D models in formats like GLTF or OBJ using built-in parsers.
- Perform spatial computing tasks, such as room-scale mapping with algorithms for occlusion and collision detection.
- Optimize UI for AR/VR devices, including rendering adjustments for headsets like Oculus or HoloLens to reduce latency below 20ms.
- Simulate user interactions in a virtual environment to test gesture controls or haptic feedback.
## Usage Patterns
To accomplish tasks, follow these steps: First, initialize a project with required configs; then, build and manipulate 3D assets; next, apply spatial computing for interactions; finally, optimize and simulate. Always set environment variables for authentication, e.g., export SERVICE_API_KEY=your_key before running commands. For integration, wrap skill outputs in a main application loop.
## Common Commands/API
Use the `arvr-cli` tool for core operations. Authenticate via $ARVR_API_KEY environment variable.
- Command: `arvr-cli init --project myvrapp --type vr`
- Initializes a new VR project; add `--ar` flag for AR mode.
- Example snippet:
```
export ARVR_API_KEY=abc123
arvr-cli init --project myvrapp
```
- API Endpoint: POST /api/vr/models
- Uploads a 3D model; requires JSON payload with { "model": "path/to/model.gltf", "scale": 1.5 }.
- Example snippet:
```
curl -H "Authorization: Bearer $ARVR_API_KEY" -X POST -d '{"model": "asset.gltf"}' https://api.openclaw.com/api/vr/models
```
- Command: `arvr-cli optimize --input model.obj --device oculus`
- Optimizes model for specific devices; outputs optimized file.
- Example snippet:
```
arvr-cli optimize --input scene.glb --device hololens
```
- API Endpoint: GET /api/ar/spatial-map
- Retrieves spatial data; query with parameters like ?roomSize=10x10.
- Example snippet:
```
curl -H "Authorization: Bearer $ARVR_API_KEY" https://api.openclaw.com/api/ar/spatial-map?roomSize=5x5
```
Config formats: Use JSON for project configs, e.g., { "assets": ["model1.obj"], "spatialSettings": { "gravity": 9.8 } }.
## Integration Notes
Integrate this skill into workflows by importing outputs into engines like Unity or Unreal. For example, after running `arvr-cli init`, copy generated files to a Unity project and reference them in scripts. Use $ARVR_API_KEY for API calls in custom code. To chain with other skills, pipe outputs via stdin/stdout, e.g., output from a 3D modeling skill into this one's input. Ensure compatibility by matching formats: always convert models to GLTF before integration.
## Error Handling
Handle errors by checking exit codes from commands; for API calls, parse HTTP responses. Common issues:
- Authentication failure: If $ARVR_API_KEY is invalid, commands return code 401—fix by verifying and exporting the correct key.
- Invalid model format: Use `arvr-cli validate --file model.obj`; if it fails with code 400, convert the file using a tool like Blender.
- Example snippet for error checking:
```
response=$(curl ...); if [ $? -ne 0 ]; then echo "API error: $response"; fi
```
Always wrap API calls in try-catch blocks in scripts, e.g., in Python: try: requests.post(url) except Exception as e: log_error(e).
## Concrete Usage Examples
1. Design a simple AR overlay for a mobile app: First, run `arvr-cli init --project ar-overlay --type ar`. Then, upload a 3D model with `curl -X POST -d '{"model": "overlay.glb"}' https://api.openclaw.com/api/vr/models`. Optimize for mobile: `arvr-cli optimize --input overlay.glb --device android`. Finally, integrate the output into an Android app using Unity's AR Foundation.
2. Create a VR simulation for training: Initialize with `arvr-cli init --project vr-training --type vr`. Add spatial mapping: `curl https://api.openclaw.com/api/ar/spatial-map?roomSize=10x10`. Build interactions: Use the API to simulate gestures, then test with `arvr-cli simulate --project vr-training`. Export and import into Unreal Engine for full deployment.
## Graph Relationships
- Related to cluster: ar-vr (e.g., shares tags with skills like ar-vr-development).
- Connected via tags: ["ar-vr"] links to other AR/VR skills; ["design"] connects to ui-design and 3d-modeling skills.
- Dependencies: Requires outputs from 3d-modeling skills as inputs.
Related in Design
contribute
IncludedLocal-only OSS contribution command center. Auto-refreshes the user's in-flight PR and issue state on invoke so conversations start with full context — no need to brief Claude on what's in flight. Helps the user find issues to contribute to on GitHub, builds per-repo dossiers of what each upstream expects (CLA, DCO, branch convention, AI policy, draft-first, review bots, issue templates), runs deterministic gates before any external action so AI-assisted contributions don't reach maintainers as slop. State is markdown-only: candidate files at ~/.contribute-system/candidates/, repo dossiers at ~/.contribute-system/research/, append-only event log at ~/.contribute-system/log.jsonl. No database, no cloud calls. Use when the user asks about their PRs / issues / contributions, wants to find new work to take on, claim an issue, build/refresh a repo's dossier, or draft a Design Issue or PR. Trigger with "/contribute", "what's my PR status", "find a contribution", "claim issue X", "draft a Design Issue for Y", "refresh dossier for Z".
architectural-analysis
IncludedUser-triggered deep architectural analysis of a codebase or scoped subtree across eight modes — information architecture, data flow, integration points, UI surfaces, interaction patterns, data model, control flow, and failure modes. This skill should be used when the user asks to "diagram this codebase," "map the architecture," "show the data flow," "give me an ERD," "trace control flow," "find the integration points," "verify the layout pattern," "audit the UX architecture," or any similar request whose primary deliverable is mermaid diagrams plus cited reports under docs/architecture/. Dispatches haiku/sonnet sub-agents in parallel for per-mode exploration, then verifies every citation mechanically before any node lands in a diagram. Not for one-off prose explanations of code (use code-explanation) or for high-level system design from scratch (use system-design).
mcp
IncludedModel Context Protocol (MCP) server development and tool management. Languages: Python, TypeScript. Capabilities: build MCP servers, integrate external APIs, discover/execute MCP tools, manage multi-server configs, design agent-centric tools. Actions: create, build, integrate, discover, execute, configure MCP servers/tools. Keywords: MCP, Model Context Protocol, MCP server, MCP tool, stdio transport, SSE transport, tool discovery, resource provider, prompt template, external API integration, Gemini CLI MCP, Claude MCP, agent tools, tool execution, server config. Use when: building MCP servers, integrating external APIs as MCP tools, discovering available MCP tools, executing MCP capabilities, configuring multi-server setups, designing tools for AI agents.
react-native-skia
IncludedDesign, build, debug, and optimise high-polish animated graphics in React Native or Expo using @shopify/react-native-skia, Reanimated, and Gesture Handler. Use when the user wants canvas-driven UI, shaders, paths, rich text, image filters, sprite fields, Skottie, video frames, snapshots, web CanvasKit setup, or performance tuning for custom motion-heavy elements such as loaders, hero art, cards, charts, progress indicators, particle systems, or gesture-driven surfaces. Also use when the user asks for fluid, glow, glass, blob, parallax, 60fps/120fps, or GPU-friendly animated effects in React Native, even if they do not explicitly say "Skia". Do not use for ordinary form/layout work with standard views.
plaid
IncludedProduct Led AI Development — guides founders from idea to launched product. Six capabilities: Idea (discover a product idea), Validate (pressure-test the idea against fatal flaws, problem reality, competition, and 2-week MVP feasibility), Plan (vision intake + document generation), Design (translate image references into a design.md spec), Launch (go-to-market strategy), and Build (roadmap execution). Use when someone says "PLAID", "plaid idea", "help me find an idea", "product idea", "idea from my business", "idea from my expertise", "plaid validate", "validate my idea", "pressure-test", "is this idea good", "find fatal flaws", "validate the problem", "plan a product", "define my vision", "generate a PRD", "product strategy", "plaid design", "design from image", "translate image to design", "create design.md", "extract design tokens", "plaid launch", "go-to-market", "launch plan", "GTM strategy", "launch playbook", "plaid build", "build the app", "start building", or "execute the roadmap".
nextjs-framer-motion-animations
IncludedAdds production-safe Motion for React or Framer Motion animations to Next.js apps, including reveal, hover and tap micro-interactions, whileInView, stagger, AnimatePresence, layout and layoutId transitions, reorder, scroll-linked UI, and lightweight route-content transitions. Use when the user asks to add, refactor, or debug Motion or Framer Motion in App Router or Pages Router codebases, especially around server/client boundaries, reduced motion, LazyMotion, bundle size, hydration, or route transitions. Avoid for GSAP-style timelines, WebGL or 3D scenes, heavy scroll storytelling, or CSS-only effects unless Motion is explicitly requested.