메뉴
How to launch and drive the devcon website to verify UI changes at runtime (dev server + headless Chromium via playwright-core).
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| 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.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.