How do I install the Lustre skill?

Run npx skillmds@latest add aboio-labs/lustre in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Lustre safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Lustre?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Lustre free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Lustre?

aboio-labs (@aboio-labs) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Lustre by aboio-labs — Agent Skill

Name: Lustre
Author: aboio-labs

Lustre

Gleam frontend development skill targeting JavaScript. Covers Lustre 5.x, MVU Architecture, Advanced Forms (save-lifecycle state machines/FieldState), UI Patterns, SPA Routing (modem), and HTTP requests (rsvp). Use when building UI or working in client/src/.

aboio-labs 6094c86 14 files · 77.1 KB Updated Sep 17, 2026

File contents

Lustre & Frontend Best Practices

Skill for Gleam frontend development using Lustre. Read the relevant reference before writing code.

Token Efficiency

All agents and commands using this skill MUST follow references/token-efficiency.md (from core). Use Read and Grep tools with targeted reads instead of reading entire files.

Reference routing — by task

Task	References to read
Frontend MVU Forms & UI	`advanced-mvu-forms.md` + `lustre-ui-patterns.md`
Frontend Web Components	`lustre-components.md`
Frontend HTTP / API calls	`lustre-http.md`
Frontend SPA Routing	`lustre-routing.md`

Reference routing — by topic

Topic	Reference
Lustre MVU Core Architecture	`lustre-core.md`
Lustre Effects & Paint cycle	`lustre-effects.md`
Lustre Events (debounce, throttle)	`lustre-events.md`
Lustre Testing (query, simulate)	`lustre-testing.md`
Lustre Browser APIs (plinth)	`lustre-browser-apis.md`
Lustre Advanced (Hydration, FFI)	`lustre-advanced.md`
Common Lustre gotchas	`lustre-gotchas.md`

Core Frontend Principles

Make Impossible States Impossible — Prefer sum types over Bools. Especially for async lifecycles: a form's save is SubmitIdle | SubmitSaving | SubmitSaved | SubmitFailed(err) (the model owns its data + a sibling save field); a page load is RemoteData. Never a Bool flag beside the data.
Parse, Don't Validate — Use FieldState(v, e) to wrap invalid UI state, rather than dictionaries.
Dumb Effects — Effects should be pure executors of I/O. Never pass the Model into an effect function.

---name: lustredescription: Gleam frontend development skill targeting JavaScript. Covers Lustre 5.x, MVU Architecture, Advanced Forms (save-lifecycle state machines/FieldState), UI Patterns, SPA Routing (modem), and HTTP requests (rsvp). Use when building UI or working in client/src/.---# Lustre & Frontend Best PracticesSkill for Gleam frontend development using Lustre. **Read the relevant reference before writing code.**## Token Efficiency**All agents and commands using this skill MUST follow `references/token-efficiency.md` (from core).** Use `Read` and `Grep` tools with targeted reads instead of reading entire files.## Reference routing — by task| Task | References to read ||-------------------------------|----------------------------------------------------------------------------------|| Frontend MVU Forms & UI | `advanced-mvu-forms.md` + `lustre-ui-patterns.md` || Frontend Web Components | `lustre-components.md` || Frontend HTTP / API calls | `lustre-http.md` || Frontend SPA Routing | `lustre-routing.md` |## Reference routing — by topic| Topic | Reference ||------------------------------------------|-------------------------------------------------|| Lustre MVU Core Architecture | `lustre-core.md` || Lustre Effects & Paint cycle | `lustre-effects.md` || Lustre Events (debounce, throttle) | `lustre-events.md` || Lustre Testing (query, simulate) | `lustre-testing.md` || Lustre Browser APIs (plinth) | `lustre-browser-apis.md` || Lustre Advanced (Hydration, FFI) | `lustre-advanced.md` || Common Lustre gotchas | `lustre-gotchas.md` |## Core Frontend Principles1. **Make Impossible States Impossible** — Prefer sum types over Bools. Especially for async lifecycles: a form's save is `SubmitIdle | SubmitSaving | SubmitSaved | SubmitFailed(err)` (the model owns its data + a sibling `save` field); a page load is `RemoteData`. Never a `Bool` flag beside the data.2. **Parse, Don't Validate** — Use `FieldState(v, e)` to wrap invalid UI state, rather than dictionaries.3. **Dumb Effects** — Effects should be pure executors of I/O. Never pass the `Model` into an effect function.

Frequently asked questions