vueuse-math-skilld

Name: vueuse-math-skilld
Author: skilld-dev

173stars8forks

How to install vueuse-math-skilld?

skilld-dev/vue-ecosystem-skills/vueuse-math-skilld

$npx -y skills add skilld-dev/vue-ecosystem-skills --skill vueuse-math-skilld

Installs into the current project.

Summary

Math functions for VueUse. ALWAYS use when writing code importing \"@vueuse/math\". Consult for debugging, best practices, or modifying @vueuse/math, vueuse/math, vueuse math, vueuse.

Files · 1

View on GitHub

SKILL.md

1	# vueuse/vueuse `@vueuse/math@14.3.0`
2	Tags: alpha: 14.0.0-alpha.3, beta: 14.0.0-beta.1, latest: 14.3.0
3
4	References: [Docs](./references/docs/_INDEX.md)
5	## API Changes
6
7	This section documents version-specific API changes — prioritize recent major/minor releases.
8
9	- DEPRECATED: `and`, `or`, `not` — v14 deprecated in favor of original names `logicAnd`, `logicOr`, `logicNot` [source](./references/releases/v14.0.0.md)
10
11	- BREAKING: Requires Vue 3.5+ — v14 moved to Vue 3.5 as minimum version, enabling native `useTemplateRef` and `MaybeRefOrGetter` [source](./references/releases/v14.0.0.md)
12
13	- BREAKING: ESM-only — v13 dropped CommonJS (CJS) support entirely [source](./references/releases/v13.0.0.md)
14
15	- NEW: `useAverage` — reactively calculate average from an array or variadic arguments
16
17	- NEW: `useSum` — reactively calculate sum from an array or variadic arguments
18
19	- NEW: `createProjection` — create a reusable numeric projector between two numeric domains
20
21	- NEW: `createGenericProjection` — create a projector with a custom mapping function for arbitrary types
22
23	- NEW: `usePrecision` — options now include `math` property for rounding strategy (`floor`, `ceil`, `round`)
24
25	- NEW: `useClamp` — returns `ComputedRef` instead of `Ref` when input is a getter or readonly ref
26
27	- NEW: `useMath` — provides reactive access to any standard `Math` method via key name
28
29	- NEW: `logicAnd`, `logicOr`, `logicNot` — variadic reactive boolean logic supporting multiple refs
30
31	- NEW: `useMax`, `useMin` — support both array and variadic arguments for reactive comparison
32
33	- NEW: `useAbs`, `useCeil`, `useFloor`, `useRound`, `useTrunc` — dedicated reactive wrappers for common Math methods
34
35	- NEW: `useProjection` — reactive numeric projection from one domain to another
36
37	Also changed: `tsdown` build system v14 · `WatchSource<T>` types v14 · `MaybeRefOrGetter` native v12.8
38
39	## Best Practices
40
41	- Use `useClamp` with a mutable `ref` to create a self-validating state. When a mutable ref is passed, it returns a writable computed that automatically clamps any value assigned to it [source](./references/docs/useClamp/index.md)
42
43	```ts
44	// Preferred: prevents invalid state assignment
45	const value = useClamp(shallowRef(0), 0, 10)
46	value.value = 15 // state remains 10
47	```
48
49	- Pass reactive arrays for domains in `useProjection` to handle dynamic scaling. This is preferred for UI elements like zoomable charts or responsive sliders where the input/output boundaries change over time [source](./references/docs/useProjection/index.md)
50
51	- Define reusable mappers with `createProjection` outside component logic. This ensures consistent scaling across different parts of the application and reduces the overhead of redefining domains [source](./references/docs/createProjection/index.md)
52
53	- Leverage rest arguments in aggregation composables for ad-hoc calculations. `useSum`, `useAverage`, `useMax`, and `useMin` accept multiple refs directly, avoiding the need to create intermediate array refs
54
55	```ts
56	// Preferred: cleaner syntax for fixed sets of refs
57	const total = useSum(refA, refB, refC)
58	```
59
60	- Prefer `usePrecision` over `toFixed` for numeric operations. `usePrecision` returns a `number`, which prevents type-coercion bugs and allows further mathematical operations without re-parsing strings [source](./references/docs/usePrecision/index.md)
61
62	- Use explicit rounding modes in `usePrecision` for specific UI requirements. Pass the `math` option ('floor' \| 'ceil' \| 'round') to control how fractional values are handled in paginators or progress bars [source](./references/docs/usePrecision/index.md)
63
64	- Combine `logicAnd` or `logicOr` with `@vueuse/core`'s `whenever` for cleaner side effects. This pattern is more readable than complex manual `computed` properties when triggering actions based on multiple reactive flags [source](./references/docs/logicAnd/index.md)
65
66	- Employ `createGenericProjection` for non-linear domain mapping. Provide a custom projector function to handle logarithmic scales or custom eased transitions between numeric domains [source](./references/docs/createGenericProjection/index.md)
67
68	- Use `useMath` to reactively derive values from standard `Math` methods. It automatically wraps multiple arguments and ensures the result updates whenever any input dependency changes [source](./references/docs/useMath/index.md)
69
70	- Use `logicNot` for reactive boolean inversion in templates. It expresses intent more clearly than `!ref.value` or manual `computed` wrappers when defining visibility or disabled states

People who liked this also viewed

6 picks

Type

vueuse-math-skilld

173stars8forks

View on GitHub

How to install vueuse-math-skilld?

skilld-dev/vue-ecosystem-skills/vueuse-math-skilld

$npx -y skills add skilld-dev/vue-ecosystem-skills --skill vueuse-math-skilld

Installs into the current project.

Summary

Math functions for VueUse. ALWAYS use when writing code importing \"@vueuse/math\". Consult for debugging, best practices, or modifying @vueuse/math, vueuse/math, vueuse math, vueuse.

Files · 1

View on GitHub

SKILL.md

1	# vueuse/vueuse `@vueuse/math@14.3.0`
2	Tags: alpha: 14.0.0-alpha.3, beta: 14.0.0-beta.1, latest: 14.3.0
3
4	References: [Docs](./references/docs/_INDEX.md)
5	## API Changes
6
7	This section documents version-specific API changes — prioritize recent major/minor releases.
8
9	- DEPRECATED: `and`, `or`, `not` — v14 deprecated in favor of original names `logicAnd`, `logicOr`, `logicNot` [source](./references/releases/v14.0.0.md)
10
11	- BREAKING: Requires Vue 3.5+ — v14 moved to Vue 3.5 as minimum version, enabling native `useTemplateRef` and `MaybeRefOrGetter` [source](./references/releases/v14.0.0.md)
12
13	- BREAKING: ESM-only — v13 dropped CommonJS (CJS) support entirely [source](./references/releases/v13.0.0.md)
14
15	- NEW: `useAverage` — reactively calculate average from an array or variadic arguments
16
17	- NEW: `useSum` — reactively calculate sum from an array or variadic arguments
18
19	- NEW: `createProjection` — create a reusable numeric projector between two numeric domains
20
21	- NEW: `createGenericProjection` — create a projector with a custom mapping function for arbitrary types
22
23	- NEW: `usePrecision` — options now include `math` property for rounding strategy (`floor`, `ceil`, `round`)
24
25	- NEW: `useClamp` — returns `ComputedRef` instead of `Ref` when input is a getter or readonly ref
26
27	- NEW: `useMath` — provides reactive access to any standard `Math` method via key name
28
29	- NEW: `logicAnd`, `logicOr`, `logicNot` — variadic reactive boolean logic supporting multiple refs
30
31	- NEW: `useMax`, `useMin` — support both array and variadic arguments for reactive comparison
32
33	- NEW: `useAbs`, `useCeil`, `useFloor`, `useRound`, `useTrunc` — dedicated reactive wrappers for common Math methods
34
35	- NEW: `useProjection` — reactive numeric projection from one domain to another
36
37	Also changed: `tsdown` build system v14 · `WatchSource<T>` types v14 · `MaybeRefOrGetter` native v12.8
38
39	## Best Practices
40
41	- Use `useClamp` with a mutable `ref` to create a self-validating state. When a mutable ref is passed, it returns a writable computed that automatically clamps any value assigned to it [source](./references/docs/useClamp/index.md)
42
43	```ts
44	// Preferred: prevents invalid state assignment
45	const value = useClamp(shallowRef(0), 0, 10)
46	value.value = 15 // state remains 10
47	```
48
49	- Pass reactive arrays for domains in `useProjection` to handle dynamic scaling. This is preferred for UI elements like zoomable charts or responsive sliders where the input/output boundaries change over time [source](./references/docs/useProjection/index.md)
50
51	- Define reusable mappers with `createProjection` outside component logic. This ensures consistent scaling across different parts of the application and reduces the overhead of redefining domains [source](./references/docs/createProjection/index.md)
52
53	- Leverage rest arguments in aggregation composables for ad-hoc calculations. `useSum`, `useAverage`, `useMax`, and `useMin` accept multiple refs directly, avoiding the need to create intermediate array refs
54
55	```ts
56	// Preferred: cleaner syntax for fixed sets of refs
57	const total = useSum(refA, refB, refC)
58	```
59
60	- Prefer `usePrecision` over `toFixed` for numeric operations. `usePrecision` returns a `number`, which prevents type-coercion bugs and allows further mathematical operations without re-parsing strings [source](./references/docs/usePrecision/index.md)
61
62	- Use explicit rounding modes in `usePrecision` for specific UI requirements. Pass the `math` option ('floor' \| 'ceil' \| 'round') to control how fractional values are handled in paginators or progress bars [source](./references/docs/usePrecision/index.md)
63
64	- Combine `logicAnd` or `logicOr` with `@vueuse/core`'s `whenever` for cleaner side effects. This pattern is more readable than complex manual `computed` properties when triggering actions based on multiple reactive flags [source](./references/docs/logicAnd/index.md)
65
66	- Employ `createGenericProjection` for non-linear domain mapping. Provide a custom projector function to handle logarithmic scales or custom eased transitions between numeric domains [source](./references/docs/createGenericProjection/index.md)
67
68	- Use `useMath` to reactively derive values from standard `Math` methods. It automatically wraps multiple arguments and ensures the result updates whenever any input dependency changes [source](./references/docs/useMath/index.md)
69
70	- Use `logicNot` for reactive boolean inversion in templates. It expresses intent more clearly than `!ref.value` or manual `computed` wrappers when defining visibility or disabled states

People who liked this also viewed

6 picks

Type