backlog-ui-framework

Backlog UI Framework — Agent Skill

Comprehensive guide for building reactive web components using @nisli/core. Contains rules across 9 categories covering component authoring, reactivity, templates, dependency injection, events, data loading, error handling, migration, and testing.

When to Apply

Reference these guidelines when:

• Creating new web components in viewer/components/
• Migrating existing HTMLElement-based components to the reactive framework
• Writing or reviewing signal-based reactive state
• Implementing html tagged templates with bindings and @event handlers
• Using inject() / provide() for dependency injection
• Setting up query() for declarative data loading
• Wiring typed Emitter events between components
• Reviewing code for memory leaks, XSS, or lifecycle issues
• Writing tests for framework components

Rule Categories by Priority

Priority	Category	Impact	Prefix
1	Component Authoring	CRITICAL	comp-
2	Signals & Reactivity	CRITICAL	signal-
3	Template Engine	HIGH	tmpl-
4	Dependency Injection	HIGH	di-
5	Typed Emitters	MEDIUM-HIGH	emitter-
6	Declarative Data Loading	MEDIUM-HIGH	query-
7	Error Handling & Resilience	MEDIUM	error-
8	Migration & Interop	MEDIUM	migration-
9	Testing	LOW-MEDIUM	test-

Quick Reference

1. Component Authoring (CRITICAL)

• comp-setup-sync - Setup function MUST be synchronous; capture services sync, use them async
• comp-props-signals - All props are Signal<T> in setup; factories accept T | Signal<T> inputs
• comp-factory-composition - ALL custom elements MUST use factory composition; HTML tag syntax is ONLY for native elements (div, span, button)
• comp-html-for-vanilla - HTML tag syntax (<tag>) is ONLY for native HTML elements; never for custom elements
• comp-no-this - No this in components; use pure functions with props and host
• comp-no-innerhtml - Never use innerHTML; use html tagged templates for targeted DOM patching
• comp-host-escape-hatch - host is the second param; use it only for imperative DOM access
• comp-no-class-authoring - Never extend HTMLElement directly for new components; use component()
• comp-host-attrs - Use second factory arg { class: '...' } for host-level CSS classes (ADR 0009)
• comp-prop-input - Factory props accept T | Signal<T> — plain values are auto-wrapped (ADR 0009)