Instruction file imported from gearm123/ai_movie_studio_frontend (.cursor/rules/viewport-ui-split.mdc). Copyright stays with the author.

Viewport UI split

Name: viewport-ui-split
Author: gearm123

This app uses separate browser and phone UI trees (not one responsive page component).

Breakpoint: 760px (src/viewports/constants.ts)
Browser (>760px): edit *Browser.tsx / *Browser.css
Phone (≤760px): edit *Phone.tsx / *Phone.css
Entry routers: LandingPage.tsx, ProjectSetupPage.tsx, ProjectPanel.tsx, StudioLayout.tsx

Development focus

The owner primarily designs and reviews the browser UI. Phone UI should stay visually aligned but lives in separate files. When implementing landing/setup/beats changes:

Apply browser changes in *Browser.* when the owner is iterating on desktop.
Mirror hierarchy and branding on phone in *Phone.* (touch targets, full-width CTAs, safe areas).
Do not collapse browser/phone back into shared page CSS with @media for whole screens.

Full map and dev preview (?viewport=phone): read src/viewports/UI_CONTEXT.md.

{ "ocm": "1", "id": "gearm123-ai-movie-studio-frontend-viewport-ui-split-rule", "kind": "skill", "name": "viewport-ui-split", "description": "Browser vs phone UI split — edit separate Browser/Phone files; owner works on browser", "publisher": "gearm123", "version": "1.0.0", "capabilities": { "domains": [ "general" ], "tags": [ "skill-md", "github-cursor-rules" ], "languages": [ "en" ] }, "quality_prior": 0.6, "examples": [ "Browser vs phone UI split — edit separate Browser/Phone files; owner works on browser" ], "primary": false, "metadata": { "source": { "provider": "github-cursor-rules", "repository": "https://github.com/gearm123/ai_movie_studio_frontend", "path": ".cursor/rules/viewport-ui-split.mdc", "ref": "2cf3ab94aa0636bba1f9c4428cae44d0453cdbee", "url": "https://github.com/gearm123/ai_movie_studio_frontend/blob/2cf3ab94aa0636bba1f9c4428cae44d0453cdbee/.cursor/rules/viewport-ui-split.mdc", "key": "gearm123/ai_movie_studio_frontend/.cursor/rules/viewport-ui-split.mdc" }, "applies_to": [ "src/pages/**", "src/layouts/**", "src/viewports/**" ] }, "instructions": "# Viewport UI split\n\nThis app uses **separate browser and phone UI trees** (not one responsive page component).\n\n- Breakpoint: **760px** (`src/viewports/constants.ts`)\n- **Browser** (>760px): edit `*Browser.tsx` / `*Browser.css`\n- **Phone** (≤760px): edit `*Phone.tsx` / `*Phone.css`\n- Entry routers: `LandingPage.tsx`, `ProjectSetupPage.tsx`, `ProjectPanel.tsx`, `StudioLayout.tsx`\n\n## Development focus\n\nThe owner **primarily designs and reviews the browser UI**. Phone UI should stay visually aligned but lives in separate files. When implementing landing/setup/beats changes:\n\n1. Apply browser ch", "cost": { "context_tokens": 234 } }

viewport-ui-split

About

Viewport UI split

Development focus

Use it

Manifest

Reviews