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 16 stars 2 forks Updated today MIT

Install

View on GitHub

Quality Score: 86/100

Stars 20%
41
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
today
Language
Python
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

frontend-studio

Design and build distinctive, production-grade frontend interfaces (components, pages, landing pages, dashboards, web apps, artifacts) that never look templated or AI-generated. Combines a creative design-direction process, a numeric design-system foundation (spacing, type, color, depth, contrast) and senior frontend engineering (stack detection, React/Next.js, Tailwind v3/v4, motion, performance, UI states). Use this skill whenever the user asks to build, design, style, restyle, polish, redesign or critique any web UI, component, layout, website section, HTML/CSS page, React component or dashboard, even if they never say the word design. Also trigger when the user wants an existing interface to look better, more professional or less generic, and for words like frontend, UI, UX, interface, layout, landing page, hero, component, mockup, design system or styling.

0 Updated 2 weeks ago
czarnikrobert
Web & Frontend Listed

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.

8 Updated 2 days ago
vanducng
AI & Automation Listed

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.

24 Updated today
byerlikaya