# Create Winnetoujs Constructos

> Use this skill when you need to create or modify UI components in this project.

- Skill: `tomevault-io/create-winnetoujs-constructos` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/create-winnetoujs-constructos`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/create-winnetoujs-constructos/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/create-winnetoujs-constructos

---


RULES:

- constructo file: `*.wcto.html`
- compiled output: `*.wcto.js` (generated by WBR)
- never edit compiled output
- exactly ONE `<winnetou>...</winnetou>` per constructo
- IDs use `[[id]]`
- first ID becomes exported class name: `$id`
- props use `{{prop}}` (optional: `{{prop?}}`, typed: `{{prop:type}}`)
- winnetoujs compiler is running in background, do not ask user to run it manually
- **AVOID** use constructos create function directly to string ids, always use returned ids vars. - - Avoid `.create("#id")` in favor of `.create(constructo.ids.id)`, create method does not need `#` prefix when using returned ids.

RENDER:

- `new $id(props).create("#selector")`
- `create()` returns `{ ids }` where `ids.<name>` is the runtime DOM id

CUSTOM IDENTIFIERS:

- constructor accepts options as second arg: `new $id(props, { identifier: "X" })`
- generated DOM id becomes predictable: `<id>-win-<identifier>`

EXAMPLE (identifier):

```ts
import { $helloTitle } from "./hello/hello.wcto";

const c = new $helloTitle({ text: "Hello" }, { identifier: "header" }).create(
  "#app",
);

// c.ids.helloTitle === "helloTitle-win-header"
```

MULTIPLE IDS (one constructo):

- a constructo can contain many `[[id]]`
- first `[[id]]` => class name `$firstId`
- all ids available via `create().ids`

EXAMPLE (multiple ids):

```html
<winnetou description="Card">
  <div id="[[card]]">
    <h2 id="[[cardTitle]]">{{title:string}}</h2>
    <button id="[[cardBtn]]">{{btnText:string}}</button>
  </div>
</winnetou>
```

```ts
import { $card } from "./cards/cards.wcto";

const c = new $card({ title: "Hi", btnText: "OK" }).create("#app");
// c.ids.card, c.ids.cardTitle, c.ids.cardBtn
```

CONSTRUCTOS CHAINING:

- create parent first
- use returned ids as targets for children
- prefer chaining for complex layouts (avoid deep `constructoString()` nesting)

EXAMPLE (chaining):

```html
<!-- layout.wcto.html -->
<winnetou description="Page layout">
  <div id="[[page]]">
    <header id="[[headerArea]]"></header>
    <main id="[[contentArea]]"></main>
  </div>
</winnetou>

<winnetou description="Header">
  <div id="[[header]]">{{title:string}}</div>
</winnetou>

<winnetou description="Content">
  <div id="[[content]]">{{text:string}}</div>
</winnetou>
```

```ts
import { $page, $header, $content } from "./layout/layout.wcto";

const page = new $page().create("#app");
new $header({ title: "My App" }).create(page.ids.headerArea);
new $content({ text: "Hello" }).create(page.ids.contentArea);
```

EXAMPLE (minimal):

FILE: `src/hello/hello.wcto.html`

```html
<winnetou description="Simple hello title">
  <h1 id="[[helloTitle]]">{{text:string}}</h1>
</winnetou>
```

USAGE: `src/app.ts`

```ts
import { $helloTitle } from "./hello/hello.wcto";

new $helloTitle({ text: "Hello Winnetou" }).create("#app");
```

PERF:

- When creating events listeners inside constructos, prefer using WinnetouFx (`W.fx`) instead of directly using `addEventListener`. Refer to the "use-functions-inside-constructos" skill for more details.

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