.cursorrules.en

Need to create an SEO-optimized website/application with minimalism, deep flexibility, and thorough attention to all details:

[development start]
- develop testing tools for yourself (including smart layout testing, PageSpeed, etc.) and temporary logging (especially browser logs), including through browser at the beginning of development, so you regularly check the application's work during development

[application task]
- create an application for text pasting (large paste button-icon) and QR code generation
- focus on the simplest user flow: paste - QR code ready, download/share if needed
- when generating QR code, a prefix is used, but in most cases it's empty. This can be useful for pages with crypto or protocols. I.e. optional and empty by default parameter.
- QR code is generated on the frontend
- quick publishing option:
-- user can create a page with QR code when it's already generated, by clicking "Publish" and entering description in a form
-- fields: title, description, language (all optional, language defaults to English)
-- data is stored in JSON files (through abstract storage, so it can be easily replaced with another, like save and get)
-- alias: as is if in Latin and compatible, if not, then processed through some conversion function that works both ways, so text can be created from alias
-- user can skip filling fields and immediately share link, if no such file exists, QR code will be generated by alias
-- free and without authorization you can only create one page for one text once, editing is not possible yet
- QR code grain count - minimal, depending on text length
- mock function for sending metrics, so it can be refined later without changing its call, but already compatible with most metric services
- think through key business metrics
- multisite: site id (default "default"), its title and description in different languages (default English) are passed in environment variables or .env
- site id is used in site directory paths in storage and in generated page paths. I want to try generating multiple sites later, but for now one.

[technologies]
- NextJS
- TypeScript
- SSR
- Adaptive Mobile First
- PWA: convenience on Apple and Android, one-click installation
- Hosting on Netlify
- Content pages stored in MD (MDX?) files

[features]
- multilingual: interfaces and generated pages in languages: English, Spanish (LA), Chinese, French, main locale is set in environment variables, default en
- multiple pages doing the same thing, but containing different texts, for different search queries
- main functionality is a common component that displays after the header and displays on all pages
- code comments only in English, no Russian
- should be maximally flexible, minimum code, maximum possibilities
- one template page that is used for all pages and differs only in content and config from MDX file or JSON file (in case of user-published)

[SEO]
- Work out semantic core
- Identify popular queries including in unoccupied niches
- In accordance with semantic core, work out texts on pages (several dozen), paying special attention to headings and GENERATE CONTENT FILES IN MDX FORMAT (NOT PAGES!!!), where this doesn't require strong deviation from structure. All pages differ only in configs. Single template.
- texts should be lively, for example before writing you can think through author prompt. Principle of surprising and puzzling, so reader is interested to read to the end. Add lifehacks and best practices.
- maximally lightweight application with high PageSpeed

[common mistakes]
- when running script you might not wait for completion and hang forever. consider this



<elements>
    <fixed header>
    not transparent, but background color of dark or light theme
        <language switcher>
        only flag is displayed on button, language list is in dropdown
        </language switcher>
        <menu>
           work out backgrounds
           opening: sandwich or swipe right
            should close on click outside menu or swipe left
            not transparent, but background color of dark or light theme
        </menu>
    </fixed header>
    <fixed action bar>
        not transparent, but background color of dark or light theme
        buttons are contrasting: text color either black or white, background color slightly differs from background color
    </fixed action bar>
</elements>