|
| 1 | +--- |
| 2 | +name: implement-platform |
| 3 | +description: Implement or review Sim's new Platform UI from Paper in apps/sim/platform, including shared foundations, component promotion, responsive product compositions and fixture-only previews. Use on new work, migration, drift review or resumption; not for the legacy UI. |
| 4 | +--- |
| 5 | + |
| 6 | +# Implement Platform from Paper |
| 7 | + |
| 8 | +Read `apps/sim/platform/AGENTS.md` first. It is the canonical ownership and code contract. Follow `$sim-paper-design` for live Paper locations, design rules and continuity; use its references, not a remembered native ID. If the skill or live Paper is unavailable, verify what is possible locally and explicitly identify what remains unverified. Do not invent missing designs. |
| 9 | + |
| 10 | +1. **Scope the phase.** Foundations, recipes and evidence are Phase 1. Approved product screens and their unique parts are Phase 2. Route integration, persisted state and authorization belong to Phase 3. Keep UI-only requests isolated; do not advance phases just to make a demo look real. |
| 11 | +2. **Resolve the contract.** Inventory the live Shared and Platform libraries and the relevant Core/Chat/Workspaces product use. Compare the actual Base, usage and any theme counterpart. Read the applicable Dashboard/Issues/Changelog/Logs contract. Record key, current file/page/node, roles, named parts, states, approved parameters and ancestor use in a task-local checkpoint. Match slots by meaning. Do not treat the archived libraries, Marcus's work, canvas guides or a copied instance as alternative masters. |
| 12 | +3. **Choose one owner.** Search the existing component exports and catalog evidence. Reuse a master and a single code implementation. New reusable behavior needs an evidenced Paper Base before a code variant. Register in Shared if it could serve another system; otherwise use Platform with a reason. A page-only composition lives by its feature; its styling stays in the central `design-system/features/<feature>/` owner. Route-private modules only compose. On second use, promote it once and update both imports together. Fix an existing master centrally; propagate the corrected recipe to every affected use. Never create a variant just to fill a gallery. |
| 13 | +4. **Translate anatomy, not artboard coordinates.** Consult the installed Next docs in `node_modules/next/dist/docs` (especially project structure, CSS, Server/Client Components). Use semantic DOM, native or accessible behaviors, intrinsic size and responsive relationships. A 560px Paper modal is a preferred maximum, not a fixed width. The same modal should fit 647px and 390px viewports without new variants. Use centralized Tailwind roles, the type and material contracts, shared icon geometry and slots. Confirm the rendered DOM has the intended behavior. A searchable field accepts text, a disclosure opens by keyboard, a modal part composes directly, and a table renders the caller’s records. Repeated data takes an array, never a fixed list of numbered specimen props. Register a named native component for these cases. A new size requires a distinct, evidenced use; it isn't a device enum. Never pass styles through a composition. When editing generated files, change the source contract or compiler and regenerate the affected set. |
| 14 | +5. **Exercise the right states.** Build a matrix of actual themes, relevant content sizes, natural/focus/error/disabled states, keyboard navigation, long data, zoom and widths between Paper examples. The workbench is tooling, not a Phase 2 product screen. Entities, including organizations, workspaces, members and chats, come only through the server fixture gate. Render empty or absent data distinctly. Client interaction may open, dismiss or change steps; no authentication, persistence or network effects. |
| 15 | +6. **Prove it.** Run the structural audit against real code, regenerate/check relevant files, render the app in a real browser, and compare computed type/material/geometry and screenshots with live Paper. Exercise empty, full, stress and flag-off. Retire unused variants and resolve every affected use. Verify isolation and the repository gates. Report covered keys/states separately from visual comparisons; record unresolved differences and durable verification paths. Stop at the authorized phase. |
| 16 | + |
| 17 | +**Resume:** read the task checkpoint and refresh the specific live node(s) before edits. Merge current work; do not replay an old export. The skill and repo contract are standing policy, not the checkpoint. Keep root, Claude and Cursor directives as pointers to that one policy. |
| 18 | + |
| 19 | +**Examples:** “implement the workspace issue rows” starts from the Issues contract and registered row plus its actual Use, not a screenshot-derived card. “Add quiet to a button” requires an existing component or product use for that treatment. “Use the workspace item in chat too” is a promotion and import migration, not a second copy. “Preview an org with no workspaces” selects the empty fixture; it never creates a record. |
0 commit comments