Menu
How to launch and drive the devcon website to verify UI changes at runtime (dev server + headless Chromium via playwright-core).
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
How to handle "current time" in the event-app (the Devcon PWA under event-app/). Use whenever building or changing time-dependent UI — schedule live/upcoming status, countdowns, the room-screen clock, "happening now" badges, relative times, which day to highlight, etc. All such code must read the current time from the shared `useNow`/`useNowMs` hook (never `Date.now()` / `new Date()` directly in a component), so it can be mocked via URL query params (`?mockNow=`, `?mockSpeed=`) for testing date-specific flows — the same pattern devcon.org uses. Triggers: "now", "current time", "countdown", "live/upcoming", "relative time", "today", "mock time", "test the date", "schedule status", "clock".
How to add or change state/data persistence in the event-app (the offline-first Devcon PWA under event-app/). Use whenever adding a data-fetching hook, caching API responses, persisting user state, or deciding where state lives in event-app. The app is offline-first: all persisted state must go through the Dexie/IndexedDB-backed SWR layer so it survives no connectivity. Triggers: "fetch X in event-app", "cache", "offline", "persist", "store", "useSWR", "Dexie", "IndexedDB", "add a hook", "state management".
Postgres performance optimization and best practices from Supabase. Use this skill when writing, reviewing, or optimizing Postgres queries, schema designs, or database configurations.
| name | verify |
| description | How to launch and drive the devcon website to verify UI changes at runtime (dev server + headless Chromium via playwright-core). |
pnpm dev from monorepo/devcon starts TinaCMS + Next.js on http://localhost:3000.
http://localhost:3000 directly./speaker-applications/).No Playwright/Puppeteer in the repo, but Playwright browsers are cached on this machine. Recipe:
npm i playwright-coreconst { chromium } = require('playwright-core')
const exe = `${os.homedir()}/Library/Caches/ms-playwright/chromium_headless_shell-1223/chrome-headless-shell-mac-arm64/chrome-headless-shell`
const browser = await chromium.launch({ executablePath: exe })
<file>-module-scss-module__<hash>__<local-name> — the local name is a suffix, so select with [class$="__track-card"] / [class*="track-card-inner"], not [class*="track-card__"].newContext({ isMobile: true, hasTouch: true, viewport: {width: 390, height: 844} }) correctly makes matchMedia('(hover: none)') and (pointer: coarse) match, which is what src/hooks/useIsTouchDevice.ts keys off.page.emulateMedia({ reducedMotion: 'reduce' }).page.locator('section#id').screenshot(...) after scrollIntoViewIfNeeded().pnpm lint (next lint) is currently broken repo-wide on Next 16 ("Invalid project directory ... /lint") — not a signal about your change.pnpm exec tsc --noEmit (per CLAUDE.md). Do not run pnpm build unless asked.