chore(design-sync): add PixelForge — PS-style editor UI as a second DS#98
Merged
Conversation
Sync the image editor's Photoshop-style web UI as a SECOND, separate Claude
Design project ("PixelForge — Image Editor UI Kit"), distinct from the base
shadcn/ui kit. Built from the same repo via a parallel config; no app/src
changes.
What's synced (30 components): the signature PS chrome (MenuBar, OptionsBar,
ToolsPalette, StatusBar), dockable panels (Layers/Properties/History/Actions/
Paths/LayerComps/Adjust/Brushes), the full CC-style dialog set, and widgets
(Slider/CurvesEditor/ContextMenu/DropZone). 29 with rich preview cards;
SaveForWebDialog ships a floor card (its live <canvas> needs the editor).
Skipped (need a live canvas/pixels/state): Canvas, Workspace, RightSidebar,
ChannelsPanel, ReplaceColorDialog, ColorRangeDialog.
How:
- pixelforge.config.json (globalName PixelForge, out dir pf-bundle), a synth
entry that self-initializes react-i18next in English so t() renders real copy
with no provider, and cssEntry = the app's index + ImageEditor CSS chunks
(the .pf-* chrome lives in the editor route chunk).
- Previews use an html.dark frame so portaled dialogs render dark too.
- .d.ts ship as loose contracts (editor-shaped props) by design; usage lives in
each prompt.md + the PixelForge conventions header.
A 6-agent audit picked the sync set; a 7-agent fan-out authored + graded every
preview. Render check clean (30/30), all graded good. Shared .design-sync/
previews are name-disjoint from the base kit. lint, build, and 388 tests green.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012gT1Vn216uvrJRGC8DbvVZ
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Syncs the image editor's Photoshop-style web UI as a second, separate
Claude Design project —
PixelForge — Image Editor UI Kit— distinct from thebase shadcn/ui kit. Same repo, parallel config, no
src/app changes.Synced (30 components,
window.PixelForge)29 ship rich preview cards; SaveForWebDialog is a floor card (its live
<canvas>preview needs the running editor). Skipped (need a live canvas/pixels/state): Canvas, Workspace, RightSidebar, ChannelsPanel, ReplaceColorDialog, ColorRangeDialog.How
pixelforge.config.json(globalNamePixelForge, out dirpf-bundle); a synth entry that self-initializes react-i18next in English sot()renders real copy with no provider;cssEntry= the app'sindex+ImageEditorCSS chunks (the.pf-*chrome lives in the editor route chunk).html.darkframe so portaled dialogs render dark too..d.tsship as loose contracts (editor-shaped props) by design — usage lives in eachprompt.md+ the PixelForge conventions header.Process
A 6-agent audit selected the sync set (28 SYNC / 6 SKIP); a 7-agent fan-out authored + graded every preview. Render check clean (30/30), all graded good. Shared
.design-sync/previews/are name-disjoint from the base kit. lint, build, and 388 tests green.🤖 Generated with Claude Code