holix-studio-frontend-backend

Solid

Run frontend (and FE+BE) apps in Holix Studio: always bind 0.0.0.0, always open Studio preview links in chat, always prefer docker-compose with an nginx reverse proxy that joins frontend and backend. Use when starting Vite/Next/Nuxt/React, SPA+API monorepos, or any web app the user should open in Studio Browser. Invoke via /holix-studio-frontend-backend.

Web & Frontend 14 stars 2 forks Updated 3 days ago MIT

Install

View on GitHub

Quality Score: 86/100

Stars 20%
39
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

## When to use (always in Studio) Apply this skill **whenever** you start, fix, or demo a **web** frontend (or FE+API) in Holix Studio: - User asks to run the app, open the UI, “подними фронт”, “запусти preview”, “открой в браузере” - Project has Vite / Next / Nuxt / CRA / static SPA ± API - You are about to say the app is ready This skill is **platform / required**: do not ignore it for Studio web work. ## Non‑negotiable rules 1. **Listen on `0.0.0.0` (never only `127.0.0.1`)** for any process that Studio Preview must reach (Vite/Nuxt `host: '0.0.0.0'`, uvicorn `--host 0.0.0.0`, nginx published port, etc.). 2. **Always form real preview links in chat** after the app listens: - Call MCP **`open_preview_url(port=…)`** (and for FE+BE, for **every** public port users need). - Paste into the chat reply: `frame_url` / public origin from the tool result (Markdown link). - Never tell the user to open `localhost` / bare `host:port` as the main URL. 3. **Prefer docker-compose + nginx** for “run the app” demos: - One **published** port on the host (nginx). - Frontend and backend only on the **compose network** (expose, not host-publish unless needed). - Nginx routes UI + API on the **same origin** (`/` → FE, `/api/` → BE) so the browser does not need a separate API host when possible. 4. **Do not use Desktop / noVNC** for web apps — only **Studio → Browser** via `open_preview_url`. 5. **Do not claim** “preview is ready” without a successful tool result that ...

Details

Author
javded-itres
Repository
javded-itres/Holix
Created
3 months ago
Last Updated
3 days ago
Language
Python
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Solid

fastreact

Scaffold and build a full-stack web app: FastAPI backend (Python, uv, SQLModel, Postgres, Alembic, JWT + Google OAuth, boto3/S3) + React frontend (Vite, TypeScript, shadcn/ui + Tailwind, TanStack Router/Query/Table, Zod, Axios), wired with Docker Compose. Use this skill whenever the user wants to spin up, bootstrap, create, or design a new full-stack webapp; an API-first backend + SPA frontend; an admin/portal/dashboard app; file upload + S3; RBAC / role-based auth with seeded test users; local docker dev; or asks for a 'FastAPI + React' / 'Python + React' project. Runs mockup-first: marketing-design (brand/logo raster) + opendesign (HTML page mockups) before code, then ports the design to Tailwind/shadcn. Covers project structure, local setup, auth/RBAC, S3 uploads, and the gotchas that break these stacks.

7 Updated today
vanducng
AI & Automation Solid

frontend

Stack-agnostic frontend discipline (web · mobile · desktop): component structure, state, data fetching, loading/empty/error states, i18n, accessibility, performance. frontend-expert-csk applies it on every stack.

22 Updated today
byerlikaya
DevOps & Infrastructure Listed

live-demo

Turn a working robium app into a public, interactive web demo: a mission-control demo page (start/stop instance buttons, live boot terminal, fleet budget), per-visitor simulator instances on Cloud Run (scale-to-zero), and a visualizer handoff (Foxglove deep link or self-hosted viewer). Use when: 'live demo', 'demo page', 'let visitors drive the robot', 'try it live on the website', 'demo instance start/stop', 'host the sim for the demo', choosing the demo visualizer, or budgeting/deploying demo backends. Load after an app passes its smoke test (testing) — a demo hosts a finished app. Pairs with foxglove (bridge/viewer mechanics) and integration (container patterns). Not for: developer-facing visualization during a build (foxglove/rviz2) or general website building.

0 Updated 1 months ago
robium-ai