Рабочая библиотека продакшен-промптов для Lovable: выжимка из реальных сборок, реальных багов и реальной выручки. Скопируйте, вставьте в Lovable и наблюдайте, как появляется фича.
Библиотека промптов
Landing Pages
Premium SaaS Landing Page
Старт
Generate an Awwwards-grade landing for a B2B SaaS in one shot.
Build a premium, conversion-focused landing page for a B2B SaaS called {{PRODUCT}}.
Sections, in order:
1. Sticky transparent navbar with logo, 4 links (Product, Pricing, Customers, Blog) and a primary CTA.
2. Hero: large editorial headline (Playfair Display italic for the accent word), one-line subhead, primary + secondary CTA, trust strip with 5 fake company wordmarks.
3. Social proof: 3-up metric stat bar (e.g. "32% faster", "1,200+ teams", "4.9/5 G2").
4. Feature grid: 6 cards with lucide icons, short title, 1-line description.
5. Long-form value section: 3 alternating image/text rows ("zig-zag").
6. Testimonial carousel: 3 quotes with avatar + role.
7. Pricing: 3 tiers, middle tier highlighted, "most popular" ribbon.
8. FAQ accordion: 6 questions.
9. Footer with 4 columns.
Design rules:
- Light theme, off-white background (#FAFAF7), near-black text.
- Inter Display for headings, Inter for body, Playfair Display italic for accent words only.
- Subtle motion: fade-up on scroll, no parallax.
- All colors via semantic tokens in index.css, no hex inside components.
- Mobile-first responsive, generous whitespace.
→ Replace {{PRODUCT}}. Re-prompt afterwards: 'tighten typography and increase contrast in the pricing section.'
#landing#marketing#hero
Auth & Database
Supabase Auth + Role-Based Access
Средний
Bulletproof email auth with admin/user roles and RLS that won't break.
Enable Lovable Cloud and implement authentication.
Requirements:
- Email + password signup and login (no magic links).
- Add Google sign-in as a second option.
- Create a 'profiles' table with columns: user_id (FK to auth.users, cascade), display_name, avatar_url, created_at, updated_at.
- Create a separate 'user_roles' table with an app_role enum ('admin', 'user'), NEVER store roles on profiles.
- Implement a SECURITY DEFINER has_role(_user_id, _role) function and use it in all RLS policies.
- Auto-create a profile row via a trigger on auth.users insert.
- Add a /login page, /signup page, /reset-password page, and an /account page that shows the current user's profile.
- Persist session with onAuthStateChange BEFORE getSession (no race conditions).
- Protect /account with a redirect to /login if not authenticated.
Do not auto-confirm emails. Do not store the service role key on the client.
→ Pair with the migration tool. If users can't write to profiles, you forgot the INSERT policy.
#auth#supabase#rls#security
SaaS
Stripe Checkout via Edge Function
Продвинутый
Production-ready checkout without leaking secret keys to the client.
Add Stripe Checkout for a single subscription product.
1. Create an edge function 'create-checkout' that:
- Reads STRIPE_SECRET_KEY from secrets.
- Accepts a JSON body { price_id: string }.
- Validates input with zod.
- Looks up or creates a Stripe customer keyed by the authenticated user's email.
- Creates a Checkout Session in 'subscription' mode with success_url and cancel_url pointing back to the app origin.
- Returns { url }.
- Includes CORS headers on every response, including errors.
2. Create an edge function 'stripe-webhook' (verify_jwt = false in config.toml) that:
- Verifies the Stripe signature using STRIPE_WEBHOOK_SECRET.
- On 'checkout.session.completed' upserts a row in a 'subscribers' table (user_id, stripe_customer_id, status, current_period_end).
3. On the client, add a "Subscribe" button on /pricing that calls supabase.functions.invoke('create-checkout') and redirects to data.url in a new tab.
Never expose the Stripe secret key on the client. Never store webhook secrets in code.
#stripe#payments#edge function
Dashboards
Linear-Inspired Dashboard Shell
Средний
A dense, keyboard-driven dashboard layout that doesn't feel like a template.
Build a dashboard shell inspired by Linear.
Layout:
- Left rail (240px) with workspace switcher, primary nav (Inbox, My Issues, Active, Backlog, Projects), and a collapsed "Teams" section.
- Top bar with breadcrumb, global search (Cmd+K), and a circular avatar.
- Main canvas with a list view: dense rows (40px), each row shows priority dot, id badge, title, assignee avatars, status pill, date.
Interactions:
- Cmd+K opens a command palette built on shadcn/ui Command.
- Hover row shows a quick-action toolbar (assign, change status, snooze).
- Pressing 'c' anywhere opens a "Create issue" dialog.
Visual rules:
- Use neutral grays from semantic tokens, single accent color for primary actions.
- 13px base text, tabular numerals for ids and dates.
- No drop shadows except on the command palette.
#dashboard#ui#shadcn
AI Features
Streaming AI Chat with Lovable AI
Средний
Drop a real streaming chat into any app using the Lovable AI gateway.
Add an AI chat using the built-in Lovable AI gateway (no API key required from the user).
Backend (edge function 'chat'):
- Accepts { messages: { role, content }[] }.
- Calls https://ai.gateway.lovable.dev/v1/chat/completions with the LOVABLE_API_KEY secret.
- Uses model 'google/gemini-2.5-flash'.
- Streams the response back to the client using a ReadableStream and 'text/event-stream' headers.
- Include CORS headers on all responses.
Client (/chat page):
- Message list with role-styled bubbles (user right-aligned, assistant left-aligned).
- Input with Cmd+Enter to send.
- While streaming, append tokens to the last assistant message in real time.
- Show a "Stop" button that aborts the fetch.
Design: messages 15px, generous line-height, fade-in each new message.
#ai#chat#streaming
SEO
SEO Meta + JSON-LD for Every Page
Старт
Make Google love a Lovable site without installing a single SEO library.
Create a useSEO hook in src/lib/seo.ts that imperatively sets:
- document.title (under 60 chars)
- meta description (under 160 chars)
- canonical link
- og:title, og:description, og:image, og:url, og:type
- twitter:card=summary_large_image, twitter:title, twitter:description, twitter:image
- a single <script type="application/ld+json"> tag with the provided schema, replaced on each route
Then call useSEO on every page (Home, Blog index, each article, etc.) with route-specific values.
Also:
- Update public/sitemap.xml with all routes.
- Update public/robots.txt to allow all and reference the sitemap.
- Ensure exactly one <h1> per page and use semantic <article>, <section>, <nav> tags.
#seo#meta#schema
Bug Fixes
Fix Broken Mobile Layout in One Prompt
Старт
When a Lovable build looks great on desktop but breaks at 375px.
The site looks fine on desktop but breaks below 768px. Audit and fix every page so it is flawless on a 375x812 viewport.
Specifically:
- No horizontal scroll anywhere.
- Headings drop one size step on mobile (e.g. text-6xl md:text-7xl).
- Convert all multi-column grids to single column under md.
- Stack hero CTAs vertically and make them full width.
- Reduce hero vertical padding by ~30% on mobile.
- Ensure every section has px-6 minimum side padding.
- Open the navbar as a full-screen overlay on mobile, not a dropdown that pushes content.
After the fix, list each file you edited and the breakpoint changes you made.
#mobile#responsive#tailwind
Design System
Convert Hardcoded Colors to Design Tokens
Средний
Refactor a project where every component has bg-white and text-black scattered everywhere.
Refactor the entire project to use semantic design tokens.
1. In src/index.css, define a complete token set in :root and .dark:
--background, --foreground, --card, --card-foreground, --popover, --popover-foreground,
--primary, --primary-foreground, --secondary, --secondary-foreground,
--muted, --muted-foreground, --accent, --accent-foreground,
--destructive, --destructive-foreground, --border, --input, --ring,
plus a --gradient-primary and --shadow-elegant.
All values in HSL.
2. In tailwind.config.ts, map every token to a Tailwind color via hsl(var(--token)).
3. Sweep every component: replace bg-white -> bg-background, text-black -> text-foreground, text-gray-500 -> text-muted-foreground, etc.
4. Verify dark mode works by toggling .dark on <html>.
#design system#tailwind#tokens
Mobile
Make Any Lovable App Installable (PWA)
Средний
Ship an installable home-screen app without ejecting.
Convert this Lovable app into an installable PWA.
1. Add /public/manifest.webmanifest with name, short_name, start_url='/', display='standalone', background_color, theme_color, and 192/512 icons (generate placeholder icons in /public/icons/).
2. Link the manifest from index.html and add <meta name="theme-color">.
3. Add a minimal service worker at /public/sw.js that caches the app shell on install and serves cache-first for static assets, network-first for /api and edge function calls.
4. Register the SW from src/main.tsx after window load, only in production.
5. Add an iOS install hint (apple-touch-icon, apple-mobile-web-app-capable meta).
Test on a real mobile browser. The site must be fully usable offline for the cached shell.
#pwa#mobile#manifest
Landing Pages
Editorial Blog System (No MDX)
Продвинутый
Magazine-quality blog using plain TS data, no MDX required.
Build an editorial blog system.
Data: a TS file src/data/blog.ts exporting an Article[] where each article has slug, title, deck, hero image, date, readTime, tags, author, and a body: Block[] union (paragraph, h2, h3, quote, pullquote, ul, ol, callout, table, cta, faq).
Pages:
- /blog index: featured hero article, category filter chips, search input, responsive 3-col card grid.
- /blog/:slug: ArticleLayout component renders Block[] into typographically perfect long-form. Includes:
- Sticky table of contents on desktop (right rail).
- Reading progress bar at the top.
- Drop cap on the first paragraph.
- Pull-quote style for { type: 'pullquote' }.
- FAQ accordion using shadcn/ui Accordion.
- JSON-LD Article + FAQPage + BreadcrumbList schema.
Typography: Playfair Display for h1/h2 (medium weight, italic accents), Inter for body, 19px base, 1.7 line-height, max-width 68ch. Plenty of whitespace.
#blog#editorial#content
SaaS
Waitlist + Welcome Email
Старт
Capture early signups and send a real welcome email.
Build a waitlist.
1. Migration: create a 'waitlist' table (email unique, referrer text, created_at). Enable RLS, allow public INSERT only.
2. Landing form: single email input, validates with zod, optimistic UI, success state replaces the form with "You're in. Check your inbox."
3. Edge function 'send-welcome' triggered after insert: uses Resend (RESEND_API_KEY secret) to send a plain-text welcome email signed by the founder.
4. Track UTM source in the referrer column.
5. Admin route /admin/waitlist (protected) that lists all signups with a CSV export button.
#waitlist#email#resend
Bug Fixes
Reproducible Bug Report Template
Старт
Stop the 'it's still broken' loop. Give Lovable everything it needs.
When reporting a bug, paste this template:
**What I did:** <exact click path, including which page>
**What I expected:** <one sentence>
**What actually happened:** <one sentence, plus screenshot or recording>
**Console errors:** <paste the red errors from devtools, full stack>
**Network failures:** <which request, status code, response body>
**Last change that worked:** <git/version reference if known>
**Affected files (your guess):** <optional>
Then ask Lovable: "Diagnose first, do not edit code. Tell me which file and line is responsible and what the minimal fix is. Then wait for me to approve before patching."
→ This pattern alone fixes ~70% of debugging loops.
#debugging#workflow
Content & Writing
Long-Form Article First Draft
Старт
Turn a topic and a few bullet points into a publishable 800-word draft.
Write a {{WORD_COUNT}}-word first draft of an article titled "{{TITLE}}" for {{AUDIENCE}}.
Structure:
- Hook (specific scenario, not a question, not "In today's world").
- Context: why this matters right now.
- Body: cover these points in order: {{POINT_1}}, {{POINT_2}}, {{POINT_3}}.
- Direct closing with one actionable next step.
Rules:
- Subheadings every 150-200 words.
- Paragraphs under 4 sentences.
- No em-dashes, no emoji, no AI filler phrases ("dive into", "in the realm of", "unleash").
- One concrete example or number per main point.
- Tone: {{TONE}} (e.g. confident, plain-spoken, no hedging).
→ Re-prompt: 'Cut 20% of the words. Keep the strongest example in each section.'
#blog#writing#draft
Content & Writing
Rewrite Any Draft for Clarity
Старт
Take a messy draft and tighten it without losing your voice.
Here is my draft: {{PASTE_DRAFT}}
Rewrite it for clarity and rhythm. Keep my ideas and my voice. Do not change the meaning.
Specifically:
- Cut redundant transitions and filler.
- Vary sentence length: short, medium, short.
- Replace passive voice with active where it helps.
- Remove any em-dashes, semicolons used as drama, and AI cliches.
- Keep paragraphs under 4 sentences.
Return the rewritten version only. No commentary.
#editing#rewriting
Content & Writing
Explain a Technical Concept Simply
Старт
Turn a complex feature or concept into copy a non-technical buyer can grasp.
Explain {{CONCEPT}} to someone who has no background in the subject.
Constraints:
- Use one core analogy and stick to it the whole way through.
- No jargon. If you must use a term, define it in the same sentence.
- 250 words maximum.
- End with one sentence that connects the concept to a real outcome the reader cares about ({{READER_OUTCOME}}).
#explainer#education
Marketing Copy
Landing Page Body Copy That Converts
Средний
Generate hero, sub-hero, features and CTA copy aligned to a single pain point.
Write the body copy for a landing page selling {{PRODUCT}}.
Visitor: {{VISITOR_DESCRIPTION}}.
Main pain point: {{PAIN_POINT}}.
Primary CTA: {{CTA_TEXT}}.
Deliver, in this exact order:
1. Hero headline (under 9 words, names the outcome, not the feature).
2. Sub-headline (one sentence, 15-20 words, names the pain it removes).
3. Three feature blocks. Each: 3-word label, one-sentence benefit, one-sentence proof.
4. One social-proof line (format: "{{N}} {{ROLE}} already use {{PRODUCT}} to {{OUTCOME}}").
5. Final CTA block: 6-word reassurance + button label.
No adjectives like "powerful", "seamless", "revolutionary". No em-dashes.
#landing#copywriting#conversion
Marketing Copy
Outcome-First Product Description
Старт
Replace feature-dump descriptions with copy that sells the result.
Write a 300-word product description for {{PRODUCT_NAME}}.
The product does: {{FUNCTION}}.
The buyer is: {{BUYER}}.
The buyer cares about: {{BUYER_OUTCOMES}}.
Rules:
- Lead with the outcome, not the feature.
- One paragraph of story (how the buyer's day changes), one paragraph of specifics (what's inside), one paragraph of reassurance (warranty / guarantee / who it's not for).
- No marketing cliches. No exclamation marks.
#copy#ecommerce#product
Marketing Copy
Cold Outreach Email That Gets Replies
Средний
Founder-to-founder outreach for partnerships, feedback, or early customers.
Write a cold email from me ({{MY_ROLE}} at {{MY_COMPANY}}) to {{TARGET_PERSON}} at {{TARGET_COMPANY}}.
Goal: {{GOAL}} (e.g. 15-min call, beta signup, link exchange).
Structure (max 90 words total):
- Subject line under 6 words, lowercase, specific.
- One opening sentence that proves I actually looked at their work ({{SPECIFIC_DETAIL}}).
- One sentence about why I'm writing.
- One sentence about what's in it for them.
- One soft ask, with two clear next steps.
No "I hope this finds you well". No "Just circling back". No emoji.
#email#outreach#sales
Marketing Copy
Three Value-Prop One-Liners (A/B/C)
Старт
Quickly test three angles for the same product to pick the strongest.
Write three value-proposition one-liners for {{PRODUCT}}, each under 12 words.
Each version uses a different angle:
A. Outcome-led ("Get X without Y").
B. Speed-led ("Ship X in one weekend").
C. Identity-led ("For {{ROLE}} who {{BELIEF}}").
For each, add one sentence explaining which audience it resonates with most and why.
#positioning#copy
Social Media
Twitter / X Thread From an Article
Старт
Recycle a published article into a 7-tweet thread with a clear hook.
Turn this article into a 7-tweet X thread: {{PASTE_ARTICLE_OR_URL}}
Rules:
- Tweet 1 is a hook with one specific number or claim. No question marks. No "let me tell you".
- Tweets 2-6 each carry one idea. Under 240 characters. One line break between thoughts.
- Tweet 7 is a soft CTA pointing back to the full article.
- No hashtags. No emoji except a single optional arrow in the CTA.
- Voice: direct, builder, first-person.
#twitter#thread#distribution
Social Media
LinkedIn Post Builder (Founder Voice)
Старт
A repeatable template for high-signal LinkedIn posts about shipping with Lovable.
Write a LinkedIn post in my voice as a {{ROLE}} who just {{ACHIEVEMENT}}.
Structure (max 180 words):
- Line 1: a contrarian or counter-intuitive sentence that earns the click.
- Blank line.
- 4-6 short paragraphs (1-2 sentences each). Tell the actual story: what I tried, what broke, what I learned.
- One concrete number.
- Final line: a question that invites a comment, no "thoughts?".
No emoji. No hashtags. No "Excited to share".
#linkedin#personal brand
Social Media
60-Second Short / Reel Script
Старт
Hook-driven short-form script you can record without editing 10 times.
Write a 60-second vertical video script about {{TOPIC}} for an audience of {{AUDIENCE}}.
Format:
- 0-3s HOOK: one sentence that promises a specific payoff. No "in this video".
- 3-15s SETUP: the problem, in plain words, with one number or example.
- 15-45s PAYOFF: the solution as 3 numbered steps. Each step is one short on-screen sentence.
- 45-60s CTA: one sentence telling the viewer the single next action.
Output as: timestamp | on-camera line | on-screen text overlay.
#video#shorts#tiktok
Productivity
Weekly Plan for Solo Builders
Старт
Turn a messy list of goals into a realistic, shippable week.
Here are my goals and open threads for next week: {{PASTE_DUMP}}
Give me a one-page weekly plan.
Output:
- One "north-star outcome" for the week, phrased as something a user can see or feel.
- Three priorities, in order, each tied to that outcome.
- A day-by-day Monday-Friday breakdown. Each day has at most 2 deep-work blocks and 1 admin block.
- A "do not do this week" list of 3-5 items to actively cut.
- One reflection question for Friday evening.
Be ruthless. If something doesn't serve the north star, move it off the week.
#planning#focus
Productivity
Meeting Notes → Action Items
Старт
Convert raw notes into a clean summary and owned next steps.
Here are my raw meeting notes: {{PASTE_NOTES}}
Return:
1. A 5-bullet summary of decisions made.
2. An action-items table with columns: Action | Owner | Due date | Definition of done.
3. A list of open questions that still need answers and who should answer them.
4. A 4-sentence recap I can paste into Slack.
Do not invent owners or dates. If unclear, mark as "TBD" and flag it in the open questions list.
#meetings#notes
Productivity
One-Page Decision Doc
Средний
Stop spinning on a choice, force the decision into one structured page.
Help me make this decision: {{DECISION}}
Context: {{CONTEXT}}
Constraints: {{CONSTRAINTS}}
What "good" looks like in 90 days: {{SUCCESS_CRITERIA}}
Produce a one-page decision doc with:
- The decision restated in one sentence.
- 3 realistic options. For each: what it is, what it costs (time / money / focus), what it gives up.
- A scoring table against the success criteria (1-5 per criterion).
- Your recommendation and the single biggest risk of that recommendation.
- The reversibility check: is this a two-way door or a one-way door?
#decisions#strategy
Research & Strategy
Competitor Teardown in 10 Minutes
Средний
Get a structured read on a competitor before you spend a sprint copying them.
Do a structured teardown of {{COMPETITOR_URL}} for someone building {{MY_PRODUCT}} aimed at {{MY_AUDIENCE}}.
Sections:
1. Positioning: the one sentence they would write about themselves vs. the one sentence their users would write.
2. Pricing model and what it signals about who they really sell to.
3. The 3 things they do better than anyone else.
4. The 3 things they're clearly weak at (be specific, not generic).
5. Where I can credibly out-position them in one sentence.
6. One thing I should NOT copy from them and why.
#competitive#research#positioning
Research & Strategy
Sharp Ideal Customer Profile (ICP)
Средний
Replace vague personas with a precise ICP you can actually market to.
Build a sharp ICP for {{PRODUCT}}.
Inputs:
- What it does: {{WHAT}}
- Best 3 current users (role + company size + use case): {{TOP_USERS}}
- What those users were using before: {{PREVIOUS_TOOL}}
Output:
1. ICP in one sentence: "{{ROLE}} at {{COMPANY_TYPE}} who {{TRIGGER}} and currently {{WORKAROUND}}."
2. The "tell-tale signal" that someone is in the ICP (a job title, a tool in their stack, a specific pain in their week).
3. 3 places this person already hangs out online.
4. 3 phrases they use to describe their pain in their own words (not marketing language).
5. The one objection they will raise first, and the honest answer.
#icp#audience#positioning
Research & Strategy
Pricing Experiment Plan
Продвинутый
Design a defensible pricing test instead of guessing tiers.
I want to test pricing for {{PRODUCT}}. Current pricing: {{CURRENT_PRICING}}. Costs per user: {{COSTS}}. Goal: {{GOAL}} (e.g. raise ARPU 25%, reduce churn, qualify enterprise).
Give me a 30-day pricing experiment plan:
1. The single hypothesis being tested, written as "If we change X, then Y will happen because Z".
2. Two pricing variants (current vs. proposed), with clear value-metric and tier structure.
3. The metrics that decide the test (primary + 2 guardrails).
4. Sample size or time needed to call the result.
5. The rollback plan if the variant loses.
6. How to communicate the change to existing users without breaking trust.
#pricing#monetization#experiments
Landing Pages
Editorial Magazine-Style Landing
Средний
Awwwards-grade editorial homepage with a strong typographic point of view.
Build a homepage for {{BRAND}} that feels like a luxury print magazine, not a SaaS template.
Layout:
- Full-bleed hero with one giant Playfair Display headline (italic on the verb), a 14px Inter uppercase eyebrow above it, and a 16px lede below.
- An off-grid asymmetric feature row: 60/40 split, image on the long side, text in a narrow column.
- "From the editors" 3-card grid with hairline borders and large cap-height numbers.
- Quiet CTA strip: cream background, single sentence, single text link with an arrow.
- Footer in two rows: sitemap on top, fine print on the bottom.
Rules:
- Off-white (#FAFAF7) background, near-black (#111) text, ONE accent color (deep purple hsl 258 60% 50%).
- All colors as semantic tokens in index.css. No hex inside components.
- Inter Display + Playfair Display italic for accents only. No other fonts.
- No gradients, no glassmorphism, no emoji.
→ Follow-up: 'reduce visual noise, make the hero quieter, increase the headline size by 20%.'
#editorial#magazine#typography
Landing Pages
AI Product Launch Page
Старт
Launch page for an AI-powered tool with a working demo embed slot.
Create a launch landing for {{PRODUCT}}, an AI tool that {{ONE_LINE_VALUE}}.
Sections:
1. Hero: headline, 1-line subhead, primary CTA "Try it free", secondary "Watch 60s demo".
2. Live demo block: a card with a textarea, a "Generate" button, and a sample output area. Wire the button to call lovable-ai with model 'google/gemini-2.5-flash' and stream the result into the output area.
3. "What it replaces" comparison row: 3 columns (Before, With {{PRODUCT}}, Time saved).
4. 6-feature bento grid (asymmetric tile sizes).
5. Use cases tabs: 4 personas, each with a short scenario.
6. FAQ + CTA.
Tech:
- Use Lovable Cloud for any backend.
- Stream AI responses, do not block the UI.
- All semantic color tokens, dark mode aware.
→ Replace {{PRODUCT}} and {{ONE_LINE_VALUE}}. Then iterate on the demo block UX.
#ai#launch#hero
Landing Pages
Boutique Agency Portfolio
Средний
High-end agency site that signals craft without being precious.
Design a homepage for a 4-person design studio called {{AGENCY}}.
- Single-column, long-scroll layout. No nav links except a logo and a "Start a project" button.
- Hero: 2 lines of large serif text + a tiny "Currently booking Q2 2027" tag.
- Selected work: 3 case studies as large image cards with a project name, role, year. Hovering tilts the image 1deg, no more.
- Capabilities: short list in 2 columns, no icons.
- "How we work" 4-step strip with hairline numbers.
- Quiet contact block with a real email address, not a form.
Constraints:
- Cream background, black text, single muted accent.
- Inter for everything except case-study titles which use Fraunces.
- No stock photography placeholders. Use solid color blocks labeled "case study image".
#agency#portfolio#case-study
Landing Pages
Standalone Pricing Page
Старт
Drop-in pricing page that actually converts.
Build a /pricing page for {{PRODUCT}}.
- 3 tiers (Starter, Pro, Scale). Middle tier highlighted with a hairline border and a "Most popular" badge.
- Each tier: price (annual default, monthly toggle), 1-line audience, primary CTA, 6-bullet feature list with check icons.
- Below tiers: feature comparison table, 5 categories, 12 rows total.
- Money-back guarantee strip + 3-question FAQ specifically about billing.
- Sticky "Talk to sales" link in the corner for enterprise.
Rules:
- Annual/monthly toggle stored in URL search param.
- No fake urgency, no fake discounts.
- Use semantic tokens, no hardcoded colors.
#pricing#conversion
Landing Pages
Changelog-Style Product Page
Средний
Public changelog that doubles as a marketing surface.
Create a /changelog route for {{PRODUCT}}.
- Hero: "What's new" + RSS link + filter by tag (Feature, Fix, Performance).
- Each entry: date on the left rail, version chip, 2-sentence summary, optional image, bullet list of changes.
- Most recent entry expanded by default, older ones collapsed.
- "Subscribe to updates" inline email form using Lovable Cloud.
- Pagination: 10 per page, server-side via Supabase.
Data:
- Create a public 'changelog_entries' table with proper GRANTs and an RLS policy allowing public SELECT on published rows only.
- Seed with 6 example entries.
#changelog#product#updates
Landing Pages
Indie Hacker Personal Site
Старт
One-page personal site for an indie founder.
Build a one-page personal site for {{NAME}}, an indie founder shipping small SaaS.
Sections in order:
1. Tiny header: name + "now" link.
2. 3-sentence intro in large serif.
3. "Currently building": 2 product cards with logo, name, MRR (optional), short description.
4. "Shipped": list of past projects with year and status (sold, sunset, live).
5. "Writing", 5 most recent essays.
6. Footer with email + X + GitHub.
Rules:
- No hero image. No social proof. No CTA except "Email me".
- Off-white, serif headings, no animations beyond fade-up.
#personal#portfolio#indie
Landing Pages
Online Course Sales Page
Средний
Long-form sales page for a paid online course.
Write a sales page for {{COURSE}}, a paid online course teaching {{TOPIC}}.
Required sections:
1. Hero with the promise (specific outcome + timeframe), price, and "Enroll" CTA.
2. "Is this for you?", 4 reader profiles in a 2x2 grid.
3. Curriculum: 6 modules, each as an accordion with 4-6 lessons.
4. Instructor bio with credibility signals (specific numbers, not adjectives).
5. 3 student testimonials with full names, roles, photos.
6. Pricing card with 2 options (one-time vs payment plan).
7. 8-question FAQ focused on objections (refunds, time commitment, prerequisites).
8. Final CTA with money-back guarantee.
Tone: confident but specific. Replace every adjective with a number wherever possible.
#course#education#sales
Landing Pages
Comparison Page (vs Competitor)
Средний
SEO-optimized comparison page that ranks for '{{us}} vs {{them}}'.
Build a /vs/{{competitor}} page comparing {{US}} to {{COMPETITOR}}.
Sections:
1. H1: "{{US}} vs {{COMPETITOR}}: Honest Comparison ({{YEAR}})".
2. 2-sentence summary + a tldr verdict card.
3. Side-by-side feature table, 12 rows. Use checks, dashes, and partial-circles, not just yes/no.
4. "When to pick {{US}}", 4 bullets. "When to pick {{COMPETITOR}}", 4 bullets (be genuinely fair).
5. Pricing comparison.
6. Migration guide section.
7. FAQ with 6 questions including "Is this comparison biased?".
8. Closing CTA.
SEO:
- Meta title under 60 chars, description under 158.
- JSON-LD with @type ComparisonTable schema fallback to FAQPage.
- hreflang for EN/RU.
#comparison#seo#competitor
Landing Pages
Memorable 404 + Empty States
Старт
Replace generic empty screens with something on-brand.
Design and implement:
1. A /404 page with a giant serif "404" set in Playfair italic, a one-line apology, and 3 helpful links.
2. Empty state for an empty list: an SVG illustration slot, a one-line explanation of what should be here, and a primary "Add the first one" CTA.
3. Empty state for a failed search: shows the query, suggests 3 reformulations.
4. Empty state for a loading skeleton: shimmer effect, not a spinner.
Rules:
- All copy in EN and RU via the i18n system.
- Semantic tokens only.
#404#empty-state#polish
Landing Pages
Newsletter Landing Page
Старт
Single-purpose page to grow a newsletter list.
Build a /subscribe page for {{NEWSLETTER}}.
- Hero: name of the newsletter, frequency, what subscribers actually get (be specific: "1 essay per Sunday, no roundups, no sponsor blasts").
- Email input + "Subscribe" button using Lovable Cloud (insert into 'subscribers' table with proper RLS).
- "Recent issues", 5 most recent issue titles + dates + 1-sentence preview.
- 3 short subscriber quotes.
- Privacy line: "One-click unsubscribe. Never sold. Never shared."
Backend:
- Create 'subscribers' table (email, source, created_at, unsubscribed_at).
- RLS: public INSERT allowed, no SELECT for anon.
- GRANT INSERT to anon, ALL to service_role.
#newsletter#email#subscribe
SaaS
Multi-Tenant Workspaces
Продвинутый
Add team workspaces with invite-by-email and per-workspace data isolation.
Add multi-tenant workspaces to the app using Lovable Cloud.
Schema:
- 'workspaces' (id, name, slug unique, owner_id, created_at).
- 'workspace_members' (workspace_id, user_id, role enum 'owner'|'admin'|'member', invited_by, joined_at).
- All tenant-scoped tables get a workspace_id FK.
RLS:
- A SECURITY DEFINER function is_workspace_member(_workspace_id, _user_id) and has_workspace_role(_workspace_id, _user_id, _role).
- All tenant tables: policies use is_workspace_member to gate SELECT, and has_workspace_role('admin') for write.
UI:
- Workspace switcher in the sidebar.
- /settings/workspace/members page with invite by email (send via edge function), pending invites list, role change, remove member.
- Slug-based routing: /w/{slug}/...
Grants:
- GRANT all needed perms on every new table to authenticated and service_role.
#multi-tenant#workspaces#rls
SaaS
Stripe Subscription Billing
Продвинутый
Full Stripe subscription flow with webhooks, customer portal, and plan gating.
Implement Stripe subscriptions end-to-end.
Edge functions:
- POST /create-checkout: takes priceId, returns Stripe Checkout URL. Uses STRIPE_SECRET_KEY. CORS enabled. JWT-verified.
- POST /create-portal-session: returns Stripe Billing Portal URL for the current user.
- POST /stripe-webhook: PUBLIC (verify_jwt = false), validates signature, handles customer.subscription.created/updated/deleted and invoice.payment_failed.
DB:
- 'subscribers' table: user_id, email, stripe_customer_id, subscribed bool, subscription_tier text, subscription_end timestamptz.
- RLS: user can SELECT only their own row; edge functions use service role.
UI:
- /pricing with 3 tiers + working checkout buttons.
- /account/billing with current plan, "Manage billing" button, cancel notice.
- Plan-gated feature example: a component that checks subscription_tier and shows an upsell if locked.
Never store the service role key on the client.
#stripe#billing#subscriptions
SaaS
Usage-Based Metering & Limits
Продвинутый
Track per-user usage of an expensive action and enforce a monthly quota.
Add usage metering for the {{ACTION}} action.
Schema:
- 'usage_events' (id, user_id, action text, quantity int, metadata jsonb, created_at).
- 'usage_quotas' (user_id, action, period text default 'month', limit int, reset_at).
Logic:
- A SECURITY DEFINER function check_and_increment_usage(_user_id, _action, _qty) that:
- Returns false if the user is over quota for the current period.
- Otherwise inserts a usage_events row and returns true.
- All calls to the metered action must go through an edge function that calls this RPC first.
UI:
- /account/usage shows a progress bar (used / limit), the next reset date, and an upgrade CTA at 80%.
- Inline limit toast when the action is blocked.
Quotas seed: Starter 50/mo, Pro 1000/mo, Scale unlimited (-1).
#metering#usage#limits
SaaS
Referral Program with Tracking
Средний
Give each user a referral link, track conversions, reward both sides.
Implement a referral program.
Schema:
- Add 'referral_code' (text unique, default a random 8-char string) to profiles.
- Add 'referred_by' (uuid FK to profiles) to profiles.
- 'referral_rewards' (id, referrer_id, referred_user_id, status enum 'pending'|'credited', credited_at).
Flow:
- /r/{code} route: sets referral_code in localStorage, redirects to /signup.
- On signup, read the cookie/localStorage and set referred_by on the new profile.
- When the referred user reaches the qualifying event ({{QUALIFYING_EVENT}}), credit both sides (10 credits each) and mark the reward credited.
UI:
- /account/referrals: shows the user's link, copy button, stats (clicks, signups, credited), list of referred users (anonymized).
RLS: a user can only read their own referral rewards.
#referral#growth#viral
SaaS
In-App Feedback Widget
Старт
Floating button that lets users send feedback with a screenshot.
Add a floating feedback widget.
- Bottom-right floating button (icon: MessageCircle). Opens a popover with: type (Bug / Idea / Praise), message textarea, optional email, "Include screenshot" toggle.
- Screenshot via html2canvas of the current viewport, uploaded to a 'feedback-screenshots' Lovable Cloud storage bucket.
- Submits to a 'feedback' table (user_id nullable, type, message, screenshot_url, page_url, user_agent, created_at).
Rules:
- RLS: anyone can INSERT (including anon). Only admins can SELECT (use has_role).
- After submit: toast "Thanks, we read every one" and reset the form.
- Keyboard shortcut: Cmd/Ctrl + Shift + F to open.
#feedback#widget
SaaS
Team Invites via Email
Средний
Invite teammates by email with secure token-based acceptance.
Build a team invite flow.
Schema:
- 'invites' (id, workspace_id, email, role, token uuid, invited_by, expires_at, accepted_at nullable).
Edge function 'send-invite':
- Inserts the invite row, generates a token, sends an email with link /invite/{token}.
- Uses Resend (or the configured email provider). JWT-verified.
UI:
- /settings/members "Invite teammate" form (email + role).
- /invite/{token} page: validates the token (not expired, not accepted), shows "Accept invite to {{workspace}}" with a confirm button.
- On accept: insert workspace_members row, mark invite accepted, redirect to the workspace.
If the invited email matches an existing account, accepting just adds membership. If not, redirect to signup first and continue after.
#invites#team#email
SaaS
Audit Log
Средний
Immutable activity log for compliance and debugging.
Add an audit log.
Schema:
- 'audit_logs' (id, workspace_id, actor_id, action text, target_type text, target_id text, metadata jsonb, ip text, user_agent text, created_at).
- RLS: SELECT for workspace admins only. No UPDATE, no DELETE policies (immutable).
API:
- A log_event() helper called from edge functions on every state-changing action.
- Capture IP and user-agent server-side.
UI:
- /settings/audit-log: filterable table (actor, action type, date range), CSV export, expandable row showing the full metadata JSON.
Do not store passwords, tokens, or PII in metadata.
#audit#logs#compliance
SaaS
User API Keys
Продвинутый
Let users generate API keys to call your endpoints programmatically.
Implement user-generated API keys.
Schema:
- 'api_keys' (id, user_id, name, key_prefix text, key_hash text, last_used_at, created_at, revoked_at nullable).
- Store only a SHA-256 hash of the key. Show the full key exactly once on creation.
Edge function 'verify-api-key':
- Reads Authorization: Bearer header, hashes it, looks up the row, returns the user_id or 401.
UI:
- /account/api-keys: list (name, prefix, last used, revoke button).
- Create modal: ask for a name, generate a key like 'lv_live_<32 random chars>', show it in a copy-once box with a clear warning.
RLS: user can SELECT and INSERT and UPDATE (revoke) only their own keys.
#api#keys#developer
SaaS
Scheduled Background Jobs
Продвинутый
Recurring jobs (daily reports, cleanup) using pg_cron + edge functions.
Set up a scheduled jobs system.
- Enable pg_cron and pg_net in the database.
- Create a cron job that calls an edge function 'run-daily-jobs' every day at 03:00 UTC via net.http_post.
- The function reads a 'scheduled_jobs' table (id, name, kind, payload jsonb, run_at, status, attempts, last_error) and processes 'pending' rows with run_at <= now.
- Use a row-level lock (SELECT ... FOR UPDATE SKIP LOCKED) so multiple invocations don't double-process.
Add 3 example job kinds:
1. 'cleanup_old_logs', delete audit_logs older than 90 days.
2. 'send_weekly_digest': query subscribers, queue email per user.
3. 'expire_invites', mark unaccepted invites expired.
Admin UI: /admin/jobs shows recent runs with status and errors.
#cron#jobs#background
SaaS
Feature Flags
Средний
Turn features on per-user without redeploying.
Add a feature-flag system.
Schema:
- 'feature_flags' (key text primary key, enabled bool, rollout_percent int default 0, description, updated_at).
- 'feature_flag_overrides' (flag_key, user_id, enabled, primary key (flag_key, user_id)).
Client:
- useFeatureFlag(key) hook: reads flags once on app load, caches in React Query.
- Resolution order: override > rollout_percent (deterministic hash of user_id) > enabled.
UI:
- /admin/flags: list, toggle, edit rollout %, per-user overrides.
- Only users with the 'admin' role can mutate (use has_role in RLS).
Anyone can SELECT flags. Only admins can INSERT/UPDATE/DELETE.
#feature-flags#rollout
Dashboards
KPI Dashboard Shell
Старт
Clean dashboard shell with sidebar, topbar, and 4 KPI tiles.
Build a /dashboard route.
Layout:
- Left sidebar (collapsible on md-): logo, primary nav (Home, Reports, Customers, Settings), user menu at the bottom.
- Topbar: page title, search command (Cmd+K), notifications bell, profile avatar.
- Main area: 4 KPI tiles in a responsive grid (1/2/4 cols), each with label, big number, delta vs previous period (green/red), tiny sparkline.
- Below: 2-column area for a line chart (revenue) and a table (latest signups).
Rules:
- Use recharts for charts, lucide-react for icons.
- All numbers wired to placeholder data, structured so swapping in real queries is one prop change.
- Skeleton states for every async block.
#dashboard#kpi#metrics
Dashboards
Power Data Table
Средний
Sortable, filterable, paginated table with row selection and bulk actions.
Implement a data table for the 'customers' resource using @tanstack/react-table.
Features:
- Columns: avatar+name, email, plan, MRR, signed up, status, actions.
- Sortable headers, multi-sort with shift-click.
- Per-column filters (text, select, date range).
- Global search.
- Server-side pagination, page size 25/50/100.
- Row selection with checkbox column.
- Bulk actions toolbar (appears when rows are selected): Export CSV, Tag, Delete.
- Column visibility toggle in a dropdown.
- Persist sort + filters + page size in URL search params.
Empty state and loading skeleton included.
#table#tanstack#filters
Dashboards
Analytics Charts Page
Средний
A polished /analytics page with a date range picker and 6 charts.
Build /analytics.
- Date range picker (Last 7d, 30d, 90d, custom) at the top, persisted in URL.
- 6 charts using recharts:
1. Line: MRR over time.
2. Stacked area: signups by source.
3. Bar: revenue by plan.
4. Funnel: visitor -> signup -> activated -> paid.
5. Heatmap: events by hour of day x day of week.
6. Pie: feature adoption.
- Each chart in a Card with a title, optional info tooltip, "Export PNG" menu.
- Loading skeleton per chart (do not block the whole page).
- All colors via CSS tokens, dark mode aware.
#charts#analytics#recharts
Dashboards
Admin User Impersonation
Продвинутый
Let admins safely view the app as another user for support.
Add a controlled impersonation feature for admins.
- /admin/users table with an "Impersonate" action (only visible if has_role(current_user, 'admin')).
- Server side: an edge function 'impersonate' that, after checking the caller is an admin, mints a short-lived (15 min) JWT for the target user using the service role key and returns it.
- Client stores the original session, swaps to the impersonation session, shows a sticky red banner: "Impersonating {{email}}, Stop".
- "Stop" restores the original session.
Audit: every impersonation start/stop logged to audit_logs with actor, target, ip, ua.
#admin#impersonation#support
Dashboards
Settings Page Pattern
Старт
Consistent /settings layout with sub-pages and dirty-state save bar.
Implement /settings.
- Left sub-nav: Profile, Account, Notifications, Billing, API Keys, Team, Danger zone.
- Each section is a separate route under /settings/*.
- Forms use react-hook-form + zod.
- Bottom-fixed save bar appears only when the form is dirty: "You have unsaved changes" + Discard + Save.
- Optimistic update with toast on success, revert on error.
- "Danger zone" page has destructive actions (delete account, leave workspace) gated by typed confirmation.
All copy bilingual via i18n.
#settings#forms#pattern
Dashboards
Cmd+K Command Palette
Средний
Linear-style command palette for navigation and quick actions.
Add a Cmd/Ctrl+K command palette using shadcn's Command component.
Sections:
- Recent (last 5 visited pages).
- Navigation (all main routes).
- Actions (Create new project, Invite teammate, Toggle theme, Sign out).
- Help (Docs, Keyboard shortcuts, Contact support).
- Search results from the API as the user types (debounced 200ms).
Behavior:
- Opens with Cmd/Ctrl+K from anywhere.
- Arrow keys navigate, Enter selects, Esc closes.
- Highlight matched substring in results.
- Empty state: "No results. Try a different keyword."
#cmdk#search#ux
Dashboards
Notifications Center
Средний
In-app notifications with unread count and realtime updates.
Build an in-app notification system.
Schema:
- 'notifications' (id, user_id, kind text, title, body, link, read_at nullable, created_at).
- RLS: user reads only their own, marks own read.
UI:
- Bell icon in topbar with unread badge.
- Popover: tabs All / Unread, list items with icon by kind, time-ago, click to navigate to link and mark read.
- "Mark all read" action.
- /notifications full page for the full history.
Realtime:
- Subscribe to inserts on notifications filtered by user_id; new ones animate in and play a quiet sound (if permission).
#notifications#realtime
Dashboards
CSV Import / Export
Средний
Let users bulk-import a resource from a CSV with validation.
Add CSV import and export for the {{RESOURCE}} table.
Export:
- "Export CSV" button on the list view. Generates the CSV client-side from the current filter set. Filename includes ISO date.
Import:
- "Import CSV" opens a wizard:
1. Upload step (drag + drop, max 5MB).
2. Column mapping step (auto-detect by header, allow override).
3. Validation step (zod schema per row; show errors inline; let user fix or skip).
4. Confirm step (X valid rows, Y skipped).
- Insert in batches of 500 via an edge function using the service role.
- Show a progress bar; final toast with counts.
Template: provide a "Download template CSV" link.
#csv#import#export
Auth & Database
Magic Link Passwordless Login
Старт
Replace passwords with email magic links.
Switch auth to magic-link-only.
- /login page: single email input + "Send magic link" button. Calls signInWithOtp with emailRedirectTo set to window.location.origin + '/auth/callback'.
- /auth/callback handles the session exchange and redirects to '/' (or the stored 'next' param).
- After submit, show a "Check your inbox" state with a "Resend" link (60s cooldown).
- Disable password signup in config.
Make sure onAuthStateChange is wired BEFORE getSession in the auth provider.
#auth#magic-link
Auth & Database
Google OAuth Setup
Старт
Add a working Google sign-in button.
Add Google sign-in.
- Configure the Google provider in Lovable Cloud auth settings.
- Add a "Continue with Google" button to /login and /signup, above the email form, with the Google logo.
- redirectTo must be a full same-origin URL: window.location.origin + '/auth/callback'. Never point it at a protected route.
- On /auth/callback, exchange the code, then read a stored 'next' path from sessionStorage and navigate there (default '/').
- Handle the "Unsupported provider" error with a clear message instructing the admin to enable Google.
#oauth#google
Auth & Database
Soft Delete Pattern
Средний
Add reversible deletion with a 30-day recovery window.
Add soft delete to the {{TABLE}} table.
- Add 'deleted_at' timestamptz column.
- Update all SELECT policies to add 'AND deleted_at IS NULL'.
- A 'soft_delete_{{table}}' RPC sets deleted_at = now() with a permission check via RLS.
- A 'restore_{{table}}' RPC clears deleted_at, only allowed within 30 days.
- A daily cron job hard-deletes rows where deleted_at < now() - interval '30 days'.
UI:
- "Trash" route under /settings/trash shows the user's soft-deleted items with "Restore" and "Delete permanently" actions.
#soft-delete#migrations
Auth & Database
Full-Text Search with RLS
Продвинутый
Postgres full-text search that respects row-level security.
Add full-text search to the {{TABLE}} table.
- Add a generated 'search_vector' tsvector column from {{COLUMNS}}.
- Create a GIN index on search_vector.
- A SECURITY INVOKER function search_{{table}}(_q text) returns rows where search_vector @@ websearch_to_tsquery('simple', _q). SECURITY INVOKER so RLS still applies.
- Client uses .rpc('search_{{table}}', { _q: query }) with debounce(200ms).
- UI: search input with highlighted matches in results.
Do NOT use SECURITY DEFINER here — that would bypass RLS and leak data.
#search#fts#rls
Auth & Database
Two-Factor Authentication (TOTP)
Продвинутый
Enable optional TOTP-based 2FA for accounts.
Add optional TOTP 2FA.
- /account/security shows 2FA status and an "Enable 2FA" button.
- Enable flow: call auth.mfa.enroll({ factorType: 'totp' }), show the QR code + secret, ask for a 6-digit code, call auth.mfa.challenge + verify.
- After enabling, show 8 recovery codes once and force the user to confirm they saved them.
- Disable flow requires a current TOTP code.
Sign-in:
- After successful password sign-in, check assurance level. If aal1 and the user has TOTP, route to /auth/2fa to enter a code before granting full access.
Persist a 'mfa_enabled' boolean on profiles for fast UI checks (kept in sync via trigger).
#2fa#totp#security
Auth & Database
Safe Data Migration
Продвинутый
Migrate a column to a new shape without downtime.
Plan and execute a safe migration: rename column {{OLD}} to {{NEW}} on {{TABLE}} with a type change from {{OLD_TYPE}} to {{NEW_TYPE}}.
Steps:
1. Add the new column nullable with a default if appropriate.
2. Backfill in batches of 1000 using a single SQL statement with a CTE, not a row loop.
3. Update application code to write to BOTH columns.
4. Verify counts match (SELECT count(*) WHERE new IS NULL AND old IS NOT NULL).
5. Switch reads to the new column.
6. Stop writing the old column.
7. Drop the old column in a follow-up migration after one safe window.
Include a rollback note for each step. Wrap each step in its own migration file with a clear comment.
#migration#data#safe
Auth & Database
Generic Audit Trigger
Продвинутый
Automatically record row history for any table.
Create a generic audit trigger.
- Table 'row_history' (id, table_name, row_id, op text, old_data jsonb, new_data jsonb, actor_id, at).
- Trigger function 'log_row_change()' (SECURITY DEFINER, set search_path = public): on INSERT, UPDATE, DELETE inserts a row_history record with auth.uid() as actor.
- Helper: attach_audit('{{table}}') that creates AFTER INSERT/UPDATE/DELETE triggers on the table.
RLS on row_history: SELECT only for admins via has_role. No anon, no public grants.
#trigger#audit#history
Auth & Database
RLS Policy Cheatsheet for a New Table
Средний
Default-safe RLS policies whenever you add a new user-owned table.
For the new table public.{{TABLE}} which is user-owned via user_id:
1. CREATE TABLE with user_id uuid not null references auth.users(id) on delete cascade, created_at timestamptz default now().
2. GRANT SELECT, INSERT, UPDATE, DELETE ON public.{{TABLE}} TO authenticated; GRANT ALL ON public.{{TABLE}} TO service_role. Do NOT grant to anon unless a policy explicitly allows public read.
3. ALTER TABLE public.{{TABLE}} ENABLE ROW LEVEL SECURITY.
4. Policies:
- "owner_select": FOR SELECT TO authenticated USING (user_id = auth.uid())
- "owner_insert": FOR INSERT TO authenticated WITH CHECK (user_id = auth.uid())
- "owner_update": FOR UPDATE TO authenticated USING (user_id = auth.uid()) WITH CHECK (user_id = auth.uid())
- "owner_delete": FOR DELETE TO authenticated USING (user_id = auth.uid())
Write the full SQL.
→ Use this every time. Forgetting GRANT is the #1 source of 401s.
#rls#policies#patterns
Design System
Audit & Remove Hardcoded Colors
Средний
Sweep the codebase for hardcoded color utilities and replace them with semantic tokens.
Audit the project for hardcoded Tailwind color utilities (text-white, bg-black, bg-[#...], text-[#...]) and hex literals in JSX.
For each finding:
1. List the file and line.
2. Propose the semantic token replacement (bg-background, text-foreground, text-muted-foreground, border-border, etc.).
3. Apply the change.
Then make sure all needed tokens exist in index.css and tailwind.config.ts. Do not introduce new hex values inside components, only in index.css.
#tokens#refactor#audit
Design System
Dark Mode Pass
Средний
Make the entire app look intentional in dark mode.
Add a polished dark mode.
- Install next-themes (or equivalent) and wrap the app in a ThemeProvider, default 'system'.
- Add a toggle in the navbar (sun/moon/system icons).
- Audit every page in dark mode and fix:
- Hardcoded white/black backgrounds.
- Low-contrast text.
- Borders that disappear.
- Images with white backgrounds that look harsh.
- Update --background, --foreground, --card, --muted, --border, --accent tokens in :root and .dark in index.css.
- Take screenshots before/after and list any unresolved low-contrast spots.
#dark-mode#theme
Design System
Vertical Rhythm & Spacing System
Старт
Replace ad-hoc margins with a consistent 4px/8px scale.
Establish a strict spacing scale.
- Allowed gaps and margins between sections: 16, 24, 32, 48, 64, 96, 128 px (Tailwind: 4, 6, 8, 12, 16, 24, 32).
- Audit hero, content blocks, cards, and footer. Replace any one-off values like m-[18px] or my-7 with the nearest allowed value.
- Set a default vertical rhythm: prose paragraphs use leading-relaxed, sections use py-16 md:py-24.
- Document the scale in a /docs/spacing.md file (a comment block in code is also fine).
#spacing#rhythm#layout
Design System
Typography Scale
Старт
Lock down a 6-step type scale used everywhere.
Define a 6-step type scale and apply it globally.
Scale (font-size / line-height / weight):
- Display: 60/64/500 (clamp 40-72px).
- H1: 40/48/500.
- H2: 30/38/500.
- H3: 22/30/500.
- Body: 16/26/400.
- Small: 13/20/400.
Fonts:
- Headings: Inter Display.
- Accent words inside headings: Playfair Display, italic.
- Body: Inter.
Apply via Tailwind utilities (text-display, text-h1, etc.) defined in tailwind.config.ts. Replace ad-hoc font sizes across the codebase.
#typography#scale#fonts
Design System
Motion Language
Средний
Pick 3 motion patterns and use them consistently.
Define and apply a restrained motion language with framer-motion.
3 patterns only:
1. fadeUp: opacity 0 -> 1, y 12 -> 0, duration 0.5, viewport once.
2. fadeIn: opacity 0 -> 1, duration 0.4.
3. press: whileTap scale 0.98, transition 0.1.
- Wrap them as reusable components/variants in src/lib/motion.ts.
- Apply fadeUp to every section header and card on scroll into view.
- Apply press to all primary buttons.
- Remove parallax, slide-in-from-side, bounces, springs, and anything decorative.
#motion#animation#framer
Design System
Single Icon Set Discipline
Старт
Audit and standardize icon usage to lucide-react.
Standardize on lucide-react.
- Find any non-lucide icons (heroicons, react-icons, emoji used as icons, inline SVGs) and replace them.
- Default size: 16 for inline, 20 for buttons, 24 for navigation.
- Default stroke width: 1.75.
- Always pair icons with a text label or aria-label.
- No two icons in the app should represent the same meaning differently.
Output the list of replacements made.
#icons#consistency
Design System
Refactor to shadcn Primitives
Средний
Replace bespoke UI with shadcn primitives.
Audit for places that reimplement shadcn primitives by hand:
- Custom dropdowns → DropdownMenu.
- Custom modals → Dialog or Sheet.
- Custom tooltips → Tooltip.
- Custom selects → Select.
- Custom checkboxes/switches → Checkbox / Switch.
- Custom toasts → Sonner.
For each, refactor to the shadcn component, preserving styling via semantic tokens (no hardcoded colors).
#shadcn#refactor
Design System
Full Responsive Pass
Средний
Make every page look intentional from 360px to 1920px.
Do a responsive audit and fix issues.
Breakpoints to verify: 360, 414, 768, 1024, 1280, 1536, 1920.
For each main route, check:
- No horizontal scroll.
- Tap targets >= 44px on mobile.
- Text doesn't overflow containers.
- Images scale without cropping subjects.
- Navigation collapses to a sheet on < md.
- Modals fit on small screens (max-h-[90vh] + scroll).
- Tables become cards or horizontal scroll on mobile.
Output a list of remaining issues you couldn't fix automatically.
#responsive#mobile
AI Features
AI Text Summarizer
Старт
Paste long text, get a structured summary.
Build a /tools/summarize page.
- Textarea for input (10k char max), token counter below.
- Options: length (Short / Medium / Long), style (Bullets / Paragraph / Tweet).
- "Summarize" button calls an edge function that calls the Lovable AI Gateway with model 'google/gemini-2.5-flash', system prompt instructing the requested length and style.
- Stream the response into an output panel.
- "Copy", "Regenerate", "Download .md" actions.
No API key on the client. Use LOVABLE_API_KEY in the edge function.
#ai#summarize#gemini
AI Features
AI Chat with Conversation Memory
Средний
Multi-turn chat where past messages persist across sessions.
Build a chat interface with persistent conversation memory.
Schema:
- 'conversations' (id, user_id, title, created_at, updated_at).
- 'messages' (id, conversation_id, role 'user'|'assistant'|'system', content, created_at).
- RLS: user owns their conversations and messages.
UI:
- Left rail: list of conversations, "New chat" button, search.
- Main: message list with markdown rendering, code blocks with copy button, streaming assistant cursor.
- Input with Cmd+Enter to send.
Edge function 'chat':
- Loads the last 20 messages of the conversation, sends to Lovable AI Gateway (google/gemini-2.5-flash) with streaming, persists user + assistant messages.
- Auto-generates a conversation title after the first turn.
#chat#ai#memory
AI Features
AI Image Generation
Средний
User-facing image generator with prompt history.
Build /tools/imagine.
- Prompt input + negative prompt input.
- Size selector (square, portrait, landscape).
- "Generate" button calls an edge function that calls the Lovable AI Gateway with model 'google/gemini-2.5-flash-image' (Nano Banana) and returns base64.
- Save the resulting image to Lovable Cloud storage bucket 'user-images' and create a row in 'generations' (user_id, prompt, image_url, created_at).
- Gallery grid below the prompt showing the user's last 24 generations with "Download" and "Use as variation" actions.
RLS: user only sees their own generations.
#image#ai#nano-banana
AI Features
AI Form Field Validator
Средний
Use AI to validate free-text form fields with helpful feedback.
Add AI-assisted validation to the {{FIELD}} text field on the {{FORM}} form.
- On blur (debounced 800ms), call an edge function 'validate-field' with the field name, value, and validation intent (e.g. "should be a clear, specific bug report").
- The edge function calls Gemini Flash with a system prompt asking it to return JSON: { valid: bool, suggestion?: string, score: 1-5 }.
- UI: show a subtle inline hint under the field. If invalid, show the suggestion as a clickable chip that, on click, replaces the field value.
Do not block submission on AI validation. It's advisory only.
#forms#validation#ai
AI Features
AI Data Extraction from Text
Продвинутый
Paste an email/PDF/snippet, get structured fields.
Build a /tools/extract page.
- Input: large textarea or file upload (PDF parsed via pdf-parse in an edge function).
- Schema selector: Invoice, Receipt, Business Card, Job Posting, Custom (JSON schema).
- Edge function calls Gemini Flash with the input and a system prompt: "Extract the fields per this JSON schema. Return ONLY valid JSON. If a field is missing, use null."
- Parse, validate against the schema with zod, render as an editable form.
- "Export JSON" and "Export CSV" actions.
Handle malformed JSON gracefully: retry once with a stricter instruction, then surface the raw response.
#extraction#structured#ai
AI Features
RAG Over User Documents
Продвинутый
Let users upload docs and chat with their content.
Build a RAG pipeline.
Schema:
- Enable the pgvector extension.
- 'documents' (id, user_id, name, source_url, created_at).
- 'doc_chunks' (id, document_id, content text, embedding vector(768), token_count).
Upload pipeline (edge function):
- Accept PDF/MD/TXT. Chunk to ~800 tokens with 100 overlap.
- Generate embeddings via Lovable AI Gateway (model 'google/text-embedding-004' or current).
- Insert chunks with embeddings.
Query (edge function):
- Embed the question. Run a similarity search (ivfflat index on embedding).
- Pass top-8 chunks to Gemini Flash with a system prompt requiring it to cite chunk ids.
UI:
- /docs upload + chat. Show citations as superscript links that scroll to the chunk.
#rag#embeddings#search
AI Features
AI Content Moderation
Средний
Block harmful user-generated content before it's published.
Add AI moderation for user-generated text in the {{RESOURCE}} flow.
- Edge function 'moderate' takes text and returns { allowed: bool, categories: string[], reason?: string }.
- Calls Gemini Flash with a strict system prompt classifying into: sexual, hate, harassment, self-harm, violence, illegal, spam.
- Threshold: any category at "high" confidence -> block.
- Borderline -> flag for manual review (insert into 'moderation_queue' with the content + categories).
Server: call moderate() before persisting any user-submitted text. If blocked, return a 422 with a generic message ("This content violates our guidelines"). Never echo the moderation reason back to the user verbatim.
#moderation#safety#ai
AI Features
AI Translation Pipeline
Средний
Translate articles into another language with brand-voice preservation.
Add an admin-only "Translate to {{LANG}}" action on the article editor.
- Edge function 'translate-article' takes article_id and target lang.
- Loads title, description, body. Calls Gemini Flash with a system prompt:
"Translate to {{LANG}}. Preserve markdown. Preserve code blocks verbatim. Preserve proper nouns. No em-dashes, no emoji, no AI filler phrases. Match the source's tone."
- Saves the translated copy to a 'translations' table keyed by (article_id, lang).
- UI: language switcher on the article page reads from translations when available.
Run the project's article sanitization on the output before saving.
#translation#i18n#ai
AI Features
AI Search Suggestions
Средний
Show smart query reformulations when a search returns 0 results.
Improve the search UX:
- When a search returns 0 results, call an edge function 'suggest-queries' with the original query and the list of available content categories.
- The function returns 3 reformulated queries via Gemini Flash.
- Render them as clickable chips below the empty state: "Try: …".
- Cache responses for 24h keyed by the lowercased query.
#search#ai#autocomplete
AI Features
AI Batch Tagger
Продвинутый
Auto-tag existing rows using AI in the background.
Auto-tag rows in the {{TABLE}} table.
- Add 'tags text[]' column if missing.
- Edge function 'tag-batch':
- Selects rows where tags IS NULL, limit 50.
- For each, calls Gemini Flash with the row's text content and a fixed taxonomy of {{TAGS}}.
- Parses JSON {tags: [...]} and updates the row.
- Schedule via pg_cron every 10 minutes until backlog == 0.
Idempotency: never re-tag a row that already has tags.
#tagging#classification#ai
AI Features
Voice Transcription
Средний
Record audio in the browser, transcribe via AI.
Build a /tools/transcribe page.
- Record button using the MediaRecorder API (webm/opus, mono).
- Live waveform during recording, max 10 minutes.
- On stop, upload to Lovable Cloud storage and call an edge function 'transcribe' that sends the audio to a speech-to-text model on the Lovable AI Gateway.
- Render the transcript with timestamps (every 15s a tiny gray timecode chip).
- Actions: copy, download .txt, "Generate summary" (chains to the summarizer).
#voice#transcription#audio
AI Features
Internal Prompt Tester
Продвинутый
Internal tool to A/B test prompt variations against a fixed dataset.
Build an /admin/prompt-lab internal page.
- "Datasets" tab: upload a CSV of test cases (input, expected).
- "Prompts" tab: a code editor for a system prompt template with {{variables}}.
- "Run" button: for each test case, call Gemini Flash with the rendered prompt, store output.
- Side-by-side compare two prompt versions over the same dataset, scored by:
- Exact match.
- Embedding cosine similarity to expected.
- Optional LLM-as-judge with a rubric.
Save runs to a 'prompt_runs' table with full metadata for later review.
#prompts#evals#internal
Bug Fixes
Debug the White Screen
Старт
App renders blank, get to the root cause fast.
The app loads to a blank white screen. Do this in order:
1. Open the browser console. Quote the first error verbatim.
2. Open the Network tab. List any 4xx/5xx responses, especially for the JS bundle and Supabase calls.
3. Check src/App.tsx for a top-level throw or a provider with a missing prop.
4. Check src/main.tsx and the router setup.
5. Look for a recent change to an Auth provider that calls getSession before subscribing to onAuthStateChange, fix the order.
6. Look for a useEffect with a thrown error and no error boundary.
Apply the smallest fix that restores rendering. Add an ErrorBoundary at the app root so the next white screen shows a friendly fallback instead.
#bug#blank-screen#debug
Bug Fixes
Fix Flaky Auth Session
Средний
User gets logged out on refresh or session is undefined intermittently.
Fix the auth provider.
Required pattern:
1. In the provider mount effect, FIRST subscribe to supabase.auth.onAuthStateChange((event, session) => setSession(session)).
2. THEN call supabase.auth.getSession() and set the initial session.
3. Return the unsubscribe in the cleanup.
If you reverse the order you get a race where the initial session overwrites a fresh one from a token refresh.
Also:
- Do not make supabase calls inside the onAuthStateChange callback synchronously, wrap them in setTimeout(() => ..., 0) to avoid deadlocks.
- Persist session in localStorage (default) and do NOT clear it on tab close.
#auth#session#race
Bug Fixes
Debug 401/Permission Denied
Средний
A Supabase query returns 401 or 'permission denied'.
A query to public.{{TABLE}} returns 401 or 'permission denied for table'. Diagnose in order:
1. Are GRANTs in place? Run:
GRANT SELECT, INSERT, UPDATE, DELETE ON public.{{TABLE}} TO authenticated;
GRANT ALL ON public.{{TABLE}} TO service_role;
(Add anon only if the policy allows public read.)
2. Is RLS enabled? Run: ALTER TABLE public.{{TABLE}} ENABLE ROW LEVEL SECURITY.
3. Is there a matching policy for the operation and the calling role?
4. Does the policy expression succeed for this user? Test:
SELECT * FROM public.{{TABLE}} WHERE ...; logged in as the user via supabase.read_query.
5. Is the client actually sending the JWT? Check Authorization header in Network.
Apply the missing GRANT or policy. Never disable RLS.
#rls#401#permissions
Bug Fixes
Hydration Mismatch Warning
Средний
Console shows hydration mismatch errors.
Find and fix the hydration mismatch.
Common causes:
- Using Date.now(), Math.random(), or new Date().toLocaleString() during render.
- Reading from localStorage/window during the initial render.
- Conditional rendering based on theme without a mounted-guard.
Fix pattern:
- Wrap client-only content in a 'mounted' check: useEffect(() => setMounted(true), []); if (!mounted) return null.
- For theme-dependent UI, render a placeholder until mounted.
- Replace Date.now() with stable timestamps passed via props.
#hydration#ssr#warning
Bug Fixes
Infinite Re-render Loop
Средний
"Maximum update depth exceeded", find the offender.
Diagnose the infinite render loop.
Likely causes:
1. setState called unconditionally in render.
2. useEffect with a non-memoized object/array dependency that's recreated every render.
3. A child component calling a parent setter on mount with no condition.
4. A useEffect whose body sets state that the same effect depends on.
Fix:
- Move object/array deps inside the effect or memoize with useMemo.
- Add a real condition before setState in effects.
- Use useCallback for handlers passed to memoized children.
- If a derived value is computed in state, replace with useMemo and drop the state.
#react#performance#loop
Bug Fixes
Stale React Query Cache
Старт
UI doesn't update after a mutation succeeds.
After a successful mutation, the list view doesn't reflect the change. Fix it:
- In the mutation's onSuccess: queryClient.invalidateQueries({ queryKey: [{{KEY}}] }).
- For optimistic updates, also implement onMutate (snapshot + setQueryData) and onError (rollback).
- Make sure the query key in invalidateQueries matches the query key exactly (same array shape).
- If the data is in a paginated/infinite query, invalidate with exact: false.
#react-query#cache#mutation
Bug Fixes
CORS Error from Edge Function
Старт
Browser blocks edge function call with CORS error.
Fix CORS on the {{FUNCTION}} edge function.
At the top of the function:
const corsHeaders = {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
"Access-Control-Allow-Methods": "POST, GET, OPTIONS",
};
if (req.method === "OPTIONS") return new Response(null, { headers: corsHeaders });
Then include corsHeaders in EVERY Response, including error responses. Forgetting them on errors is the most common subtle CORS bug.
#cors#edge-function
Bug Fixes
Fix TypeScript Build Errors
Средний
Build fails on types, get to green without 'any' carpet-bombing.
The build is failing on TypeScript errors. For each error:
1. Quote the exact message and file:line.
2. Diagnose the root cause (missing prop, wrong return type, narrowed-away null, etc.).
3. Apply the minimum-impact fix:
- Add the missing prop or default.
- Narrow with a guard, not 'as'.
- Add an explicit return type on the function.
- Update the consumer to match a corrected signature.
Forbidden: blanket 'any', '@ts-ignore', '@ts-expect-error' without a TODO comment and a linked issue. Forbidden: changing tsconfig strictness.
#typescript#build
SEO
Sitemap & robots.txt
Старт
Generate a correct sitemap and robots.txt for a multi-route app.
Generate /public/sitemap.xml and /public/robots.txt.
sitemap.xml:
- Include all public routes.
- Include both EN and RU URLs as separate entries.
- Add <xhtml:link rel="alternate" hreflang="en" /> and hreflang="ru" cross-references per URL.
- lastmod = today's ISO date.
- Exclude /admin, /auth, /account, /api, /404.
robots.txt:
- Allow all by default.
- Disallow /admin, /auth, /account, /api.
- Sitemap: https://{{DOMAIN}}/sitemap.xml.
Also expose a /sitemap.xml route via an edge function that returns the file with Content-Type: application/xml, in case CDN doesn't serve the static asset correctly.
#sitemap#robots#seo
SEO
Per-Route Meta Tags
Старт
Unique title, description, OG image per route.
Ensure every public route sets unique meta tags.
Use the project's useSEO hook with:
- title: under 60 chars, includes the primary keyword, ends with " | {{BRAND}}".
- description: under 158 chars, action-oriented, includes the keyword once.
- canonical: absolute URL of the current page.
- og:image: 1200x630, route-specific (default to the hero image, fallback to a brand default).
- hreflang for EN and RU variants.
- jsonLd appropriate to the page (WebSite on /, Article on /blog/:slug, FAQPage on /faq, BreadcrumbList where applicable).
Audit every route in src/pages/* and fix any missing or duplicated tags.
#meta#og#seo
SEO
Article JSON-LD
Средний
Rich-result-eligible JSON-LD on every article.
Add JSON-LD schema to every /blog/:slug page.
Required fields:
- @context, @type: "Article".
- headline (= page H1, under 110 chars).
- description.
- image: array of absolute URLs.
- datePublished, dateModified (ISO 8601 with offset).
- author: { @type: "Person", name, url }.
- publisher: { @type: "Organization", name, logo: { @type: "ImageObject", url } }.
- mainEntityOfPage: { @type: "WebPage", @id: canonical }.
- inLanguage: "en" or "ru".
If the article has a FAQ block, add a second JSON-LD script of @type "FAQPage" with the questions and answers.
Validate against schema.org and Google's rich-results test mentally before finishing.
#jsonld#schema#article
SEO
Internal Linking Pass
Средний
Add contextual internal links across the article corpus.
Do an internal linking pass across the blog.
For each article:
1. Identify 3-5 other articles that are topically related (same cluster).
2. Inside the body, replace plain keyword mentions with links to those related articles: natural anchors, no "click here", no stuffing.
3. At the bottom, render the existing RelatedInCluster component with 3-4 manual picks (not just by date).
4. From hub pages (/blog, /comparisons, /prompts) ensure every article is linked at least once.
Report orphaned articles (no incoming internal links).
#linking#topical-authority
SEO
Fix Core Web Vitals
Средний
Improve LCP, CLS, INP on the marketing pages.
Fix Core Web Vitals on / and /blog.
LCP (target < 2.5s):
- Identify the LCP element. If it's an image, add fetchpriority="high", preload it, serve AVIF/WebP, set explicit width/height.
- Inline critical CSS for above-the-fold.
CLS (target < 0.1):
- Reserve space for every image, embed, and async-loaded block (aspect-ratio or min-height).
- Avoid late-injected banners/cookies that push content.
INP (target < 200ms):
- Defer non-critical JS.
- Avoid long synchronous handlers; chunk with requestIdleCallback if needed.
- Replace heavy hover effects with cheaper transforms.
Measure with Lighthouse before and after, report the deltas.
#performance#cwv#lighthouse
SEO
SEO Content Brief Generator
Средний
Generate a writer-ready brief for a target keyword.
Produce a content brief for the target keyword: "{{KEYWORD}}".
Output a markdown brief with:
1. Primary keyword + 5 semantic variants.
2. Search intent (informational / commercial / transactional) and a 1-sentence justification.
3. Suggested H1 (under 60 chars) and meta description (under 158).
4. Outline: H2/H3 structure with bullet points per section, total target length in words.
5. 5 questions to answer (People Also Ask flavor).
6. 5 internal links from the existing site to weave in (cite slugs).
7. 3 external authoritative sources to cite.
8. 3 image ideas with alt-text suggestions.
Do not write the article, just the brief.
#brief#content#research
SEO
Image Optimization Pass
Старт
Make every image lighter and accessible.
Audit images across the site:
- Convert hero and content images to AVIF with WebP fallback, sized at 800w and 1600w (srcset).
- Add explicit width and height to every <img>.
- Add descriptive alt text (specific, not "image of …"). Decorative images: alt="".
- Add loading="lazy" to images below the fold, fetchpriority="high" to the LCP image.
- Replace any image > 500KB.
Output the list of files changed with before/after byte sizes where possible.
#images#performance#alt
SEO
Breadcrumbs with Schema
Старт
Add accessible breadcrumbs with JSON-LD on all nested pages.
Add breadcrumbs to every nested route (anything below the root).
- Use the existing Breadcrumbs component or shadcn Breadcrumb.
- Visible breadcrumbs: Home / Section / Page title (truncate long titles to 60 chars).
- Add a BreadcrumbList JSON-LD via the useSEO hook on each page.
- Style: muted, small, separated by a chevron icon, last item not a link.
- Hide on / (root) and /auth.
#breadcrumbs#schema#navigation
Mobile
Mobile Nav Sheet
Старт
Replace squished desktop nav with a proper mobile sheet.
Implement a mobile navigation drawer.
- Below md breakpoint: hide desktop nav, show a hamburger button (44x44px tap target).
- On tap: open a shadcn Sheet from the right covering 85% of the viewport width.
- Inside: logo at top, primary links (large, 18px), secondary links (14px), language toggle, CTA at the bottom pinned with safe-area-inset-bottom.
- Close on link click, on Esc, on backdrop click.
- Trap focus inside while open.
#mobile#nav#sheet
Mobile
Mobile Bottom Tab Bar
Средний
Native-feeling bottom tabs for an app-style mobile experience.
Add a mobile-only bottom tab bar to the authenticated app.
- 4-5 tabs max, each with an icon and a short label.
- Active tab indicator: icon fills + label color changes (no underline bars).
- Sticky to the bottom, respects safe-area-inset-bottom.
- Hidden on desktop (md+).
- Hides on scroll-down, reappears on scroll-up.
- Hidden when a modal/sheet is open.
Use lucide icons, 24px stroke 1.75.
#mobile#tabs#navigation
Mobile
Pull-to-Refresh
Средний
Native-style pull-to-refresh on mobile list views.
Add pull-to-refresh to the {{LIST_ROUTE}} page on mobile.
- Trigger when at scrollTop = 0 and the user drags > 70px.
- Show a circular spinner that scales/rotates with drag distance.
- On release past threshold, call the page's refetch (React Query) and resolve the spinner.
- Add a subtle haptic on trigger (navigator.vibrate(10)).
- Disabled on desktop (no touch).
#mobile#ux#refresh
Mobile
Mobile Form Keyboard UX
Старт
Make mobile forms feel native.
Polish all forms for mobile keyboards.
- Set correct inputMode and autoComplete on every input:
- email -> inputMode="email" autoComplete="email"
- phone -> inputMode="tel"
- numbers -> inputMode="numeric"
- search -> inputMode="search" enterKeyHint="search"
- one-time codes -> autoComplete="one-time-code"
- Set enterKeyHint per field role (next, done, go, send).
- Scroll the active field into view when keyboard opens.
- Submit on enterKeyHint='go' presses in single-field forms.
#mobile#forms#keyboard
Mobile
Safe Areas & Notch Handling
Старт
Stop sticky headers and tab bars from sitting under the notch/home bar.
Fix safe-area handling for iOS.
- Add to index.html viewport meta: viewport-fit=cover.
- Sticky topbar: padding-top: env(safe-area-inset-top, 0).
- Bottom tab bar / sticky CTA: padding-bottom: env(safe-area-inset-bottom, 0).
- Side gutters in landscape: padding-left/right: env(safe-area-inset-left/right, 0).
- Add Tailwind utilities pt-safe, pb-safe, px-safe via a small plugin in tailwind.config.ts.
#safe-area#ios#notch
Mobile
Mobile Image Gallery
Средний
Swipeable, pinch-to-zoom image gallery on mobile.
Add a mobile image gallery viewer.
- Tapping any image opens a fullscreen overlay.
- Horizontal swipe between images (use embla-carousel).
- Pinch to zoom (use a small wrapper around CSS transforms with touch events, or react-zoom-pan-pinch).
- Double-tap zooms to 2x at the tap point, double-tap again to fit.
- Swipe down > 80px closes.
- Page indicator (3 / 12) at the top, close button top-right, share button bottom-right.
Lock body scroll while open.
#mobile#gallery#swipe
Content & Writing
Blog Outline from a Keyword
Старт
Skeleton for a 1500-word article around a target keyword.
Write a blog outline for the keyword "{{KEYWORD}}".
Output:
1. Working title (under 60 chars, includes the keyword).
2. 2-sentence hook (the angle, why now).
3. H2/H3 outline with 6-8 H2 sections, each with 2-4 bullet sub-points.
4. 5 stats or examples to research and include.
5. Conclusion section with one specific call to action.
6. Suggested internal links (3 from the project's existing articles).
No filler, no AI cliches, no em-dashes.
#outline#blog#seo
Content & Writing
Customer Case Study Template
Средний
Standard structure for a credible customer case study.
Draft a customer case study using this structure:
1. One-line summary with the headline metric ("How {{Customer}} cut churn 38% in 90 days").
2. About the customer (industry, size, who).
3. The problem (specific, with a number or a quote).
4. Why they evaluated {{PRODUCT}}.
5. Implementation (steps, timeline, who was involved).
6. Results (3 metrics, before/after, with the timeframe).
7. Quote from the customer (one paragraph max).
8. What's next.
Tone: matter-of-fact, no superlatives, no marketing puffery. Numbers do the work.
#case-study#customer#story
Content & Writing
Release Notes Writer
Старт
Turn a list of PR titles into readable release notes.
Convert this list of changes into release notes for {{VERSION}}:
{{CHANGES}}
Format:
- Group by: New, Improved, Fixed.
- Each line: a benefit-led sentence (not a PR title), max 16 words, present tense.
- Use bullet lists, no nested bullets.
- Add a one-paragraph "Highlights" intro at the top calling out the 1-2 most important items.
- No emoji, no exclamation marks, no "we are excited to announce".
#release-notes#changelog
Content & Writing
Documentation Page Skeleton
Средни й
Standard structure for a feature docs page.
Write a documentation page for the {{FEATURE}}.
Sections in order:
1. What it is, one paragraph.
2. When to use it, 3 bullet scenarios.
3. Quickstart, copy-pasteable code block that works in under 60 seconds.
4. How it works, 2 paragraphs of conceptual model + a small diagram (ASCII).
5. API reference: props/params table with type, default, description.
6. Common patterns, 3 examples with code.
7. Limits and gotchas, bullet list of edge cases.
8. Related, links to adjacent docs.
Code blocks must be runnable, not pseudo-code. Use the project's actual stack.
#docs#developer
Content & Writing
Pull Tweets from an Essay
Старт
Extract 5 standalone tweets from a long-form essay.
From the essay below, pull 5 standalone tweets.
Rules:
- Each tweet stands alone, no "as I wrote in my piece".
- Under 240 chars to leave room for retweets with comment.
- One specific idea per tweet, with at least one concrete number, name, or example.
- No hashtags. No emoji. No questions used as engagement bait.
- Vary structure: one one-liner, one short observation, one contrarian take, one list (2-3 items), one quote-shaped line.
Essay: {{ESSAY}}
#twitter#essay#repurpose
Content & Writing
Founder Monthly Update
Старт
Standard monthly update for investors / community.
Write a monthly founder update for {{COMPANY}} covering {{MONTH}}.
Sections:
1. TL;DR, 3 bullets.
2. Metrics: MRR, growth %, churn %, active users, runway (table).
3. Wins, 3-5 specific items with what changed and why it mattered.
4. Lowlights, 1-2 things that didn't go well + the lesson.
5. Asks: specific intros, hiring needs, customer leads.
6. Next month's focus, 3 priorities.
Tone: candid, numbers-first, no spin, no hype.
#update#investor#founder
Marketing Copy
10 Homepage Headline Options
Старт
Generate 10 distinct headline angles for the homepage.
Write 10 homepage headline options for {{PRODUCT}} which {{ONE_LINE_VALUE}} for {{AUDIENCE}}.
Mix of angles:
- Outcome-led ("Ship a landing page before lunch").
- Pain-led ("Stop wrestling with Figma exports").
- Contrarian ("Stop A/B testing button colors").
- Mechanism-led ("Generative components, no design system required").
- Comparison-led ("Like Webflow, but for AI apps").
Rules:
- Under 9 words each.
- No buzzwords (revolutionize, empower, unlock, leverage).
- No exclamation marks.
- Each must work without any subhead.
Output as a numbered list with a one-sentence rationale per headline.
#headline#copywriting
Marketing Copy
Feature Page Copy
Средний
Long-form copy for a single feature page.
Write copy for the /features/{{FEATURE}} page.
Sections in order:
1. Hero: feature name eyebrow, headline (outcome), 1-sentence subhead, primary + secondary CTA.
2. The problem (2 short paragraphs, specific scenario).
3. How {{FEATURE}} solves it (3 cards, each with a verb-led title + 2 sentences).
4. "See it in action", a 30-word setup for a demo embed.
5. Who it's for (3 personas, 1 line each).
6. Trust strip (logos placeholder).
7. FAQ (5 questions).
8. CTA.
Tone: concrete, second-person, present tense. No filler verbs (utilize, enable, facilitate).
#feature#page#copy
Marketing Copy
Onboarding Email Sequence (5 emails)
Средний
Drip sequence for new signups.
Write a 5-email onboarding sequence for new {{PRODUCT}} signups.
For each email provide: send timing (e.g. day 0), subject line (under 45 chars), preheader (under 90 chars), body (under 130 words), single primary CTA.
Sequence:
1. Day 0: Welcome + the one thing to do first.
2. Day 1: Show a real success story from a similar user.
3. Day 3: Address the most common stuck point + how to unstick.
4. Day 5: A power-user tip that feels like an inside joke.
5. Day 7: Soft ask, "what's getting in the way?", one-question reply.
No "I hope this finds you well". No emoji. No exclamation marks except the welcome subject.
#email#onboarding#sequence
Marketing Copy
Google Ads Headlines & Descriptions
Старт
Responsive search ads assets for a campaign.
Generate Google Responsive Search Ads assets for {{PRODUCT}}, keyword "{{KEYWORD}}".
Output:
- 15 headlines, each up to 30 chars (count characters and show counts).
- 4 descriptions, each up to 90 chars.
- 2 paths, each up to 15 chars.
Constraints:
- At least 5 headlines include the keyword verbatim.
- At least 3 headlines are benefit-led without the keyword.
- 1 headline is a CTA ("Start free", "See pricing").
- No superlatives that require disclaimers ("best", "#1").
#ads#google#ppc
Marketing Copy
Product Launch Press Release
Средний
Boilerplate press release for a launch.
Write a press release for the launch of {{PRODUCT}} by {{COMPANY}} on {{DATE}}.
Format:
- Dateline.
- Headline (under 12 words).
- Subhead (one sentence).
- Lede paragraph: who, what, when, where, why, how: under 60 words.
- 3 body paragraphs: the problem, the product, the milestone (funding/customers/numbers).
- One customer quote, one founder quote.
- Boilerplate "About {{COMPANY}}" paragraph.
- Media contact block.
Tone: AP-style, third person, present tense. No hype words.
#pr#launch#press
Marketing Copy
LinkedIn Company About Section
Старт
Crisp LinkedIn About copy for a company page.
Write the LinkedIn About section for {{COMPANY}}.
Structure (under 1800 chars total):
- Opening line: what we do, for whom, in 1 sentence.
- 2-paragraph story: why this exists.
- 3-bullet list: what we offer.
- 1 paragraph: how we work (values made concrete with verbs, not adjectives).
- Closing line: how to start.
Tone: human, specific, second person where natural. No "we are passionate about". No "world-class".
#linkedin#company#bio
Social Media
X Thread from a Tutorial
Старт
Repurpose a tutorial as a 9-tweet X thread.
Turn this tutorial into a 9-tweet thread for X:
{{TUTORIAL}}
Rules:
- Hook tweet: a specific claim with a number, under 200 chars, no emoji.
- Tweets 2-8: one concrete step or insight each, under 240 chars, can include code snippets in triple-backticks.
- Final tweet: link to the full tutorial + a one-line "follow for more".
- No "🧵" labels. No "1/", "2/" numbering. No bait questions.
#x#thread#tutorial
Social Media
Instagram Carousel (10 slides)
Старт
Plan a 10-slide IG carousel from one big idea.
Script a 10-slide Instagram carousel about: {{TOPIC}}.
For each slide: a headline (under 8 words), 1-2 sentence body, and a visual direction (one sentence).
Structure:
- Slide 1: hook with a specific promise.
- Slides 2-3: the problem framed sharply.
- Slides 4-8: the answer in 5 numbered steps.
- Slide 9: one common mistake.
- Slide 10: CTA (follow + saved-for-later prompt).
Visual style: editorial, off-white background, single accent color, serif italic for accent words. No memes.
#instagram#carousel
Social Media
30-Second TikTok Script
Старт
Tight 30-second script with on-screen text cues.
Write a 30-second TikTok script about {{TOPIC}}.
Format as a table with columns: Time, Spoken VO, On-screen text, B-roll.
Structure:
- 0-3s: pattern-interrupt hook (claim or visual). On-screen text mirrors the hook.
- 3-15s: the why (one number + one example).
- 15-25s: the how (3 quick steps, each with a smash-cut).
- 25-30s: CTA ("follow for the full breakdown").
No "hey guys". No "before we get started". No music suggestions.
#tiktok#video#shortform
Social Media
LinkedIn Thought-Leader Post
Средний
200-word LinkedIn post that earns engagement without cringe.
Write a LinkedIn post about: {{POINT_OF_VIEW}}.
Constraints:
- 180-220 words.
- First line: a specific, contrarian observation (under 90 chars).
- Second line: one-line setup ("Here's what changed my mind.").
- Body: 3 short paragraphs, each making one point with a concrete example.
- Close: a question that's a real question, not engagement bait.
- No emoji. No "agree?". No "thoughts?". No hashtag wall (max 2 at the end).
- No "in today's fast-paced world". No "I'm humbled".
#linkedin#thought-leadership
Productivity
Daily Shutdown Checklist
Старт
End-of-day checklist that actually clears the mind.
Generate a daily shutdown checklist for an indie founder.
Sections:
- Inbox to zero (email + Slack/Discord), explicit rules ("anything > 2 min becomes a task").
- Open loops to capture (anything I committed to today).
- Tomorrow's top 1 (single most important task, written in one sentence).
- Numbers to log (MRR, signups, support tickets handled).
- One sentence: what worked today, what didn't.
- Hard stop: close laptop, no exceptions.
Format as a printable single-page markdown checklist with checkboxes.
#habit#daily#shutdown
Productivity
Quarterly Planning Doc
Средний
Lightweight quarterly plan that fits on one page.
Draft a quarterly plan for {{COMPANY}}, Q{{N}} {{YEAR}}.
One-page format:
- Theme (one sentence, what this quarter is really about).
- 3 goals max, each with: the metric, the starting value, the target value, the rationale.
- Top 5 projects, each with: owner, start, end, success criterion.
- Explicit "not doing" list (3 items we are deliberately ignoring).
- Risks (3 bullets).
- Weekly cadence (what we review every Monday in 15 minutes).
No vague verbs (improve, optimize, leverage). Every line passes the "how would we know we did it?" test.
#planning#quarterly#okr
Productivity
Writer's Block Breaker
Старт
10 prompts that get a writer unstuck in 5 minutes.
Give me 10 specific, fast prompts to break writer's block on the topic: {{TOPIC}}.
Each prompt must:
- Be a single sentence.
- Force a concrete answer (a number, a name, a scene).
- Take under 5 minutes to answer in 100 words.
Examples of the shape, not content:
- "What's the exact moment you realized X was wrong?"
- "Describe the worst version of {{TOPIC}} you've seen, in 80 words."
No abstract prompts ("brainstorm ideas about…").
#writing#block#creative
Research & Strategy
JTBD Interview Script
Средний
Customer interview script following Jobs To Be Done.
Write a 30-minute Jobs To Be Done interview script for a recent customer of {{PRODUCT}}.
Structure:
- Warm-up (2 min): who they are, role, day-to-day.
- Trigger (5 min): when did they first realize they needed something like {{PRODUCT}}? Walk me through that day.
- Search (5 min): what did they look at, who did they ask, what did they try?
- Decision (10 min): why us vs alternatives? What almost made them not pick us? What pushed them over?
- Outcome (5 min): what's different now? Specifically, what do they do that they didn't before?
- Forces (3 min): pull (what attracted them) + push (what they were running from) + anxieties + habits.
Each section: 3-5 open questions, no leading questions, no yes/no.
#jtbd#research#interview
Research & Strategy
Bottom-Up Market Sizing
Продвинутый
Defensible TAM/SAM/SOM calculated bottom-up.
Calculate a bottom-up market size for {{PRODUCT}} targeting {{ICP}}.
Show the math step by step:
1. Count of potential customers (cite source).
2. % that have the problem severely enough to pay (with rationale).
3. Average annual revenue per customer (with comparable pricing).
4. Multiply to get TAM.
5. Realistic SAM: filter by geography, language, buying mechanism we can actually reach.
6. Realistic SOM: 3-year capture %, with a sanity-check against comparable startups.
Call out the 2 most fragile assumptions and what evidence would strengthen or kill them.
#sizing#market#tam
Research & Strategy
Honest SWOT
Средний
SWOT analysis without the generic filler.
Write a SWOT for {{COMPANY}} that a board member would respect.
Rules per quadrant:
- 4 items max per quadrant.
- Each item: one specific sentence + one piece of evidence (a number, a customer quote, a competitor action).
- No platitudes ("strong team", "growing market", "competition is increasing").
- Threats and Weaknesses must be at least as detailed as Strengths and Opportunities: if not, you're not being honest.
Close with one sentence: given this SWOT, what is the single most important bet for the next 90 days?
#swot#strategy
Строй осознанно
Лучший промпт это тот, который вы реально отгружаете.