CanvasEngine Project
Documentation First
Before answering or editing CanvasEngine code, fetch and read the current documentation index:
curl -L https://canvasengine.net/llms.txt
If curl is unavailable, use an equivalent command or tool (wget, browser/web fetch, or another HTTP client). If network access is blocked, say that the current documentation could not be fetched and proceed only from local code plus any already available docs.
Use llms.txt as a table of contents:
- Read the summary and section list.
- Identify the Markdown documentation URLs relevant to the user request.
- Fetch the relevant
.md pages with curl -L <url> or an equivalent tool.
- Base implementation and explanations on those pages, not on assumptions from React, Vue, Angular, or PixiJS.
- Mention the specific docs or examples consulted when the answer depends on them.
Project Model
Treat CanvasEngine components as .ce files with:
- a script block for state, imports, functions, signals,
computed, and effect
- component content/template markup
- an optional CSS style block
Prefer existing project conventions for file layout, imports, naming, and component composition. Inspect nearby .ce files before adding new patterns.
Reactivity
CanvasEngine reactivity is centered on signals plus computed and effect.
Use the documentation to confirm exact APIs before writing code. Do not assume that signal usage is identical to Solid, Angular, Vue, React, or another framework.
Important template rules:
- In a template,
<Rect x /> means bind the x variable from the script scope. x may be a signal or a plain value. Do not interpret this as a boolean-only JSX prop.
- For reactive conditions, pass the signal/reference to the directive: use
@if (show), not @if (show()).
- For reactive loops, pass the signal/reference to the directive in the same spirit: use
@for with the reactive source itself rather than eagerly calling or unwrapping it, unless the official docs for the exact case say otherwise.
- Keep signal reads/writes consistent with the documented CanvasEngine syntax for the context: script code and template code may differ.
Implementation Checklist
When modifying a CanvasEngine project:
- Fetch
llms.txt and the relevant Markdown docs.
- Inspect local examples with
rg --files -g '*.ce' and read nearby components.
- Preserve
.ce component structure: script, content/template, optional style.
- Use CanvasEngine primitives and directives instead of importing framework habits from React/Vue/Angular.
- Verify shorthand bindings, reactive
@if, and reactive @for syntax before finishing.
- Run the project’s relevant checks or at least a focused syntax/type check when available.
1---2name: canvasengine3description: Work on CanvasEngine projects and .ce components using the official documentation. Use when Codex needs to explain, create, review, or modify CanvasEngine code, especially files ending in .ce, CanvasEngine reactivity with signals, computed, and effect, template directives such as @if and @for, component script/template/style structure, or CanvasEngine-specific syntax that mixes ideas from React, Vue, and Angular.4---56# CanvasEngine Project78## Documentation First910Before answering or editing CanvasEngine code, fetch and read the current documentation index:1112```bash13curl -L https://canvasengine.net/llms.txt14```1516If `curl` is unavailable, use an equivalent command or tool (`wget`, browser/web fetch, or another HTTP client). If network access is blocked, say that the current documentation could not be fetched and proceed only from local code plus any already available docs.1718Use `llms.txt` as a table of contents:19201. Read the summary and section list.212. Identify the Markdown documentation URLs relevant to the user request.223. Fetch the relevant `.md` pages with `curl -L <url>` or an equivalent tool.234. Base implementation and explanations on those pages, not on assumptions from React, Vue, Angular, or PixiJS.245. Mention the specific docs or examples consulted when the answer depends on them.2526## Project Model2728Treat CanvasEngine components as `.ce` files with:2930- a script block for state, imports, functions, signals, `computed`, and `effect`31- component content/template markup32- an optional CSS style block3334Prefer existing project conventions for file layout, imports, naming, and component composition. Inspect nearby `.ce` files before adding new patterns.3536## Reactivity3738CanvasEngine reactivity is centered on signals plus `computed` and `effect`.3940Use the documentation to confirm exact APIs before writing code. Do not assume that signal usage is identical to Solid, Angular, Vue, React, or another framework.4142Important template rules:4344- In a template, `<Rect x />` means bind the `x` variable from the script scope. `x` may be a signal or a plain value. Do not interpret this as a boolean-only JSX prop.45- For reactive conditions, pass the signal/reference to the directive: use `@if (show)`, not `@if (show())`.46- For reactive loops, pass the signal/reference to the directive in the same spirit: use `@for` with the reactive source itself rather than eagerly calling or unwrapping it, unless the official docs for the exact case say otherwise.47- Keep signal reads/writes consistent with the documented CanvasEngine syntax for the context: script code and template code may differ.4849## Implementation Checklist5051When modifying a CanvasEngine project:52531. Fetch `llms.txt` and the relevant Markdown docs.542. Inspect local examples with `rg --files -g '*.ce'` and read nearby components.553. Preserve `.ce` component structure: script, content/template, optional style.564. Use CanvasEngine primitives and directives instead of importing framework habits from React/Vue/Angular.575. Verify shorthand bindings, reactive `@if`, and reactive `@for` syntax before finishing.586. Run the project’s relevant checks or at least a focused syntax/type check when available.
rsamaium