Can I use standard SwiftUI @State and @Binding?

Yes, Raven supports @State, @Binding, and @ObservedObject patterns, provided the underlying values are Sendable to comply with Swift 6 concurrency requirements.

How does this skill handle DOM events?

It uses the _CoordinatorRenderable protocol and JavaScriptKit interop to register stable event handlers like click and input events, ensuring they persist across re-renders.

What is the Raven framework?

Raven is a framework that allows you to write SwiftUI-like code that compiles to WebAssembly and renders directly to the browser DOM using a VNode system.

When should I use PrimitiveView versus a Composite View?

Use a Composite View for simple combinations of existing components. Use PrimitiveView when you need to emit specific HTML elements or create custom DOM structures from scratch.

How do I ensure stable UI updates during re-renders?

The skill provides guidance on using VNode.key to maintain stable identity for elements, similar to how id: is used in SwiftUI's ForEach, preventing unnecessary DOM churn.

Raven Component Authoring

Name: Raven Component Authoring
Author: briannadoubt

bybriannadoubt

•

Design Tools

Develops and maintains custom SwiftUI-style components for the browser using the Raven framework and WebAssembly.

Raven Component Authoring provides specialized guidance for creating, extending, and debugging UI components within the Raven framework, which cross-compiles SwiftUI APIs to the DOM. It assists developers in implementing complex rendering strategies, handling DOM events via JavaScriptKit interop, and managing state across the Swift-to-WASM boundary. Whether you are building primitive views with custom VNodes or composite views using standard SwiftUI patterns, this skill ensures best practices for performance, stable identity through keys, and main-actor isolation for browser-native interactions.

Key Features

01Guides the creation of custom modifiers and layout containers

021 GitHub stars

03Optimizes VNode rendering and coordinate-based child view management

04Manages DOM event wiring and JavaScriptKit interop with @MainActor safety

05Handles persistent state and binding patterns for WASM-based web apps

06Implements primitive and composite Raven views using SwiftUI-style syntax

Use Cases

01Building custom UI controls like specialized buttons, inputs, or progress bars in Raven

02Porting existing SwiftUI view logic to run in a web browser via WebAssembly

03Integrating browser-native APIs like storage or event listeners into Raven components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add briannadoubt/raven raven-component-authoring

For use in Claude.ai and ChatGPT

Download Skill