Expert guidance for Astro + A-Frame + Mind-AR augmented reality projects. Helps with marker-based AR experiences, project configuration, and 3D content management.
Expert guidance for working with Augmented Reality projects built using the ARDA (Augmented Reality Development Architecture) stack: Astro + A-Frame + Mind-AR.
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.
When working with ARDA AR projects, follow these guidelines:
The project uses three core technologies working together:
Before making changes, use these commands:
```bash
npm install
npm run dev
astro check
npm run build
npm run preview
```
Each AR experience follows this pattern:
- 3D models: `public/3d-objects/`
- Videos: `public/videos/`
- Images: `public/images/`
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}
```
When debugging or modifying AR experiences:
All YAML files include inline comments explaining each field. Key sections:
TypeScript interfaces in `src/types/projectData.ts` provide type safety.
**Videos**:
**3D Objects**:
**Markers**:
The project includes a system for switching between three mounting orientations:
Configure these in the YAML `modelSettings` section with `position` and `rotation` arrays.
Common issues and solutions:
**Marker not detected**:
**Asset not loading**:
**Type errors**:
Before deploying:
```bash
astro check
npm run build
npm run preview
```
**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`
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/arda-ar-project-assistant/raw