Create, update, hide, show, list, and delete Übersicht desktop widgets on macOS. Use this skill whenever the user asks for desktop widgets, desktop gadgets, or widgets.
~/Library/Application Support/Übersicht/widgets/~/.claude/skills/widget/templates/ after install, or .claude/skills/widget/templates/ inside this repo/Applications/Übersicht.app or /Applications/Uebersicht.appbash scripts/setup.sh firstscripts/setup.sh is the default entrypoint: it installs missing host dependencies, starts Übersicht, prepares the widget directory, installs the skill, and verifies the resultbash scripts/setup.sh --check only when the user explicitly wants a dry-run check or when you are diagnosing an installation problembash ~/.claude/skills/widget/scripts/doctor.sh only for a fast post-install health check~/.claude/skills/widget/scripts/ for setup, starting Übersicht, checking the environment, installing widgets, and listing widgetsposition: fixedbottom >= 90px40px140px to 360px48px to 220pxpointer-events: none1000ms and 600000ms1000ms only for clocks or clearly time-sensitive UIrefreshFrequency = falsepatterns.md before inventing new structure14px to 20pxSF Pro Display and SF Mono# First-time setup inside this repo
bash scripts/setup.sh
bash scripts/setup.sh --check
# Fast post-install health check
bash ~/.claude/skills/widget/scripts/doctor.sh
# Start Übersicht
bash ~/.claude/skills/widget/scripts/start-uebersicht.sh
# Install or update a template widget
bash ~/.claude/skills/widget/scripts/install-widget.sh \
~/.claude/skills/widget/templates/clock.jsx
# List installed widgets
bash ~/.claude/skills/widget/scripts/list-widgets.sh
# Write a brand-new custom widget
cat > ~/Library/Application\ Support/Übersicht/widgets/{name}.jsx << 'EOF'
{widget_code}
EOF
# Hide a widget without deleting it
mv ~/Library/Application\ Support/Übersicht/widgets/{name}.jsx \
~/Library/Application\ Support/Übersicht/widgets/{name}.jsx.disabled
# Show a hidden widget
mv ~/Library/Application\ Support/Übersicht/widgets/{name}.jsx.disabled \
~/Library/Application\ Support/Übersicht/widgets/{name}.jsx
# Delete a widget
rm ~/Library/Application\ Support/Übersicht/widgets/{name}.jsx
Prefer the scripts/ helpers for host operations. Only write raw widget files directly when creating or replacing actual JSX content.
When the user asks for a standard widget that already exists as a built-in template, do not rewrite it from scratch. Run scripts/setup.sh if needed, then install the matching template.
Do not install or copy any widget file until scripts/setup.sh has completed successfully and the host app is available.
// Optional shell command. stdout is passed into render as output.
export const command = "date '+%H:%M:%S'"
// Refresh frequency in milliseconds. Pure frontend widgets should use false.
export const refreshFrequency = 1000
// CSS positioning. Use position: fixed.
export const className = `
position: fixed;
bottom: 90px;
right: 40px;
`
// render receives { output, error }
export const render = ({ output }) => {
return <div>{output?.trim()}</div>
}
react// Bad
import { useState } from 'react'
// Good
import { React } from 'uebersicht'
render// Bad
export const render = () => {
const [n, setN] = React.useState(0)
}
// Good
const Widget = () => {
const { useState } = React
const [n, setN] = useState(0)
return <div>{n}</div>
}
export const render = () => <Widget />
// Bad
setRemaining(r => {
if (r <= 1) return p => p === 'work' ? BREAK : WORK
})
// Good
useEffect(() => {
if (remaining !== 0) return
setPhase(p => p === 'work' ? 'break' : 'work')
setRemaining(p => p === 'work' ? BREAK : WORK)
}, [remaining])
| Position | CSS |
|---|---|
| Bottom right | bottom: 90px; right: 40px; |
| Bottom left | bottom: 90px; left: 40px; |
| Top right | top: 40px; right: 40px; |
| Top left | top: 40px; left: 40px; |
| File | Purpose | Default Position |
|---|---|---|
clock.jsx | Clock and date | Bottom right |
horizon-clock.jsx | Alternate horizontal clock | Bottom right |
pomodoro.jsx | Pomodoro timer | Bottom left |
now-playing.jsx | Apple Music now playing | Bottom center |
system-stats.jsx | CPU, memory, battery | Top right |
weather-canvas.jsx | Animated weather card | Top left |
git-pulse.jsx | Local Git activity heatmap | Top right |
memo-capsule.jsx | Local quick-note capsule | Top center |
volume-knob.jsx | System volume control knob | Right side |
tap-counter.jsx | Simple interactive counter with persisted local state | Bottom right |
Copy a template directly when it already matches the request, or use it as the starting point for a custom widget.