draw-a-home-step-inside

Community@lengkeman0802/draw-a-home-step-inside
Community skill — not reviewed. It was shared by Leona and has not been checked by Neta. Read SKILL.md below before letting an agent use it.
Use it in Cohub

Paste this into your agent's chat — it fetches the skill and follows it.

Use the skill: draw-a-home-step-inside. Run `npx -y @neta-art/neta-search-cli@latest skills use @lengkeman0802/draw-a-home-step-inside --via site` and follow what it prints. Read its complete output, redirecting it to a temporary file first if necessary, and resolve relative paths from the skill directory it prints.
Install from a terminal
npx -y @neta-art/neta-search-cli@latest skills use @lengkeman0802/draw-a-home-step-inside
Summary

Turn a floor plan or hand-drawn sketch into a furnished 3D house you can walk through.

  • Upload a floor plan photo or drawing; it detects walls, doors, windows, and rooms entirely on your device.
  • Edit the layout, pick a style and time of day, then watch a 15-second video of your house being built.
  • Walk through the finished house in first person, open doors, discover hidden rooms and interactive objects.
  • Download the 3D model, build video, and before/after cards, or publish it as a playable web page.
  • Works best with clear floor plans showing distinct rooms, or simple hand-drawn home sketches with labeled spaces.
SKILL.md
# draw-a-home-step-inside

## What it does

Turns a 2D drawing of a home — a floor plan, a photo of a plan, the first page of a PDF, or a
hand-drawn room sketch — into an explorable, furnished 3D house, and ships it as a published
Web Work. It is a **creative visualization** pipeline, not an architectural or construction
tool; every surface (footer, cards, video, ZIP README, plan JSON) must carry that disclaimer.

Use this skill when a creator wants to build (or is describing) an experience where someone
draws or uploads a home and then *walks into it*: floor-plan-to-3D, hand-drawn room to 3D house,
walkable 3D home, interior walkthrough, plan detection, on-device house build video,
before/after house cards, "画一个家，走进去 / 平面图转3D / 手绘户型图".

Ground the build in the reference implementation: **Draw a Home, Step Inside**
<https://neta.art/w/b94c859a-3a3f-4ee6-956c-476c6557f52a> — a working template with the full
7-stage flow, 12 locales, and the default demo house below. Read its source before adapting it
to a new theme; the module map in "Pipeline" matches that work 1:1.

## The finished reference

- **Work (live):** <https://neta.art/w/b94c859a-3a3f-4ee6-956c-476c6557f52a>
- **Verified content version:** `7523336ce6e5` (Work version 13; axe-core WCAG 2.0/2.1 A+AA — 0
  violations for English desktop and Arabic 390×844, and across all 12 locales × 2 viewports).
  Source version `draw-a-home#sha256:d3de5b3b11d78e9d149b03a8c1e1eec7535e2bb7ff830cfbe384c648d8b9a730`.
- **Default demo:** *The Moonlit Cartographer's House* — a 12 m × 9 m house on a cliff above a
  bay at night in light rain. Rooms: Entry, Double-height Map Studio (stairs to a gallery),
  Library, Glass Greenhouse, Kitchen, Bedroom, Bathroom, Hidden Archive, Moon Deck.
- **Locales (menu order):** `en` (primary + fallback), `zh`, `ja`, `ko`, `es`, `fr`, `de`,
  `pt`, `ru`, `ar` (RTL), `it`, `hi`.
- **Runtime:** static `index.html` + vanilla JS modules + three.js (bundled) + WebCodecs.

## Pipeline (build in this order)

1. **Upload** — accept PNG/JPG/WEBP, the first page of a PDF, or a saved `.plan.json`. Read
   everything **on the device**; nothing is uploaded. Never send the drawing off-device.
2. **Detect** — ink/paper separation → wall bands → doors (gaps) → windows (glazing lines) →
   rooms (flood fill + rectangle decomposition) → stairs (tread runs) → entrance → outdoor areas
   → scale (from door widths). If the image does not look like a drawing, gate it behind a
   "this may not be a floor plan" confirmation first.
3. **Edit** — an SVG editor with select/move/resize, wall, door, window, room, stairs, outdoor
   and erase tools, snapping, undo/redo, real-width rescale and a drawing overlay. Room types
   are one-tap chips; room names stay editable in every supported language.
4. **Style** — offer 5 house styles, 4 times of day (dawn, day, dusk, night) and 4 weathers
   (clear, light rain, fog, snow). Keep the style/time/weather axes independent.
5. **Build** — run Sketch → Structure → Detail → World as a ~13.8 s live timeline the creator
   watches. Then render the build video frame by frame at a **fixed 30 fps into a 16:9
   1280×720** frame and encode it on-device with WebCodecs (H.264 MP4 via an mp4 muxer). Result
   is always **14.8 s** (13.8 s build + 1 s "Step inside →" end card), identical pacing and
   framing on every device. Fall back to recording the live animation (MediaRecorder) when
   WebCodecs is unavailable. A failed stage retries itself; Cancel refunds.
6. **Result** — build video, four before/after cards, a quality report, Download (ZIP, GLB,
   video, PNG cards, plan JSON — all with ASCII file names), Publish to Neta, Share (native
   sheet with the image, else copy the link), Share to X (1200×675 share card + composer).
   - **Before/after cards** (1080×1350, 4:5, ready as a carousel): ① the original plan,
     ② the white structure (matte clay, soft daylight), ③ the finished house (same long-lens
     three-quarter camera as ②, so they align), ④ first person in the house's most telling room.
     Pin each "before" as a print; mark "you are here" on the drawing for ④. Tap to view a card
     full size and save it as PNG.
7. **Explore** — Overview (orbit/pan/zoom, roof on/off, reset, glowing markers on the house's
    wonders when the roof is off) and Walkthrough (WASD/arrows + mouse-look via pointer lock, or
    a touch joystick with drag-to-look). Include collisions (walls, furniture, stair sides,
    railings, open door leaves), doors that open away from the walker (walk-in or E/✋), a
    doorway assist that eases you onto a door's centre line, a locked secret door, stairs up to a
    gallery, a room-name chip, and reset position.

## House & interaction content

Furnish every room, then run a **walkability pass** after furnishing: slide any piece standing
in a door's lane clear (remove it only if it cannot move — never a wonder), then a 10 cm flood
fill from the front door checks both sides of every door; report anything still cut off in the
quality check.

Give the house a small set of discoverable "wonders", tracked by a counter. The reference demo
has: the entry map glows as you enter; the studio cloth lifts to reveal an unnamed miniature
world you can name; the blue book swings a bookcase open to a Hidden Archive; the black map
opens "Make This World" and sends the world to the Neta composer; greenhouse plants lean and
bloom; the kettle pours steaming tea; a journal shows three entries; the telescope shows a
glowing island and then turns your view to it in the bay. Adapt these to the new theme — each
wonder must be something the creator can *do*, not just see.

## Language, UI and performance rules

- **i18n:** one string table keyed by `STR[key][locale]` for all keys, with `t(key)` returning
  `STR[key][lang] ?? STR[key].en ?? key`. Resolve object strings with `L(obj)`: `obj[lang]`,
  then the English phrasing through a catalog, then `obj.en`.
- **Language detection:** first visit → `navigator.languages` in order, then `navigator.language`,
  region stripped (`zh-TW → zh`, `pt-BR → pt`, `es-419 → es`); first supported wins, else
  English. A saved choice (e.g. `localStorage['dah-lang']`) always wins.
- **`setLang()`** sets `<html lang>` (`zh-CN`, `ja`, `ar`, …) and `<html dir>` (`rtl` only for
  Arabic), persists, and re-renders through `onLang` listeners. The header language menu lists
  native names, marks the active one, and works by keyboard (↓/↑, Home/End, Enter, Esc).
- **Canvas output stays LTR** so Arabic never shifts the cards, share image or video overlays.
  Keep the brand name untranslated outside Chinese and never translate "Neta".
- **UI system:** one spacing scale (`4, 8, 12, 16, 24, 32, 48`), one radius scale (`10/14/20`),
  one shadow pair, one focus ring. Buttons: `primary` (one gold action per screen),
  `secondary` (gold outline), `ghost`, plus brand variants. Every control needs hover,
  `:focus-visible`, active and disabled states. On touch (`pointer: coarse`) every control and
  link is at least **44×44**. Measure the header and collapse step labels (then the brand text)
  when a long language collides; publish the footer height as a CSS var.
- **Performance:** cap point lights (nearest N stay on, count constant so shaders never
  recompile), adaptive pixel ratio, a shadow map that updates only when something moves, cheaper
  shadows and no MSAA on touch, and pause rendering whenever the 3D view is hidden.

## Credits, failures, privacy

- Reserve credits when a build **starts**; charge only after every quality check passes.
- A failed or cancelled build releases the reservation in full. A **failed** build (a stage that
  keeps failing, or an unexpected crash) also earns **one free retry** of the same house — any
  style/time/weather, spent only when that retry succeeds; the failure dialog offers "Try again
  free" directly.
- Every screen's footer carries the disclaimer, an **About** link (full architectural disclaimer)
  and a **Privacy** link (what stays local, what is saved, when anything leaves the device,
  anonymous statistics, credits). Saved data is clearable from the Privacy panel.

## Quality gates before publishing

- The build video exists and is exactly 14.8 s at 30 fps / 1280×720 on desktop **and** mobile.
- All four before/after cards render at 1080×1350 with no clipped text.
- Walkability reports no cut-off room and no wonder blocked.
- Every one of the 12 locales renders with **no overflow and no horizontal scroll** at mobile
  and small breakpoints; RTL (Arabic) does not move canvas output; `<html lang>`/`dir` are correct.
- Touch targets are ≥44×44; the header does not collide in the longest language.
- Disclaimer present on footer, cards, video, share image, ZIP README and plan JSON.

## Publishing

Publish as a static Web Work with the platform's web-work publishing command (the directory must
be directly browser-openable; run any build first and publish its output directory). The work
needs the world to have a slug; the public address is the world/owner path plus the work slug.
The reference Work above is the exact shape a finished publish takes.

## Example

Draw a Home, Step Inside — the live, finished work this skill is distilled from:
<https://neta.art/w/b94c859a-3a3f-4ee6-956c-476c6557f52a>