ARDA AR Project Assistant

Expert guidance for working with Augmented Reality projects built using the ARDA (Augmented Reality Development Architecture) stack: Astro + A-Frame + Mind-AR.

What This Skill Does

This skill provides specialized knowledge for developing marker-based AR experiences that run in web browsers. It understands the project's architecture, configuration system, asset pipeline, and development workflows.

Instructions

When working with ARDA AR projects, follow these guidelines:

1. Understanding the Tech Stack

The project uses three core technologies working together:

2. Development Commands

Before making changes, use these commands:

```bash

Install dependencies (first time)

npm install

Start development server (localhost:4321)

npm run dev

Check types before committing

astro check

Build for production

npm run build

Preview production build

npm run preview

```

3. Project Structure Navigation

Each AR experience follows this pattern:

- 3D models: `public/3d-objects/`

- Videos: `public/videos/`

- Images: `public/images/`

4. Creating New AR Experiences

When the user wants to add a new AR experience:

1. **Copy the template**:

```bash

cp src/data/projectData/general-marker-template.yaml src/data/projectData/{project-name}.yaml

```

2. **Configure the YAML file** - Read the inline comments in the template to understand each field:

- `experienceType`: Choose "video", "image", or "3d-object"

- `markerFile`: Path to compiled `.mind` marker file

- `modelSettings`: Configure position/rotation for wall/flat/card orientations

- `uiPreset`: Choose UI messaging style ("default", "product", "artwork")

- `splashPage`: Set background images and branding

3. **Prepare the marker**:

- The user must compile their marker image at: https://hiukim.github.io/mind-ar-js-doc/tools/compile/

- Save the compiled `.mind` file to `public/markers/{name}.mind`

- Keep the original marker image in `public/markers/` for reference

4. **Add assets**:

- Place 3D models (GLTF format) in `public/3d-objects/`

- Place videos (MP4, supports alpha/green screen) in `public/videos/`

- Place images in `public/images/`

5. **Test the experience**:

```bash

npm run dev

# Visit localhost:4321/{project-name}

```

5. Key Components to Know

When debugging or modifying AR experiences:

6. Working with Project Configuration

All YAML files include inline comments explaining each field. Key sections:

TypeScript interfaces in `src/types/projectData.ts` provide type safety.

7. Asset Pipeline Best Practices

**Videos**:

**3D Objects**:

**Markers**:

8. Position Control System

The project includes a system for switching between three mounting orientations:

Configure these in the YAML `modelSettings` section with `position` and `rotation` arrays.

9. Debugging AR Experiences

Common issues and solutions:

**Marker not detected**:

**Asset not loading**:

**Type errors**:

10. Production Build

Before deploying:

```bash

Run type checking

astro check

Build for production (uses increased memory allocation)

npm run build

Preview the build

npm run preview

```

Example Usage

**User request**: "Add a new AR experience for a product demo video"

**Your response**:

1. Copy the template: `cp src/data/projectData/general-marker-template.yaml src/data/projectData/product-demo.yaml`

2. Edit `product-demo.yaml`:

- Set `experienceType: "video"`

- Set `markerFile: "/markers/product-marker.mind"`

- Configure `modelSettings` for wall mounting

- Set `uiPreset: "product"` for product-focused messaging

- Add splash page branding

3. Remind user to compile their marker at https://hiukim.github.io/mind-ar-js-doc/tools/compile/

4. Add the video file to `public/videos/product-demo.mp4`

5. Test with `npm run dev` and visit `localhost:4321/product-demo`

Important Notes