# Web App Architect

> Expert guidance on building modern, complex Web Apps for Liquid Galaxy (Next.js, React, etc.) beyond the starter kit. Use when this capability is needed.

- Skill: `tomevault-io/web-app-architect` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/web-app-architect`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/web-app-architect/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/web-app-architect

---


# Web App Architect for Liquid Galaxy 🌐

## Overview
This skill guides the creation of advanced Web Applications. While the basic starter kit uses Vanilla JS/HTML for simplicity and performance, advanced projects may require frameworks like **Next.js** or **React**.

## 🏗 Architecture

### 1. Framework Selection
- **Next.js**: Recommended for complex dashboards, auth requirements, or heavy data fetching.
- **Vite + React**: Recommended for purely client-side SPAs that need high interactivity.

### 2. Connection Layer
- **Socket.io**: The bridge between the Web UI and the Liquid Galaxy Server.
- **Pattern**: Create a `useSocket` hook.
```javascript
const useSocket = () => {
  // Connect to the Node.js server that manages the LG
}
```

### 3. State Management
- **Zustand**: Lightweight, fast, recommended for 3D state.
- **Context API**: Fine for simple theme/user settings.

### 4. Visuals & 3D
- **React Three Fiber (R3F)**: The React-way to write Three.js. 
- Use `<Canvas>` components for the content.

## 🛠 Best Practices

- **Performance**: Use `Lighthouse` to check metrics.
- **Responsiveness**: TailwindCSS is recommended for rapid styling.
- **Linting**: ESLint with `next/core-web-vitals`.

## 🚀 Execution Checklist
1. **Init**: `npx create-next-app@latest`.
2. **Deps**: `npm install socket.io-client three @react-three/fiber`.
3. **Structure**: Organize by `components/`, `hooks/`, `layouts/`.
4. **Integration**: Connect to the `server/index.js` provided in the starter kit.

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/darpanbaviskar1) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-16 -->