Generate Swimlane Lit Element Solution (CDN). Requires the use-swim-ui skill for component list, API, CDN, and design rules.
Prerequisite: When executing this skill, you must apply the use-swim-ui skill: use it for the component list, CDN/base usage, design rules, and for property/event/slot API (use-swim-ui’s reference.md or component source). Do not generate the solution without that context.
Generate a standalone Lit-based solution (custom widget or small app) that uses SwimlaneElement (wrapper for Lit) and Swimlane custom Lit elements (swim-*) from @swimlane/swim-ui, with all dependencies loaded from CDN. Use lit-elements as-is — do not add additional styling for the elements (no custom colors, borders, shadows, typography on components); only layout styling (flex, grid, spacing, positioning) is allowed. The solution must be professional, consistent, accessible (WCAG), and free of memory leaks. You may use HTML, vanilla JavaScript, and Swimlane Lit custom elements only.
Base library: All custom elements must extend and use its exports (, , , ) — not raw LitElement. For , , and (layout-only styling, tokens), apply the skill; for full property/event/slot API see ’s .
csshtmlsvgunsafeCSSExample (solution file):
import { SwimlaneElement, css, html, svg, unsafeCSS } from '@swimlane/swimlane-element@2';
import 'https://cdn.jsdelivr.net/gh/surya-pabbineedi/swim-ui@gh-pages/swim-ui.js?v=1';
import { repeat } from 'lit-html@1/directives/repeat.js';
.js file in projects/swimlane/swim-ui/demo/solutions), update that existing solution file instead of creating a new one. Use the referenced file as the target to modify; preserve or refine behavior based on their new instructions.swim-*) from @swimlane/swim-ui — do not copy non-Lit or framework-specific patterns from that site..js file (ES module) under projects/swimlane/swim-ui/demo/solutions with a unique name.<slug>-solution.js (e.g. alert-configurator-solution.js, dashboard-widget-solution.js). Ensure the name does not conflict with existing files in that directory.projects/swimlane/swim-ui/demo/solutions/<name>.js) instead of creating a new file..js file is a self-contained ES module that imports from CDN (Lit and swim-ui), exports a default class extending SwimlaneElement (the main solution component), composes the UI with swim-* components, and can be loaded by the demo app or a minimal HTML page (e.g. <script type="module" src="...">). No build step required.customElements.define(...)) — custom element registration is handled by the Swimlane platform.All runtime dependencies must be loaded from CDN (no npm install or bundling). Follow use-swim-ui for SwimlaneElement base and swim-ui bundle URL; ensure the lit specifier is available (e.g. import map). Solution-specific:
repeat): import { repeat } from 'https://esm.sh/lit-html@1/directives/repeat.js' (or lit-html@1/directives/repeat.js with import map).SwimlaneElement, use html, css, svg, unsafeCSS from that package, and export as default — do not call customElements.define().Use only the swim-* elements listed in the use-swim-ui skill (component list and usage). Do not invent or assume other tag names. For properties, events, slots, and imperative APIs (e.g. drawer), use use-swim-ui and its reference.md; or read projects/swimlane/swim-ui/src/components/<name>/ for the source of truth.
Follow the use-swim-ui skill for design rules (lit-elements as-is, layout-only styling, CSS variables, no hardcoded colors on components). In addition for solutions: use semantic HTML (main, section, header, form, label, etc.) and keep the DOM clear and minimal for maintainability and accessibility.
role="button" only when not a <button>, role="tablist" / role="tab" / role="tabpanel" where appropriate). Prefer native elements when they fit (e.g. <button>, <input>, <label>).aria-label, aria-labelledby, aria-describedby, aria-expanded, aria-selected, aria-controls, aria-disabled, aria-invalid, aria-required where they convey state or relationships. Keep id / aria-controls / aria-labelledby links valid and stable.:focus-visible with outline). When opening overlays, move focus as needed (e.g. to first focusable element or close button).<label>, aria-label, or aria-labelledby).aria-selected, aria-checked, aria-expanded, aria-disabled, etc.) and keep it in sync with the UI.If the solution includes custom Lit elements (in addition to swim-*), or attaches listeners/timers in script:
Event listeners
addEventListener and removeEventListener.this._clickBound = () => this._onClick();) so it can be removed in disconnectedCallback().Timers
setTimeout, setInterval, and recurring requestAnimationFrame in disconnectedCallback() (or when the relevant UI is torn down). Set stored timer ids to undefined after clearing.Cleanup order
disconnectedCallback(), remove listeners and clear timers before calling super.disconnectedCallback().No long-lived refs
If the solution is only HTML and uses swim-* elements without adding its own listeners or timers, document that no extra cleanup is required beyond what the Swimlane components already do.
type="module" and CDN imports.swim-* from @swimlane/swim-ui as listed in the use-swim-ui skill.css, html, svg, unsafeCSS from @swimlane/swimlane-element@2; use directives (e.g. repeat) from lit-html@1/directives/ as needed. The main solution class must be the default export — do not call customElements.define() (registration is handled by the Swimlane platform). Follow the same accessibility and no–memory-leak rules.swim-* components. Do not use raw LitElement.swim-* elements (e.g. custom colors, borders, shadows, typography). Use lit-elements as-is; only layout-related CSS (flex, grid, spacing, positioning) is allowed.@swimlane/swim-ui. Use only the swim-* elements listed in this command.customElements.define() to register the solution class — the Swimlane platform handles registration. Always export default the class instead.swim-* API..js file in projects/swimlane/swim-ui/demo/solutions) or refers to the same solution they had before, update that file. Otherwise, create a new .js file with a unique name in projects/swimlane/swim-ui/demo/solutions.swim-* components are needed (from use-swim-ui), and whether to add any custom Lit element.@swimlane/swimlane-element@2), any lit-html directives (e.g. lit-html@1/directives/repeat.js), and for swim-ui use the bundle at https://cdn.jsdelivr.net/gh/surya-pabbineedi/swim-ui@gh-pages/swim-ui.js?v=1. Ensure lit is provided (e.g. via import map) so the bundle resolves. Document the import URLs in a short comment at the top of the file if helpful.:root via the script if the solution is loaded standalone)..js file at projects/swimlane/swim-ui/demo/solutions/<unique-name>.js. The file must: import SwimlaneElement, css, html, svg, unsafeCSS from @swimlane/swimlane-element@2; import any needed directives (e.g. repeat from lit-html@1/directives/repeat.js); import swim-ui from CDN; export a default class extending SwimlaneElement (do not call customElements.define() — registration is handled by the Swimlane platform); compose the UI with swim-* elements and wire events using use-swim-ui API (properties, events, slots); ensure every interactive element is accessible; and have any custom element clean up in disconnectedCallback(). When updating an existing file, apply the user's changes while keeping the same file path and unique name.swim-* elements are used (per use-swim-ui), (d) labels/ARIA/keyboard/focus are in place, and (e) there are no listener/timer leaks.Deliver a professional, consistent, accessible, leak-free solution in one .js file under projects/swimlane/swim-ui/demo/solutions with a unique name, exporting a default class extending SwimlaneElement (from @swimlane/swimlane-element@2) — do not register it as a custom element (no customElements.define()), using only swim-* components from @swimlane/swim-ui, and loading all dependencies from CDN. When the user refers to the same solution or points to a file, update that file instead of creating a new one.