eitri-tech/eitri-coding

Reference and authoring guide for eitri-bifrost — Eitri's native bridge that exposes device capabilities (navigation, storage, HTTP, camera, code scanner, geolocation, biometrics, clipboard, share, haptic, notifications, file system, deeplinks, tracking, event bus, etc.) to Eitri-app JavaScript. ALWAYS invoke this skill whenever the user asks about Bifrost APIs, calls Eitri.<x> / imports from eitri-bifrost, asks "how do I navigate / store / take a photo / scan a QR code / track an event / open a deeplink / call an HTTP API in Eitri?", or whenever a question requires consulting the official Bifrost typedoc at https://cdn.83io.com.br/library/eitri-bifrost/doc/5.1.0/. Also use when reviewing Eitri code for Bifrost-correctness (no fetch/localStorage/navigator.* — use Bifrost equivalents; await async APIs; canIUse guards for capability gating; permission flow before sensor APIs).

Migrates / adapts UI code generated by Claude Design (raw HTML/JSX with inline styles, device frames, and design canvases) into production-ready Eitri (Luminus + Bifrost) views using TailwindCSS + DaisyUI. ALWAYS invoke this skill whenever the user asks to migrate, port, adapt, convert, or "eitri-fy" code that originated from Claude Design — regardless of where the source lives (a folder the user points at, a single file, or a snippet pasted inline). Recognize Claude Design output by signals like: references to DesignCanvas / DCSection / DCArtboard / IOSDevice / AndroidDevice, screens defined as plain functions returning <div style={{...}}> trees, palette/font objects (const FOO = { primary: '#...' }), inline-styled HTML host files with Babel standalone, etc.

Drive and inspect a running Eitri-App on a real device or simulator — screenshots, taps, swipes, typing, native tab switching, and live DOM/console inspection of the Eitri WebView through the Chrome DevTools Protocol (Android) or the WebKit Inspector (iOS). ALWAYS invoke this skill whenever the work requires observing or interacting with the app as it runs: the user asks to open/run/launch the app, take a screenshot, tap/click/scroll something on the device, check what a screen looks like, reproduce a bug on device, read runtime console errors, confirm a generated view actually renders, or mentions ADB, EitriPlay, emulator, simulator, device, android.py or ios.py. Also invoke it whenever a coding change needs visual or runtime validation on device rather than only a code read.

Reference and authoring guide for the eitri-luminus UI library — Eitri's React + TypeScript + Tailwind + DaisyUI component system used to build native mobile interfaces compiled by Forge and rendered in Eitri-Play. ALWAYS invoke this skill whenever the user asks about Luminus UI components, props, imports, or correct usage; whenever the user is writing/editing JSX that imports from eitri-luminus; whenever the user asks "which Luminus component should I use for X?"; or whenever a question requires consulting the official Luminus docs at https://cdn.83io.com.br/library/luminus-ui/doc/latest/. Also use when reviewing Eitri view code for Luminus-correctness (no raw HTML tags, valid component names, valid props, sizing as direct props, Tailwind/DaisyUI classes via className).

How to use Eitri Shopping's commerce integration libraries — the public SDKs in eitri-tech/eitri-shopping-services-shared that connect an Eitri-App to a commerce backend (VTEX, Wake, Shopify) for catalog, search, cart, checkout, payment, customer, orders and wishlist. ALWAYS invoke this skill when an Eitri-App consumes or should consume one of these libraries — eitri-app-dependencies lists eitri-shopping-*-shared, the code calls Vtex.* / Wake.* / Shopify.*, or the user wants to add e-commerce capability to an Eitri-App. Also invoke when the task is to identify which commerce platform a project runs on, find out what an SDK method does or whether one exists, debug a failing integration call, or decide on an SDK version bump.

Eitri Specialist — expert at developing apps and Eitri-Apps with Eitri (Luminus + Bifrost), plus interacting with Android devices via ADB. MANDATORY, NON-NEGOTIABLE trigger — invoke this skill BEFORE any other action whenever an eitri-app.conf.js or app-config.yaml file exists anywhere in the working directory tree (project root or an immediate subdirectory), or whenever the repo imports eitri-bifrost / eitri-luminus, contains src/views/, or the user mentions Eitri, Eitri-App, Eitri-Play, Forge, Luminus or Bifrost. These files are definitive proof the working directory is an Eitri project; every front-end, coding, build, run or device-interaction task in such a project MUST follow this skill's rules, even if the user never says the word "Eitri".

How to migrate a pre-existing Eitri-App workspace — a single app or a multi-app bundle (e.g. an Eitri Shopping storefront: home/pdp/cart/checkout/account plus a shared library) — from JavaScript to TypeScript, file by file, following Eitri-specific typing conventions (Luminus/Bifrost prop shapes, VTEX/Wake/Shopify payload types, file-based routing props). ALWAYS invoke this skill whenever the user asks to migrate, convert, or port an Eitri-App workspace from JS to TS; whenever a workspace has .js/.jsx source with no tsconfig.json; or whenever the user wants to add TypeScript to an existing Eitri project. Also invoke when interpreting a tsc --noEmit result in an Eitri workspace that consumes a published shared Eitri-App library, or when reviewing a TypeScript-migration PR for an Eitri workspace.

Extract a Figma selection from a URL into a structured design bundle. Use whenever the user provides a figma.com URL with a node-id. Ask which view/screen this is, then run the extract.mjs script using $FIGMA_TOKEN from the environment — no token prompts, no Puppeteer, no Figma MCP. For a local .fig file, fig-extract.mjs writes the same bundle offline (see figma-to-eitri).

Port a Figma design into an Eitri-App — from a figma-scrape bundle at figma/<project>/<view>/ or from a local .fig file (Figma → File → Save local copy), which is converted to the same bundle offline. Use whenever the user wants to implement a Figma screen, section or component in an Eitri project, or hands over a .fig file to port. Detects how the project wires CMS content (file-based _cms/sections.json, a CMS reached through MCP tools, or no CMS), follows the project's own conventions, splits screens into blocks, handles state variants, maps design variables to the theme, and validates the result on device.

Scrape a live website with Playwright and rebuild it 1:1 in the current project's framework — components, styles, tokens, images, copy, responsive behaviour and interaction logic. Use whenever the user wants to clone, replicate, port, recreate, "copy this site", "rebuild this page", or reference an existing storefront/landing page while building in FastStore, Eitri (Luminus + Bifrost), Next.js/React, or any other framework. Also use to capture a design reference bundle from a URL before implementing.