菜单
What rikka is — a Web UI toolkit with no virtual DOM, signals-based reactivity, and native Web Components. Load this to understand the three packages, design principles, derivable naming rules, and when rikka is the right (or wrong) fit. Read this once, before diving into the task-specific skills.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
Use this skill when building full-stack applications with rikka-site — the resource-oriented server framework. Covers server-side resource definition (Kinds, Site tree, Transformers, Auth, Pagination), HTML output configuration, content negotiation, and client-side hydration patterns. Load this skill when working on any project that uses @takanashi/rikka-site.
Cross-cutting mistakes that recur across rikka code generation. Load this BEFORE generating rikka code, and refer back when debugging. Covers the 4 rikka-specific LLM footguns (signal vs `.get()`, plain function vs `computed`, `this.$xxx` vs `this.count` in render, `events` as transform functions) plus `h\`\`` interpolation modes, `NumberAttr` default `NaN`, and more.
How to define a Web Component with rikka's `defineElement`. Covers the two-argument form, the strict-typed builder form, `attributes`, `events`, `methods`, `render`, `template`, and lifecycle. Load this when the task is about creating a `<my-tag>` element, declaring reactive HTML attributes, or dispatching custom events.
How to create DOM elements in rikka — `h()` function, 200+ tag helpers (`div`, `p`, `button`, …), and the `h\`html\`` template literal. Load this when the task is about constructing elements, the `h` API, mounting elements into the document, or HTML/SVG namespace handling.
A Web Components toolkit with fine-grained reactivity based on TC39 Signals. Use this skill when writing interactive UIs with rikka — creating real DOM elements, binding signals, defining custom elements, or working with rikka's reactive primitives. Load this first to get oriented, then load one of the task-specific skills (reactive-state, dom-creation, custom-element, etc.) for the actual work.
How to bind signals into the DOM — text nodes, attributes, template slots. Fine-grained vs coarse-grained. The single most important rule: pass the signal, not `.get()`. Load this when the task is about putting reactive state into elements, understanding why a value is "static", or choosing between `${signal}` and `computed(() => h\`…\`)`.
| name | overview |
| description | What rikka is — a Web UI toolkit with no virtual DOM, signals-based reactivity, and native Web Components. Load this to understand the three packages, design principles, derivable naming rules, and when rikka is the right (or wrong) fit. Read this once, before diving into the task-specific skills. |
Rikka is a Web UI toolkit built around three principles:
h() and tag helpers return real Element objects. Updates flow through effect() directly into the DOM.Signal.State or Signal.Computed. Read with .get(), write with .set().defineElement registers a real Custom Element that works in any HTML page without a framework runtime.| Package | Job | Core exports |
|---|---|---|
@takanashi/rikka-signal | Reactive primitives | signal, computed, effect |
@takanashi/rikka-dom | Create real DOM elements | h, tag helpers (div, p, button, …), For, Show, When, Switch, Match, css, inlineStyle |
@takanashi/rikka-elements | Custom Elements | defineElement, event, StringAttr, NumberAttr, BooleanAttr |
@takanashi/rikka-site | Resource-oriented server | site, Collection, Item, ReadOnly, handleWebRequest, createHtmlTransformer |
Install (client-side only):
npm install @takanashi/rikka-signal @takanashi/rikka-dom @takanashi/rikka-elements
Install (full-stack with server):
npm install @takanashi/rikka-signal @takanashi/rikka-dom @takanashi/rikka-elements @takanashi/rikka-site
Component = function returning Element
Reactivity = signal.get() / signal.set()
Side effects = effect()
DOM updates = signal change → effect auto-runs
There is no render phase, commit phase, hooks order, or reconciliation. A Signal.State is just a container with .get() and .set(). An effect is just a function that re-runs when signals it reads change.
rikka exposes a small set of dynamic APIs derived from the config you pass to defineElement. Memorize four rules; the rest follows:
| Rule | Config | Generated |
|---|---|---|
| Attribute → raw value | attributes: { count } | el.count (read/write plain value) |
| Attribute → signal | attributes: { count } | el.$count (the underlying Signal.State<T>) |
| Event → dispatch | events: { 'value-change' } | el.dispatchValueChange(detail?) (PascalCase) |
| Event → listen | events: { 'value-change' } | el.onValueChange (camelCase) |
Tag helpers follow HTML tag names — div → div(), button → button(). No lookup table needed.
Good fit: small-to-medium interactive UIs where you want fine-grained reactivity, real Custom Elements, and a small bundle (~16 KB total for the 3 client packages). Combined with rikka-site, it becomes a full-stack framework with resource-oriented routing, content negotiation, and SSR hydration.
Not a fit: apps needing JSX with compile-time transforms (use React/Solid), large teams with entrenched patterns from other frameworks.
Chrome 73+ / Firefox 101+ / Safari 16.4+ / Edge 79+ need no polyfill. For older browsers, see ../browser-compatibility/.