feat: Complete fleet — 94 skills across 10+ domains

Pulled ALL skills from 15 source repositories:
- anthropics/skills: 16 (docs, design, MCP, testing)
- obra/superpowers: 14 (TDD, debugging, agents, planning)
- coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth)
- better-auth/skills: 5 (auth patterns)
- vercel-labs/agent-skills: 5 (React, design, Vercel)
- antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo)
- Plus 13 individual skills from various repos

Mosaic Stack is not limited to coding — the Orchestrator and
subagents serve coding, business, design, marketing, writing,
logistics, analysis, and more.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jason Woltje
2026-02-16 16:27:42 -06:00
parent 861b28b965
commit f5792c40be
1262 changed files with 212048 additions and 61 deletions

View File

@@ -0,0 +1,177 @@
---
category: Browser
---
# useWebNotification
Reactive [Notification](https://developer.mozilla.org/en-US/docs/Web/API/notification)
The Web Notification interface of the Notifications API is used to configure and display desktop notifications to the user.
## Usage
::: tip
Before an app can send a notification, the user must grant the application the right to do so. The user's OS settings may also prevent expected notification behaviour.
:::
```ts
import { useWebNotification } from '@vueuse/core'
const {
isSupported,
notification,
permissionGranted,
show,
close,
onClick,
onShow,
onError,
onClose,
} = useWebNotification({
title: 'Hello, VueUse world!',
dir: 'auto',
lang: 'en',
renotify: true,
tag: 'test',
})
if (isSupported.value && permissionGranted.value)
show()
```
This composable also utilizes the createEventHook utility from '@vueuse/shared`:
```ts
import { useWebNotification } from '@vueuse/core'
const { onClick, onShow, onError, onClose, } = useWebNotification()
// ---cut---
onClick((evt: Event) => {
// Do something with the notification on:click event...
})
onShow((evt: Event) => {
// Do something with the notification on:show event...
})
onError((evt: Event) => {
// Do something with the notification on:error event...
})
onClose((evt: Event) => {
// Do something with the notification on:close event...
})
```
## Type Declarations
```ts
export interface WebNotificationOptions {
/**
* The title read-only property of the Notification interface indicates
* the title of the notification
*
* @default ''
*/
title?: string
/**
* The body string of the notification as specified in the constructor's
* options parameter.
*
* @default ''
*/
body?: string
/**
* The text direction of the notification as specified in the constructor's
* options parameter.
*
* @default ''
*/
dir?: "auto" | "ltr" | "rtl"
/**
* The language code of the notification as specified in the constructor's
* options parameter.
*
* @default DOMString
*/
lang?: string
/**
* The ID of the notification(if any) as specified in the constructor's options
* parameter.
*
* @default ''
*/
tag?: string
/**
* The URL of the image used as an icon of the notification as specified
* in the constructor's options parameter.
*
* @default ''
*/
icon?: string
/**
* Specifies whether the user should be notified after a new notification
* replaces an old one.
*
* @default false
*/
renotify?: boolean
/**
* A boolean value indicating that a notification should remain active until the
* user clicks or dismisses it, rather than closing automatically.
*
* @default false
*/
requireInteraction?: boolean
/**
* The silent read-only property of the Notification interface specifies
* whether the notification should be silent, i.e., no sounds or vibrations
* should be issued, regardless of the device settings.
*
* @default false
*/
silent?: boolean
/**
* Specifies a vibration pattern for devices with vibration hardware to emit.
* A vibration pattern, as specified in the Vibration API spec
*
* @see https://w3c.github.io/vibration/
*/
vibrate?: number[]
}
export interface UseWebNotificationOptions
extends ConfigurableWindow,
WebNotificationOptions {
/**
* Request for permissions onMounted if it's not granted.
*
* Can be disabled and calling `ensurePermissions` to grant afterwords.
*
* @default true
*/
requestPermissions?: boolean
}
/**
* Reactive useWebNotification
*
* @see https://vueuse.org/useWebNotification
* @see https://developer.mozilla.org/en-US/docs/Web/API/notification
*/
export declare function useWebNotification(
options?: UseWebNotificationOptions,
): {
isSupported: ComputedRef<boolean>
notification: Ref<Notification | null, Notification | null>
ensurePermissions: () => Promise<boolean | undefined>
permissionGranted: ShallowRef<boolean, boolean>
show: (
overrides?: WebNotificationOptions,
) => Promise<Notification | undefined>
close: () => void
onClick: EventHookOn<any>
onShow: EventHookOn<any>
onError: EventHookOn<any>
onClose: EventHookOn<any>
}
export type UseWebNotificationReturn = ReturnType<typeof useWebNotification>
```