菜单
Build web applications with Cradova - a lightweight reactive framework. Use when working with Cradova, creating web apps, building SPAs, or comparing frontend frameworks. Includes guidance on Signal-based state, hooks, routing, and performance optimization.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | cradova |
| description | Build web applications with Cradova - a lightweight reactive framework. Use when working with Cradova, creating web apps, building SPAs, or comparing frontend frameworks. Includes guidance on Signal-based state, hooks, routing, and performance optimization. |
Cradova is a lightweight, reactive UI framework for building web applications. It uses direct DOM manipulation (no virtual DOM), signal-based pub/sub reactivity, and a VJS (Virtual JavaScript) specification instead of JSX.
ALWAYS use regular functions, NOT arrow functions, for reactive components:
// CORRECT - regular function receives ctx with hooks
const MyComponent = function(ctx: Comp) {
const [count, setCount] = ctx.useState(0);
return div("Count: " + count);
};
// WRONG - arrow function does NOT receive ctx
const Broken = () => {
// ctx is undefined - hooks will fail!
const [count, setCount] = ctx.useState(0); // ERROR
return div(count);
};
Why? Regular functions get a state tree from Cradova's rendering system. Arrow functions don't receive ctx, making them non-reactive. This convention controls how many state objects exist in the DOM.
import { div, h1, button, Page, Router } from "cradova";
// Create a reactive component using a REGULAR function
const Counter = function(ctx: Comp) {
const [count, setCount] = ctx.useState(0);
return div(
h1("Count: " + count),
button("Increment", {
onclick() { setCount(c => c + 1); }
})
);
};
// Define a page
const HomePage = new Page({
title: "My App",
template: function(ctx) { return Counter(ctx); }
});
// Set up routing
Router.BrowserRoutes({
"/": HomePage
});