Agent Skills
Task-oriented operational guides for AI coding agents writing code with the Rikka
Web Components toolkit. 14 skills, each one folder ≈ one task. Follow the
[agentskills.io](https://agentskills.io) format (SKILL.md with YAML frontmatter).
- Run
npx skills add yw662/rikka— installs into the agent's skill directory (supports OpenCode, Claude Code, Codex, Cursor, and 67 more). - Or browse them at skills.sh.
- Or read them raw:
https://yw662.github.io/rikka/skills/<name>/SKILL.md - Machine-readable index:
../llms.txt - Start with
rikka/SKILL.md(umbrella) — then load one of the task-specific skills below.
Start here
Orientation. The four LLM-specific footguns, minimal counter example, which skill to load for which task. Load first.
What rikka is, the three packages, design principles, when (and when not) to use it.
Cross-cutting mistakes. Read before generating rikka code. Covers the 4 LLM-specific footguns.
Reactive state
DOM
h(), tag helpers, h`...` template literal. Creates real DOM elements — no virtual DOM.
Binding signals to text nodes, attributes, template slots. Fine-grained vs coarse-grained. The most error-prone area.
Two-way binding for <input>, <textarea>, <select> via writable signals.
SVG elements, namespace handling, name-collision tags (a, script, style, title, text, span).
Custom elements
defineElement, attributes, events, methods, render — the full ElementConfig reference.
css`...`, inlineStyle`...`, adoptStyle, :host selector.
The template option of defineElement with {{name}} / {{@event}} syntax.
Composable functions + MyElement.h(...) to embed a custom element inside another.
Operations
Browser support matrix and polyfills for Custom Elements / Shadow DOM / CSSStyleSheet. SSR guidance.
Use from an AI agent
The fastest path: install with the skills CLI. Each skill auto-loads into
context based on its description frontmatter field. The full set totals
~2,800 lines.
npx skills add yw662/rikka