feat(design): design bible skill, style guide page, responsive preview by timothyfroehlich · Pull Request #1135 · timothyfroehlich/PinPoint

timothyfroehlich · 2026-03-29T14:58:28Z

Summary

Design Bible skill doc — 12-section decision guide for AI agents covering visual identity, surface hierarchy, mobile shell contract, page archetypes, spacing, typography, and component inventory
Style guide page (/dev/design-system) — living reference rendering actual components with real theme tokens (dev-only)
Responsive preview (/dev/preview) — side-by-side desktop + mobile iframe comparison with device presets, view mode toggle, hide chrome, and localStorage persistence
Dev-only sidebar links to both pages
X-Frame-Options relaxed from DENY to SAMEORIGIN to enable same-origin iframes

Context

This is Phase 1 of the Design Bible & Consistency epic (PP-yxw). The skill doc and preview tool are prerequisites for the consistency fixes that follow — agents need the rules before applying them, and the preview page lets Tim monitor changes visually as they land.

Test plan

Visit /dev/design-system — all sections render with correct tokens and components
Visit /dev/preview?path=/dashboard — both viewports load, Hide Chrome strips navigation
Toggle Desktop/Both/Mobile — correct viewport(s) shown
Change settings, trigger HMR — state persists via localStorage
Sidebar shows Design System and Preview links in dev mode
Production build does NOT show dev pages or sidebar links

🤖 Generated with Claude Code

…e preview Design Bible skill doc (.agent/skills/pinpoint-design-bible/SKILL.md): - 12-section decision guide covering visual identity, surface hierarchy, mobile shell contract, responsive strategy, page archetypes, spacing rhythm, card patterns, navigation, typography, borders, transitions, and component inventory Style guide page (/dev/design-system): - Living reference rendering actual components with real theme tokens - Color palette, surfaces, typography, spacing, glows, buttons, cards, badges, badge grids, mobile shell diagram, page archetypes - Dev-only (redirects in production) Responsive preview (/dev/preview): - Side-by-side desktop + mobile iframe comparison for any route - Device presets, Desktop/Both/Mobile toggle, Hide Chrome mode - State persisted to localStorage across HMR reloads - Presets for Design System, Dashboard, Issues, Machines, Machine Detail, Issue Detail, Settings, Help, Report Also: - Relax X-Frame-Options from DENY to SAMEORIGIN (enables same-origin iframes) - Add dev-only Design System and Preview links to sidebar Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

vercel · 2026-03-29T14:58:33Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
pin-point	Ready	Preview, Comment	Mar 29, 2026 8:02pm

supabase · 2026-03-29T14:58:43Z

Updates to Preview Branch (worktree/design-bible) ↗︎

Deployments	Status	Updated
Database	✅	Sun, 29 Mar 2026 19:59:53 UTC
Services	✅	Sun, 29 Mar 2026 19:59:53 UTC
APIs	✅	Sun, 29 Mar 2026 19:59:53 UTC

Tasks are run on every commit but only new migration files are pushed.
Close and reopen this PR if you want to apply changes from existing seed or migration files.

Tasks	Status	Updated
Configurations	✅	Sun, 29 Mar 2026 19:59:53 UTC
Migrations	✅	Sun, 29 Mar 2026 19:59:53 UTC
Seeding	✅	Sun, 29 Mar 2026 19:59:53 UTC
Edge Functions	✅	Sun, 29 Mar 2026 19:59:53 UTC

View logs for this Workflow Run ↗︎.
Learn more about Supabase for Git ↗︎.

Add .beads/, .dolt/, .beads-credential-key, and .superpowers/ to gitignore. Remove stale !.beads/*.jsonl negation rule that conflicted. Addresses bd doctor warnings about missing exclusion patterns. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Copilot

Pull request overview

Adds dev-only design tooling and guidance to support consistent UI changes across PinPoint, including a living style guide, a responsive preview utility, and an agent “design bible” skill doc.

Changes:

Add /dev/design-system style guide page rendering real components and documenting tokens/patterns.
Add /dev/preview responsive iframe preview page with presets and localStorage persistence.
Add dev-only sidebar links and relax X-Frame-Options to allow same-origin iframes.

Reviewed changes

Copilot reviewed 5 out of 6 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
`src/components/layout/Sidebar.tsx`	Adds dev-only navigation entries for Design System + Preview.
`src/app/(app)/dev/preview/page.tsx`	Implements client-side responsive iframe preview tool with state persistence and chrome-hiding CSS injection.
`src/app/(app)/dev/design-system/page.tsx`	Adds dev-only design system/style guide page showcasing tokens and components.
`next.config.ts`	Changes `X-Frame-Options` to `SAMEORIGIN` for all routes.
`.agent/skills/pinpoint-design-bible/SKILL.md`	Adds a design bible skill doc for agents covering UI consistency rules.

Comments suppressed due to low confidence (1)

next.config.ts:67

X-Frame-Options is being relaxed to SAMEORIGIN for all routes (source: "/:path*"). That’s broader than needed for the dev-only iframe preview tool and weakens clickjacking protection in production compared to the previous DENY. Consider keeping DENY in production and only using SAMEORIGIN in development (or scoping the header to /dev/preview / /dev/:path* only).

  async headers() {
    return [
      {
        source: "/:path*",
        headers: [
          {
            key: "Strict-Transport-Security",
            value: "max-age=63072000; includeSubDomains; preload",
          },
          {
            key: "X-Frame-Options",
            value: "SAMEORIGIN",
          },
          {
            key: "X-Content-Type-Options",
            value: "nosniff",
          },
          {
            key: "Referrer-Policy",
            value: "strict-origin-when-cross-origin",
          },
          {
            key: "Permissions-Policy",
            value: "camera=(), microphone=(), geolocation=()",
          },
        ],
      },

src/app/(app)/dev/preview/page.tsx

src/app/(app)/dev/design-system/page.tsx

src/app/(app)/dev/preview/page.tsx

Beads gitignore entries (.beads/, .dolt/, .beads-credential-key) will be handled on the main worktree. Keep .superpowers/ ignore only. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- Add server wrapper for /dev/preview with production redirect - Sanitize iframe src paths to same-origin relative paths only - Fix color palette description to clarify hex values are mirrored Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Copilot

Pull request overview

Copilot reviewed 6 out of 7 changed files in this pull request and generated 4 comments.

src/app/(app)/dev/preview/preview-client.tsx

next.config.ts

src/app/(app)/dev/design-system/page.tsx

.agent/skills/pinpoint-design-bible/SKILL.md

- Sanitize path from localStorage restore (not just URL param/form input) - Use CSS variables for color swatch backgrounds instead of hardcoded hex - Add pinpoint-design-bible skill to AGENTS.md skill table Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Copilot

Pull request overview

Copilot reviewed 7 out of 8 changed files in this pull request and generated 4 comments.

src/app/(app)/dev/preview/preview-client.tsx

src/app/(app)/dev/design-system/page.tsx

# Conflicts: # .gitignore

Keep both beads gitignore entries (from main) and .superpowers/ entry (from this branch). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- Replace blanket colon ban in sanitizePath with protocol-scheme regex so query strings containing colons (e.g. ?since=12:00) work - Fix broken #typography anchor href in design system page Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Copilot

Pull request overview

Copilot reviewed 7 out of 7 changed files in this pull request and generated 5 comments.

src/app/(app)/dev/preview/preview-client.tsx

src/components/layout/Sidebar.tsx

src/app/(app)/dev/preview/page.tsx

src/app/(app)/dev/design-system/page.tsx

src/app/(app)/dev/preview/preview-client.tsx

- Remove hideChrome from iframe keys to prevent full reload on toggle; inject/remove CSS in-place via useEffect instead - Switch dev page gating from NODE_ENV to VERCEL_ENV so preview deployments can access design system and preview pages Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Copilot AI review requested due to automatic review settings March 29, 2026 14:58

Copilot started reviewing on behalf of timothyfroehlich March 29, 2026 14:58 View session

vercel bot deployed to Preview March 29, 2026 14:59 View deployment

vercel bot deployed to Preview March 29, 2026 15:03 View deployment

Copilot AI reviewed Mar 29, 2026

View reviewed changes

src/app/(app)/dev/preview/page.tsx Outdated Show resolved Hide resolved

src/app/(app)/dev/design-system/page.tsx Show resolved Hide resolved

src/app/(app)/dev/preview/page.tsx Outdated Show resolved Hide resolved

timothyfroehlich and others added 2 commits March 29, 2026 10:14

chore: revert beads gitignore changes, keep superpowers

59cf396

Beads gitignore entries (.beads/, .dolt/, .beads-credential-key) will be handled on the main worktree. Keep .superpowers/ ignore only. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Copilot AI review requested due to automatic review settings March 29, 2026 15:18

Copilot started reviewing on behalf of timothyfroehlich March 29, 2026 15:19 View session

Copilot AI reviewed Mar 29, 2026

View reviewed changes

src/app/(app)/dev/preview/preview-client.tsx Outdated Show resolved Hide resolved

next.config.ts Show resolved Hide resolved

src/app/(app)/dev/design-system/page.tsx Show resolved Hide resolved

.agent/skills/pinpoint-design-bible/SKILL.md Show resolved Hide resolved

vercel bot deployed to Preview March 29, 2026 15:24 View deployment

vercel bot deployed to Preview March 29, 2026 15:34 View deployment

timothyfroehlich mentioned this pull request Mar 29, 2026

fix(deps): resolve all pnpm audit vulnerabilities #1139

Merged

2 tasks

Merge remote-tracking branch 'origin/main' into worktree/design-bible

f700ff6

Copilot AI review requested due to automatic review settings March 29, 2026 19:03

Copilot started reviewing on behalf of timothyfroehlich March 29, 2026 19:03 View session

vercel bot deployed to Preview March 29, 2026 19:06 View deployment

Copilot AI reviewed Mar 29, 2026

View reviewed changes

src/app/(app)/dev/preview/preview-client.tsx Outdated Show resolved Hide resolved

src/app/(app)/dev/design-system/page.tsx Outdated Show resolved Hide resolved

src/app/(app)/dev/design-system/page.tsx Show resolved Hide resolved

src/app/(app)/dev/design-system/page.tsx Show resolved Hide resolved

Merge remote-tracking branch 'origin/main' into worktree/design-bible

2335634

# Conflicts: # .gitignore

vercel bot deployed to Preview March 29, 2026 19:36 View deployment

timothyfroehlich and others added 2 commits March 29, 2026 14:50

merge: resolve .gitignore conflict with main

e332c57

Keep both beads gitignore entries (from main) and .superpowers/ entry (from this branch). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Copilot AI review requested due to automatic review settings March 29, 2026 19:52

Copilot started reviewing on behalf of timothyfroehlich March 29, 2026 19:52 View session

vercel bot deployed to Preview March 29, 2026 19:53 View deployment

Copilot AI reviewed Mar 29, 2026

View reviewed changes

vercel bot deployed to Preview March 29, 2026 20:02 View deployment

timothyfroehlich added the ready-for-review PR passed CI and has no unresolved review comments label Mar 29, 2026

timothyfroehlich merged commit 35f0d57 into main Mar 29, 2026
23 checks passed

timothyfroehlich deleted the worktree/design-bible branch March 29, 2026 20:18

github-actions bot mentioned this pull request Mar 30, 2026

Weekly Security Review: Mar 22 – Mar 30, 2026 #1142

Open

Conversation

timothyfroehlich commented Mar 29, 2026

Summary

Context

Test plan

Uh oh!

vercel bot commented Mar 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

supabase bot commented Mar 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel bot commented Mar 29, 2026 •

edited

Loading

supabase bot commented Mar 29, 2026 •

edited

Loading