@toyu-ui/solid 0.1.0

package/define/button.d.ts

@@ -0,0 +1 @@
+export * from '@toyu-ui/define/button';

package/define/button.js

@@ -0,0 +1 @@
+export * from "@toyu-ui/define/button";

package/define/center.d.ts

@@ -0,0 +1 @@
+export * from '@toyu-ui/define/center';

package/define/center.js

@@ -0,0 +1 @@
+export * from "@toyu-ui/define/center";

package/define/checkbox.d.ts

@@ -0,0 +1 @@
+export * from '@toyu-ui/define/checkbox';

package/define/checkbox.js

@@ -0,0 +1 @@
+export * from "@toyu-ui/define/checkbox";

package/define/cluster.d.ts

@@ -0,0 +1 @@
+export * from '@toyu-ui/define/cluster';

package/define/cluster.js

@@ -0,0 +1 @@
+export * from "@toyu-ui/define/cluster";

package/define/container.d.ts

@@ -0,0 +1 @@
+export * from '@toyu-ui/define/container';

package/define/container.js

@@ -0,0 +1 @@
+export * from "@toyu-ui/define/container";

package/define/flex.d.ts

@@ -0,0 +1 @@
+export * from '@toyu-ui/define/flex';

package/define/flex.js

@@ -0,0 +1 @@
+export * from "@toyu-ui/define/flex";

package/define/frame.d.ts

@@ -0,0 +1 @@
+export * from '@toyu-ui/define/frame';

package/define/frame.js

@@ -0,0 +1 @@
+export * from "@toyu-ui/define/frame";

package/define/grid.d.ts

@@ -0,0 +1 @@
+export * from '@toyu-ui/define/grid';

package/define/grid.js

@@ -0,0 +1 @@
+export * from "@toyu-ui/define/grid";

package/define/input.d.ts

@@ -0,0 +1 @@
+export * from '@toyu-ui/define/input';

package/define/input.js

@@ -0,0 +1 @@
+export * from "@toyu-ui/define/input";

package/define/radio-group.d.ts

@@ -0,0 +1 @@
+export * from '@toyu-ui/define/radio-group';

package/define/radio-group.js

@@ -0,0 +1 @@
+export * from "@toyu-ui/define/radio-group";

package/define/radio.d.ts

@@ -0,0 +1 @@
+export * from '@toyu-ui/define/radio';

package/define/radio.js

@@ -0,0 +1 @@
+export * from "@toyu-ui/define/radio";

package/define/sidebar.d.ts

@@ -0,0 +1 @@
+export * from '@toyu-ui/define/sidebar';

package/define/sidebar.js

@@ -0,0 +1 @@
+export * from "@toyu-ui/define/sidebar";

package/define.d.ts

@@ -0,0 +1 @@
+export * from '@toyu-ui/define';

package/define.js

@@ -0,0 +1 @@
+export * from "@toyu-ui/define";

package/helpers/index.d.ts

@@ -0,0 +1,2 @@
+export type PropertyBinder<TElement, TValue> = (element: TElement, value: TValue) => void;
+export declare function assignElementProperty<TElement, TKey extends keyof TElement>(element: TElement, key: TKey, value: TElement[TKey]): void;

package/index.d.ts

@@ -0,0 +1,6 @@
+export * from './button';
+export * from './checkbox';
+export * from './input';
+export * from './radio';
+export * from './radio-group';
+export * from './jsx';

package/index.js

@@ -0,0 +1,12 @@
+import { Button as t } from "./button.js";
+import { Checkbox as e } from "./checkbox.js";
+import { Input as f } from "./input.js";
+import { Radio as u } from "./radio.js";
+import { RadioGroup as d } from "./radio-group.js";
+export {
+  t as Button,
+  e as Checkbox,
+  f as Input,
+  u as Radio,
+  d as RadioGroup
+};

package/input.d.ts

@@ -0,0 +1,19 @@
+import { JSX } from 'solid-js';
+import { TyuiInputAppearance, TyuiInputEvent, TyuiInputSize, TyuiInputType } from '@toyu-ui/elements/input';
+export type InputProps = {
+    appearance?: TyuiInputAppearance | undefined;
+    defaultValue?: string | undefined;
+    disabled?: boolean | undefined;
+    invalid?: boolean | undefined;
+    name?: string | undefined;
+    onChange?: ((event: Event) => void) | undefined;
+    onInput?: ((event: TyuiInputEvent) => void) | undefined;
+    placeholder?: string | undefined;
+    readonly?: boolean | undefined;
+    required?: boolean | undefined;
+    size?: TyuiInputSize | undefined;
+    type?: TyuiInputType | undefined;
+    value?: string | undefined;
+    children?: JSX.Element | undefined;
+};
+export declare function Input(props: InputProps): JSX.Element;

package/input.js

@@ -0,0 +1,25 @@
+import { addEventListener as h, getOwner as y, insert as g, effect as m, template as b } from "solid-js/web";
+var q = /* @__PURE__ */ b("<tyui-input>", !0, !1, !1);
+function z(i) {
+  return (() => {
+    var a = q();
+    return h(a, "input", i.onInput), h(a, "change", i.onChange), a._$owner = y(), g(a, () => i.children), m((e) => {
+      var d = i.appearance, n = i.defaultValue, v = i.disabled, t = i.invalid, l = i.name, r = i.placeholder, u = i.readonly, o = i.required, c = i.size, f = i.type;
+      return d !== e.e && (a.appearance = e.e = d), n !== e.t && (a.defaultvalue = e.t = n), v !== e.a && (a.disabled = e.a = v), t !== e.o && (a.invalid = e.o = t), l !== e.i && (a.name = e.i = l), r !== e.n && (a.placeholder = e.n = r), u !== e.s && (a.readonly = e.s = u), o !== e.h && (a.required = e.h = o), c !== e.r && (a.size = e.r = c), f !== e.d && (a.type = e.d = f), e;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0,
+      s: void 0,
+      h: void 0,
+      r: void 0,
+      d: void 0
+    }), m(() => a.value = i.value), a;
+  })();
+}
+export {
+  z as Input
+};

package/jsx.d.ts

@@ -0,0 +1,151 @@
+import { JSX } from 'solid-js';
+import { TyuiButtonAppearance, TyuiButtonElement, TyuiButtonIconPosition, TyuiButtonShape, TyuiButtonSize, TyuiButtonType } from '@toyu-ui/elements/button';
+import { TyuiCenterElement, TyuiCenterGutter } from '@toyu-ui/elements/center';
+import { TyuiCheckboxElement } from '@toyu-ui/elements/checkbox';
+import { TyuiClusterAlign, TyuiClusterElement, TyuiClusterJustify } from '@toyu-ui/elements/cluster';
+import { TyuiContainerElement, TyuiContainerGutter, TyuiContainerSize } from '@toyu-ui/elements/container';
+import { TyuiFlexAlign, TyuiFlexDirection, TyuiFlexElement, TyuiFlexJustify, TyuiFlexWrap } from '@toyu-ui/elements/flex';
+import { TyuiFrameElement, TyuiFrameFit } from '@toyu-ui/elements/frame';
+import { TyuiGridAlign, TyuiGridElement, TyuiGridJustify } from '@toyu-ui/elements/grid';
+import { TyuiInputAppearance, TyuiInputElement, TyuiInputEvent, TyuiInputSize, TyuiInputType } from '@toyu-ui/elements/input';
+import { TyuiRadioElement, TyuiRadioLabelPosition } from '@toyu-ui/elements/radio';
+import { TyuiRadioGroupElement, TyuiRadioGroupEvent, TyuiRadioGroupLayout } from '@toyu-ui/elements/radio-group';
+import { TyuiSidebarElement, TyuiSidebarSide } from '@toyu-ui/elements/sidebar';
+export type TyuiButtonSolidAttributes = JSX.HTMLAttributes<TyuiButtonElement> & {
+    appearance?: TyuiButtonAppearance | undefined;
+    disabled?: boolean | undefined;
+    disabledFocusable?: boolean | undefined;
+    'disabled-focusable'?: boolean | undefined;
+    iconPosition?: TyuiButtonIconPosition | undefined;
+    'icon-position'?: TyuiButtonIconPosition | undefined;
+    shape?: TyuiButtonShape | undefined;
+    size?: TyuiButtonSize | undefined;
+    type?: TyuiButtonType | undefined;
+    children?: JSX.Element | undefined;
+};
+type TyuiInputBaseAttributes = Omit<JSX.HTMLAttributes<TyuiInputElement>, 'onInput' | 'on:input' | 'onChange' | 'on:change'>;
+export type TyuiInputSolidAttributes = TyuiInputBaseAttributes & {
+    appearance?: TyuiInputAppearance | undefined;
+    defaultValue?: string | undefined;
+    'default-value'?: string | undefined;
+    disabled?: boolean | undefined;
+    invalid?: boolean | undefined;
+    name?: string | undefined;
+    placeholder?: string | undefined;
+    readonly?: boolean | undefined;
+    required?: boolean | undefined;
+    size?: TyuiInputSize | undefined;
+    type?: TyuiInputType | undefined;
+    value?: string | undefined;
+    children?: JSX.Element | undefined;
+    'on:input'?: ((event: TyuiInputEvent) => void) | undefined;
+    'on:change'?: ((event: Event) => void) | undefined;
+};
+type TyuiCheckboxBaseAttributes = Omit<JSX.HTMLAttributes<TyuiCheckboxElement>, 'onChange' | 'on:change'>;
+export type TyuiCheckboxSolidAttributes = TyuiCheckboxBaseAttributes & {
+    checked?: boolean | undefined;
+    disabled?: boolean | undefined;
+    indeterminate?: boolean | undefined;
+    name?: string | undefined;
+    required?: boolean | undefined;
+    value?: string | undefined;
+    children?: JSX.Element | undefined;
+    'on:change'?: ((event: Event) => void) | undefined;
+};
+export type TyuiRadioSolidAttributes = JSX.HTMLAttributes<TyuiRadioElement> & {
+    checked?: boolean | undefined;
+    disabled?: boolean | undefined;
+    labelPosition?: TyuiRadioLabelPosition | undefined;
+    'label-position'?: TyuiRadioLabelPosition | undefined;
+    name?: string | undefined;
+    required?: boolean | undefined;
+    value?: string | undefined;
+    children?: JSX.Element | undefined;
+};
+type TyuiRadioGroupBaseAttributes = Omit<JSX.HTMLAttributes<TyuiRadioGroupElement>, 'onChange' | 'on:change'>;
+export type TyuiRadioGroupSolidAttributes = TyuiRadioGroupBaseAttributes & {
+    disabled?: boolean | undefined;
+    label?: string | undefined;
+    layout?: TyuiRadioGroupLayout | undefined;
+    name?: string | undefined;
+    required?: boolean | undefined;
+    value?: string | undefined;
+    children?: JSX.Element | undefined;
+    'on:change'?: ((event: TyuiRadioGroupEvent) => void) | undefined;
+};
+export type TyuiFlexSolidAttributes = JSX.HTMLAttributes<TyuiFlexElement> & {
+    direction?: TyuiFlexDirection | undefined;
+    wrap?: TyuiFlexWrap | undefined;
+    align?: TyuiFlexAlign | undefined;
+    justify?: TyuiFlexJustify | undefined;
+    gap?: '0' | '1' | '2' | '3' | '4' | undefined;
+    inline?: boolean | undefined;
+    children?: JSX.Element | undefined;
+};
+export type TyuiClusterSolidAttributes = JSX.HTMLAttributes<TyuiClusterElement> & {
+    align?: TyuiClusterAlign | undefined;
+    justify?: TyuiClusterJustify | undefined;
+    gap?: '0' | '1' | '2' | '3' | '4' | undefined;
+    rowGap?: '0' | '1' | '2' | '3' | '4' | undefined;
+    'row-gap'?: '0' | '1' | '2' | '3' | '4' | undefined;
+    children?: JSX.Element | undefined;
+};
+export type TyuiGridSolidAttributes = JSX.HTMLAttributes<TyuiGridElement> & {
+    minItemSize?: string | undefined;
+    'min-item-size'?: string | undefined;
+    gap?: '0' | '1' | '2' | '3' | '4' | undefined;
+    rowGap?: '0' | '1' | '2' | '3' | '4' | undefined;
+    'row-gap'?: '0' | '1' | '2' | '3' | '4' | undefined;
+    align?: TyuiGridAlign | undefined;
+    justify?: TyuiGridJustify | undefined;
+    dense?: boolean | undefined;
+    children?: JSX.Element | undefined;
+};
+export type TyuiCenterSolidAttributes = JSX.HTMLAttributes<TyuiCenterElement> & {
+    measure?: string | undefined;
+    gutter?: TyuiCenterGutter | undefined;
+    intrinsic?: boolean | undefined;
+    children?: JSX.Element | undefined;
+};
+export type TyuiContainerSolidAttributes = JSX.HTMLAttributes<TyuiContainerElement> & {
+    size?: TyuiContainerSize | undefined;
+    gutter?: TyuiContainerGutter | undefined;
+    bleed?: boolean | undefined;
+    children?: JSX.Element | undefined;
+};
+export type TyuiFrameSolidAttributes = JSX.HTMLAttributes<TyuiFrameElement> & {
+    ratio?: string | undefined;
+    fit?: TyuiFrameFit | undefined;
+    position?: string | undefined;
+    children?: JSX.Element | undefined;
+};
+export type TyuiSidebarSolidAttributes = JSX.HTMLAttributes<TyuiSidebarElement> & {
+    side?: TyuiSidebarSide | undefined;
+    sideSize?: string | undefined;
+    'side-size'?: string | undefined;
+    contentMin?: string | undefined;
+    'content-min'?: string | undefined;
+    gap?: '0' | '1' | '2' | '3' | '4' | undefined;
+    noStretch?: boolean | undefined;
+    'no-stretch'?: boolean | undefined;
+    children?: JSX.Element | undefined;
+};
+declare module 'solid-js' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'tyui-button': TyuiButtonSolidAttributes;
+            'tyui-center': TyuiCenterSolidAttributes;
+            'tyui-checkbox': TyuiCheckboxSolidAttributes;
+            'tyui-cluster': TyuiClusterSolidAttributes;
+            'tyui-container': TyuiContainerSolidAttributes;
+            'tyui-flex': TyuiFlexSolidAttributes;
+            'tyui-frame': TyuiFrameSolidAttributes;
+            'tyui-grid': TyuiGridSolidAttributes;
+            'tyui-input': TyuiInputSolidAttributes;
+            'tyui-radio': TyuiRadioSolidAttributes;
+            'tyui-radio-group': TyuiRadioGroupSolidAttributes;
+            'tyui-sidebar': TyuiSidebarSolidAttributes;
+        }
+    }
+}
+export {};

package/jsx.js

@@ -0,0 +1 @@
+

package/package.json

@@ -0,0 +1,123 @@
+{
+  "name": "@toyu-ui/solid",
+  "version": "0.1.0",
+  "keywords": [
+    "tanstack-intent"
+  ],
+  "homepage": "https://github.com/jurokapsiar/tyui#readme",
+  "bugs": {
+    "url": "https://github.com/jurokapsiar/tyui/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jurokapsiar/tyui.git",
+    "directory": "libs/solid"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.js"
+    },
+    "./button": {
+      "types": "./button.d.ts",
+      "default": "./button.js"
+    },
+    "./checkbox": {
+      "types": "./checkbox.d.ts",
+      "default": "./checkbox.js"
+    },
+    "./input": {
+      "types": "./input.d.ts",
+      "default": "./input.js"
+    },
+    "./radio": {
+      "types": "./radio.d.ts",
+      "default": "./radio.js"
+    },
+    "./radio-group": {
+      "types": "./radio-group.d.ts",
+      "default": "./radio-group.js"
+    },
+    "./jsx": {
+      "types": "./jsx.d.ts",
+      "default": "./jsx.js"
+    },
+    "./define": {
+      "types": "./define.d.ts",
+      "default": "./define.js"
+    },
+    "./define/button": {
+      "types": "./define/button.d.ts",
+      "default": "./define/button.js"
+    },
+    "./define/center": {
+      "types": "./define/center.d.ts",
+      "default": "./define/center.js"
+    },
+    "./define/checkbox": {
+      "types": "./define/checkbox.d.ts",
+      "default": "./define/checkbox.js"
+    },
+    "./define/cluster": {
+      "types": "./define/cluster.d.ts",
+      "default": "./define/cluster.js"
+    },
+    "./define/container": {
+      "types": "./define/container.d.ts",
+      "default": "./define/container.js"
+    },
+    "./define/flex": {
+      "types": "./define/flex.d.ts",
+      "default": "./define/flex.js"
+    },
+    "./define/frame": {
+      "types": "./define/frame.d.ts",
+      "default": "./define/frame.js"
+    },
+    "./define/grid": {
+      "types": "./define/grid.d.ts",
+      "default": "./define/grid.js"
+    },
+    "./define/input": {
+      "types": "./define/input.d.ts",
+      "default": "./define/input.js"
+    },
+    "./define/radio": {
+      "types": "./define/radio.d.ts",
+      "default": "./define/radio.js"
+    },
+    "./define/radio-group": {
+      "types": "./define/radio-group.d.ts",
+      "default": "./define/radio-group.js"
+    },
+    "./define/sidebar": {
+      "types": "./define/sidebar.d.ts",
+      "default": "./define/sidebar.js"
+    },
+    "./custom-elements.json": {
+      "default": "./custom-elements.json"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run --passWithNoTests",
+    "typecheck": "tsc -p tsconfig.lib.json --noEmit"
+  },
+  "dependencies": {
+    "@toyu-ui/define": "^0.1.0",
+    "@toyu-ui/elements": "^0.1.0"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.9.13"
+  },
+  "private": false
+}

package/radio-group.d.ts

@@ -0,0 +1,13 @@
+import { JSX } from 'solid-js';
+import { TyuiRadioGroupEvent, TyuiRadioGroupLayout } from '@toyu-ui/elements/radio-group';
+export type RadioGroupProps = {
+    disabled?: boolean | undefined;
+    label?: string | undefined;
+    layout?: TyuiRadioGroupLayout | undefined;
+    name?: string | undefined;
+    onChange?: ((event: TyuiRadioGroupEvent) => void) | undefined;
+    required?: boolean | undefined;
+    value?: string | undefined;
+    children?: JSX.Element | undefined;
+};
+export declare function RadioGroup(props: RadioGroupProps): JSX.Element;

package/radio-group.js

@@ -0,0 +1,20 @@
+import { addEventListener as u, getOwner as o, insert as f, effect as v, template as m } from "solid-js/web";
+var b = /* @__PURE__ */ m("<tyui-radio-group>", !0, !1, !1);
+function g(t) {
+  return (() => {
+    var a = b();
+    return u(a, "change", t.onChange), a._$owner = o(), f(a, () => t.children), v((e) => {
+      var i = t.disabled, r = t.label, d = t.layout, l = t.name, n = t.required;
+      return i !== e.e && (a.disabled = e.e = i), r !== e.t && (a.label = e.t = r), d !== e.a && (a.layout = e.a = d), l !== e.o && (a.name = e.o = l), n !== e.i && (a.required = e.i = n), e;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0
+    }), v(() => a.value = t.value), a;
+  })();
+}
+export {
+  g as RadioGroup
+};

package/radio.d.ts

@@ -0,0 +1,12 @@
+import { JSX } from 'solid-js';
+import { TyuiRadioLabelPosition } from '@toyu-ui/elements/radio';
+export type RadioProps = {
+    checked?: boolean | undefined;
+    disabled?: boolean | undefined;
+    labelPosition?: TyuiRadioLabelPosition | undefined;
+    name?: string | undefined;
+    required?: boolean | undefined;
+    value?: string | undefined;
+    children?: JSX.Element | undefined;
+};
+export declare function Radio(props: RadioProps): JSX.Element;

package/radio.js

@@ -0,0 +1,19 @@
+import { getOwner as v, insert as o, effect as t, template as u } from "solid-js/web";
+var c = /* @__PURE__ */ u("<tyui-radio>", !0, !1, !1);
+function m(i) {
+  return (() => {
+    var e = c();
+    return e._$owner = v(), o(e, () => i.children), t((a) => {
+      var r = i.disabled, d = i.labelPosition, l = i.name, n = i.required;
+      return r !== a.e && (e.disabled = a.e = r), d !== a.t && (e.labelposition = a.t = d), l !== a.a && (e.name = a.a = l), n !== a.o && (e.required = a.o = n), a;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
+    }), t(() => e.checked = i.checked), t(() => e.value = i.value), e;
+  })();
+}
+export {
+  m as Radio
+};

package/skills/button/SKILL.md

@@ -0,0 +1,35 @@
+---
+name: button
+description: Solid-facing alias for tyui-button guidance.
+license: Apache-2.0
+requires: ['@toyu-ui/solid#setup', '@toyu-ui/elements#button']
+metadata:
+  type: framework
+  library: '@toyu-ui/solid'
+  library_version: '0.1.0'
+  framework: solid
+  source: skills/button/SKILL.md
+---
+
+# TYUI Solid button
+
+## Intent
+
+Use `@toyu-ui/solid#button` to load Solid setup plus the authoritative `@toyu-ui/elements#button` guidance.
+
+## Correct Usage
+
+```tsx
+import { Button } from '@toyu-ui/solid';
+
+<Button appearance="primary">Save</Button>;
+```
+
+## Selection Guidance
+
+- Use the `Button` wrapper for ordinary Solid app code.
+- Use raw `tyui-button` only when direct custom-element access is needed.
+
+## Anti-Patterns
+
+- Do not duplicate button behavior in a Solid wrapper.

package/skills/center/SKILL.md

@@ -0,0 +1,38 @@
+---
+name: center
+description: Solid-facing alias for tyui-center guidance.
+license: Apache-2.0
+requires: ['@toyu-ui/solid#setup', '@toyu-ui/elements#center']
+metadata:
+  type: framework
+  library: '@toyu-ui/solid'
+  library_version: '0.1.0'
+  framework: solid
+  source: skills/center/SKILL.md
+---
+
+# TYUI Solid center
+
+## Intent
+
+Use `@toyu-ui/solid#center` to load Solid setup plus the authoritative `@toyu-ui/elements#center` guidance.
+
+## Correct Usage
+
+```tsx
+import '@toyu-ui/solid/jsx';
+import { defineTyuiCenter } from '@toyu-ui/solid/define/center';
+
+defineTyuiCenter();
+
+<tyui-center measure="60ch" gutter="page" />;
+```
+
+## Selection Guidance
+
+- Use raw `tyui-center` in TSX for readable centered regions.
+- Register it through `@toyu-ui/solid/define/center`.
+
+## Anti-Patterns
+
+- Do not use Center as a card or surface.

package/skills/checkbox/SKILL.md

@@ -0,0 +1,37 @@
+---
+name: checkbox
+description: Solid-facing alias for tyui-checkbox guidance.
+license: Apache-2.0
+requires: ['@toyu-ui/solid#setup', '@toyu-ui/elements#checkbox']
+metadata:
+  type: framework
+  library: '@toyu-ui/solid'
+  library_version: '0.1.0'
+  framework: solid
+  source: skills/checkbox/SKILL.md
+---
+
+# TYUI Solid checkbox
+
+## Intent
+
+Use `@toyu-ui/solid#checkbox` to load Solid setup plus the authoritative `@toyu-ui/elements#checkbox` guidance.
+
+## Correct Usage
+
+```tsx
+import { Checkbox } from '@toyu-ui/solid';
+
+<Checkbox name="updates" value="yes">
+  Send updates
+</Checkbox>;
+```
+
+## Selection Guidance
+
+- Use Checkbox for independent boolean choices in Solid.
+- Use RadioGroup and Radio for mutually exclusive choices.
+
+## Anti-Patterns
+
+- Do not use Checkbox as a command button.

package/skills/cluster/SKILL.md

@@ -0,0 +1,38 @@
+---
+name: cluster
+description: Solid-facing alias for tyui-cluster guidance.
+license: Apache-2.0
+requires: ['@toyu-ui/solid#setup', '@toyu-ui/elements#cluster']
+metadata:
+  type: framework
+  library: '@toyu-ui/solid'
+  library_version: '0.1.0'
+  framework: solid
+  source: skills/cluster/SKILL.md
+---
+
+# TYUI Solid cluster
+
+## Intent
+
+Use `@toyu-ui/solid#cluster` to load Solid setup plus the authoritative `@toyu-ui/elements#cluster` guidance.
+
+## Correct Usage
+
+```tsx
+import '@toyu-ui/solid/jsx';
+import { defineTyuiCluster } from '@toyu-ui/solid/define/cluster';
+
+defineTyuiCluster();
+
+<tyui-cluster gap="2" />;
+```
+
+## Selection Guidance
+
+- Use raw `tyui-cluster` in TSX for wrapping action rows and tags.
+- Register it through `@toyu-ui/solid/define/cluster`.
+
+## Anti-Patterns
+
+- Do not use Cluster for table or data-grid semantics.