raven-component-authoring

Author Raven UI views and modifiers for WASM-based DOM rendering.

Updated Feb 4, 2026

Search Tags:#ui #components #rendering #wasm #interop #dom #raven

Ready to run

npx skills add https://github.com/briannadoubt/Raven --skill raven-component-authoring

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: raven-component-authoring
Source: https://github.com/briannadoubt/Raven/tree/main/.codex/skills/raven-component-authoring
Command: npx skills add https://github.com/briannadoubt/Raven --skill raven-component-authoring

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Raven component authoring enables developers to create and extend Raven UI elements (views and modifiers) that render to VNode/DOM, handle events, and interop with JavaScriptKit, establishing consistent patterns across the Raven UI library.

Core Features & Use Cases

Create new built-in Raven views/modifiers with proper DOM rendering or custom DOM via VNode.
Wire events, maintain state, and leverage a stable rendering pipeline using _CoordinatorRenderable and toVNode when appropriate.
Follow JavaScriptKit interop guidelines to safely bridge to browser APIs while preserving SwiftUI-like ergonomics.
Provide clear, reusable patterns for composition, primitives, and modifiers to ensure maintainability and scalability across apps.

Quick Start

Begin by selecting or creating a Raven UI component under Sources/Raven/ and implement the appropriate rendering strategy and event wiring as described.

Frequently Asked Questions about raven-component-authoring

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create a new UI component for a WASM-based rendering system?▼

To create a new UI component for WASM rendering, place the file under Sources/Raven/ and implement the appropriate rendering strategy using _render(with:) and toVNode to generate the required VNode/DOM output. Follow _CoordinatorRenderable patterns for state and event wiring.

How does DOM interop work when building custom views with JavaScriptKit?▼

DOM interop with JavaScriptKit works by using DOMBridge guidelines to safely bridge browser APIs while maintaining SwiftUI-like ergonomics. You wire events and handle state through the stable rendering pipeline, ensuring safe communication between the WASM environment and the browser DOM.

What's the best way to wire DOM events in a WASM UI component?▼

The best way to wire DOM events in a WASM UI component is by adhering to the _CoordinatorRenderable pattern and toVNode guidelines. This approach maintains state consistency and ensures events are properly routed through the VNode rendering pipeline to the browser.

Can I use SwiftUI-like modifiers for custom DOM rendering in Raven?▼

Yes, you can create and apply SwiftUI-like modifiers for custom DOM rendering in Raven. The component authoring process supports building both composite views and primitive wrappers, allowing you to adjust DOM rendering and event wiring while preserving familiar ergonomics.

When do I need to use the _CoordinatorRenderable pattern for UI rendering?▼

You need to use the _CoordinatorRenderable pattern when building new built-in Raven views or modifiers that require state management and event coordination. It provides a stable rendering pipeline that ensures proper VNode generation and DOM bridge interop.

Why does my Raven UI component not render correctly to the DOM?▼

A Raven UI component may not render correctly if it deviates from established rendering patterns, fails to properly implement toVNode, or ignores DOMBridge interop guidelines. Ensure your file structure under Sources/Raven is correct and that _render(with:) is properly configured.