How does Rimitive handle dynamic lists?

Rimitive uses a specialized map() function that takes a source signal, a key function for identity tracking, and a render function to ensure efficient, fine-grained DOM updates.

Does this skill support state-based rendering?

Absolutely. It uses the match() operator to handle status-based rendering (like pending/error/ready states) or simple boolean toggles declaratively within the component tree.

What is the rimitive-component skill?

It is a specialized capability for Claude Code designed to help developers architect and write reactive UI components using the Rimitive TypeScript library's functional API.

Can I manage element lifecycles with this skill?

Yes, the skill utilizes the .ref() method to attach lifecycle callbacks for tasks such as focusing elements, initializing third-party libraries, and performing cleanups.

Rimitive UI Components

Name: Rimitive UI Components
Author: hejhi

byhejhi

0•

设计工具

Constructs composable, reactive frontend components using a functional TypeScript DSL for high-performance UIs.

The rimitive-component skill enables Claude to architect and implement reactive user interfaces using the Rimitive library. It specializes in a functional approach to UI development, utilizing core primitives like el() for element creation, map() for efficient list rendering, and match() for declarative conditional logic. This skill is ideal for developers building modular frontend systems that require precise control over reactivity, lifecycle management, and service injection, ensuring that UI components remain portable, testable, and highly performant.

主要功能

01Advanced lifecycle management and event handling using ref() and on()

02Declarative element construction using the fluent el() API

030 GitHub stars

04Pattern-matching and conditional rendering via the match() operator

05Efficient reactive list rendering with key-based map() synchronization

06Support for both singleton services and portable service injection patterns

使用场景

01Developing type-safe, reusable component libraries for TypeScript projects

02Building real-time data dashboards with complex reactive state updates

03Implementing high-performance list views with minimal DOM overhead

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add hejhi/rimitive rimitive-component

For use in Claude.ai and ChatGPT

Download Skill