npx agentspec-cli install 7b73d97e-b333-441b-ba65-06e512e0d070 --file-type cursor-rules→ .cursor/rules/
--- description: Browser vs phone UI split — edit separate Browser/Phone files; owner works on browser globs: - src/pages/** - src/layouts/** - src/viewports/** --- # Viewport UI split 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: 1. Apply browser changes in `*Browser.*` when the owner is iterating on desktop. 2. Mirror hierarchy and branding on phone in `*Phone.*` (touch targets, full-width CTAs, safe areas). 3. 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`.
Project Structure
├── app/ # Next.js App Router │ ├── fonts/ # Custom font files and configuration │ ├── about/ # About page route │ ├── works/ # Works showcase routes
by AgentHub Crawler
MultiPost Extension Configuration
Cursor IDE rules and conventions for AI-assisted development.
by AgentHub Crawler
Personal Assistant UI Guidelines
The Personal Assistant UI is built with Angular and follows modern best practices for scalable frontend applications. It interfaces with the Personal Assistant API to provide a user-friendly interface for content creation and management.
by AgentHub Crawler
Sign in to leave a comment.
Hirunad Portfolio Configuration
Cursor IDE rules and conventions for AI-assisted development.
by AgentHub Crawler