skills.rest
yw662
yw662COMMUNITY
Explore all skills by this author →
WebsiteGitHub

common-pitfalls

Prevent recurring rikka code generation mistakes in component, signal, and template authoring.

6|1|Updated May 31, 2026
Search Tags:#typescript#signals#reactivity#custom-elements#computed#template-binding#rikka
One-click install
npx skills add https://github.com/yw662/rikka --skill common-pitfalls-yw662
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: common-pitfalls
Source: https://github.com/yw662/rikka/tree/main/skills/common-pitfalls
Command: npx skills add https://github.com/yw662/rikka --skill common-pitfalls-yw662

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you avoid the recurring mistakes that break rikka code generation, especially around reactive signals, computed values, custom element rendering, and event wiring.

Core Features & Use Cases

  • Reactivity Guardrails: Teaches when to pass signals directly and when to read values inside reactive callbacks.
  • Correct Value Positioning: Distinguishes plain functions from computed values in attributes, props, and style objects.
  • Custom Element Safety: Clarifies render typing, attribute access patterns, and builder form usage for stronger TypeScript checking.
  • Template and Event Rules: Covers interpolation modes, event transform functions, NumberAttr defaults, and other common rikka-specific pitfalls.
  • Use Case: Use this Skill when generating or debugging rikka components so the output preserves reactivity, type safety, and correct DOM behavior.

Quick Start

Read this Skill before generating any rikka component code so you can apply the correct signal, computed, render, and event patterns from the start.

Frequently Asked Questions about common-pitfalls

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

FAQPage Schema
How do I prevent rikka reactivity errors when passing signals to custom elements?▼

To prevent rikka reactivity errors, pass signals directly for binding but read values inside reactive callbacks to maintain correct computed tracking and render context behavior.

What is the correct way to position computed values in rikka template bindings?▼

Correct computed value positioning in rikka distinguishes plain functions from computed values when assigning them to attributes, props, and style objects for accurate rendering.

How do I fix TypeScript type errors with rikka custom element rendering?▼

Fix rikka custom element TypeScript errors by applying correct render typing, attribute access patterns, and builder form usage to enforce strict type checking during component generation.

Why do my rikka event transforms and NumberAttr defaults fail during code generation?▼

Rikka event transforms and NumberAttr defaults fail when interpolation modes and event wiring rules are mishandled, requiring strict adherence to template binding conventions.

Can I use this rikka pitfall checker for debugging frontend DOM interpolation?▼

Yes, you can use this rikka pitfall checker for debugging frontend DOM interpolation, custom elements, and event handling to preserve reactivity and TypeScript safety.

Related Skills

Explore More Software Engineering Skills→
iantanwxiantanwx

convex-quickstart

Set up a Convex backend for new or existing frontend projects.

Community
Intermediate
yw662yw662
6

overview

Explain the Rikka toolkit architecture and package boundaries for developers.

Community
Basic
yw662yw662
6

custom-element

Define typed Web Components with reactive attributes, events, and lifecycle behavior.

Community
Advanced
narrative-ionarrative-io

lint

Identify and fix linting errors in TypeScript/JavaScript projects with bun check.

Official
Advanced