app-notificationslisted
Install: claude install-skill Nioris/project-forge
# App Notifications
## Purpose
Apps that remind users at the right time have 3x retention. This skill adds local notifications, in-app notification center, and push infrastructure.
## Step 1: In-App Toast System
```javascript
/**
* Toast notification system — stacks from bottom
* Types: success, error, warning, info
*/
const Toast = (() => {
let container;
function getContainer() {
if (!container) {
container = document.createElement('div');
container.style.cssText = 'position:fixed;bottom:16px;right:16px;z-index:9999;display:flex;flex-direction:column-reverse;gap:8px;pointer-events:none;max-width:360px;width:calc(100vw - 32px)';
document.body.appendChild(container);
}
return container;
}
const STYLES = {
success: { bg: '#065f46', icon: '✓', border: '#10b981' },
error: { bg: '#7f1d1d', icon: '✕', border: '#ef4444' },
warning: { bg: '#78350f', icon: '⚠', border: '#f59e0b' },
info: { bg: '#1e3a5f', icon: 'ℹ', border: '#3b82f6' },
};
return {
show(message, type = 'info', duration = 4000) {
const s = STYLES[type] || STYLES.info;
const el = document.createElement('div');
el.style.cssText = `display:flex;align-items:center;gap:10px;padding:12px 16px;
border-radius:12px;background:${s.bg};color:#fff;font-size:14px;
pointer-events:auto;box-shadow:0 4px 16px rgba(0,0,0,0.3);
border-left:3px solid ${s.border};
transform:translateX(120%);transition:transform .3s c