# Prompt Library ## Prompt Library **Skill level:** Beginner Copy a prompt, replace the parts in `[BRACKETS]`, and send it to your assistant. Each prompt names the Finzo files involved, so it works in AI editors and, with the file pasted in, in chat assistants too. ### Get Started **Explain the project to the assistant** ```text Read AGENTS.md and SKILLS.md, then look at src/config/config.toml, src/pages/[...lang]/index.astro, and src/content/sections/english/home-banner.md. Summarize in 10 bullet points how this Astro theme is organized: where text lives, how a page picks its sections, how a page overrides a section (the content prop in the route), how section layouts are chosen, and which collections npm run astro-check actually validates. Don't change any files yet. ``` **Describe your product once, then reuse it** ```text Here is my product. Use it for every copywriting request in this conversation: - Name: [PRODUCT NAME] - What it does: [ONE SENTENCE] - Who it is for: [AUDIENCE] - Main features: [3 TO 6 FEATURES] - Tone: clear, trustworthy, concrete. No hype words, no unverifiable claims. Never invent customer names, testimonials, user counts, uptime numbers, awards, or certifications. If you need one, leave the sample value and list it for me. Confirm with one line, and don't change any files yet. ``` ### Brand **Rename the site** ```text Change the brand from "Finzo" to "[NAME]". In src/config/config.toml update [site] title, tagline, description, logoText, [seo] author, and brandName in [settings]. Then search src/content, src/config, and src/i18n for any remaining "Finzo" in visible text and replace it, including common.siteDescription and common.siteTagline in every src/i18n/.json. Don't rename files or code identifiers. ``` **Apply brand colors** ```text My brand color is [HEX] and my accent color is [HEX]. In src/styles/theme.css update --color-primary and --color-accent, and adjust --color-secondary and --color-tertiary to match. Keep at least 4.5:1 contrast for text on --color-body and on --color-theme-light. Don't add arbitrary color values anywhere else, and don't touch the typography or breakpoint tokens. List the values you chose. ``` **Change the fonts** ```text Replace Figtree with [GOOGLE FONT] as the main font in src/config/fonts.json. Keep the cssVariable "--font-primary", the weights, the fallback, and the "latin" subset. Keep Instrument Serif for --font-secondary and the IBM Plex Sans Arabic entry (it is loaded only on Arabic pages) unless I say otherwise. Don't edit any CSS file. Remind me to restart npm run dev. ``` **Use my logo** ```text I added my logo at src/assets/images/[FILE].svg. In src/config/config.toml set [site] logo to "/images/[FILE].svg", adjust logoWidth and logoHeight to keep its proportions, and set logoText to [NAME OR ""]. Also set image under [site.favicon] to the same file, and tell me to run npm run generate-favicons. ``` ### Homepage And Sections **Rewrite the homepage for my product** ```text Rewrite the English homepage text for my product. The homepage is src/pages/[...lang]/index.astro. Edit only the section files it uses in src/content/sections/english/. Keep every key, option, icon name, image path, and the number of items in each list. Only change text values, and keep any **bold** markers and
tags where the layout needs them. Then write the French and Arabic versions in src/content/sections/[french, arabic]/, with identical keys. ``` **Reorder or remove homepage sections** ```text On the homepage (src/pages/[...lang]/index.astro), move [SECTION] above [SECTION] and remove [SECTION]. Only edit the route file: don't delete any content files, and remove imports that are no longer used. Note that HomeBanner and IntegrationSection have no enable switch, so removing them from the route is the only way. Then run npm run astro-check. ``` **Change a section on one page only** ```text On [PAGE ROUTE, for example src/pages/[...lang]/pricing.astro], change [WHAT] for that page only. Pass it through the section component's content prop in that route, the way other routes do, and leave src/content/sections//[FILE].md alone so the other pages keep the current text. ``` **Switch a section layout** ```text Use the comparison table for pricing and the grid for testimonials. In the route files that render them, set and pass content={{ sectionLayout: "grid" }} to TestimonialSection. Don't add layout keys to the content files: nothing reads them there. Then run npm run astro-check. ``` **Hide a section everywhere** ```text Hide the [SECTION] everywhere. Set enable: false in src/content/sections/english/[FILE].md and in the french and arabic copies of that file. Don't delete the files or edit the routes. ``` ### Content **Write pricing plans** ```text Update the plans in src/content/sections/english/pricing-section.md to: [PLAN NAME, MONTHLY PRICE, YEARLY PRICE, 3-6 FEATURES for each plan]. Keep the file's structure: the plans toggle list, and for each plan the icon, badge, name, description, the monthly and yearly price entries with prependValue and typeAlternateValue, the features list, and the button. Mark [PLAN] as featured: true. If the comparison table in the same file lists features, update it to match. Then copy the same numbers into the french and arabic versions of the file and translate only the text. ``` **Rewrite the features pages** ```text My product has these features: [LIST]. Rewrite the English text in src/content/sections/english/features-grid.md, features-section-two.md, features-section-four.md, and features-ring-layout.md for them, plus src/content/features/english/-index.md for the page title and description. Keep every key, option, icon name, and image path, and keep the number of items in each list. Then do the french and arabic folders. ``` **Write a blog post** ```text Write a blog post titled "[TITLE]" about [TOPIC], around 800 words. Create src/content/blog/english/[slug].mdx with the same frontmatter fields as the other posts in that folder (title, image, date, author, categories, draft: false, excerpt). Use an existing image path from src/assets/images/blog/ and an existing author from src/content/author/english/. Use ## headings. Add the french and arabic versions in the matching folders. ``` **Add an integration** ```text Add an integration for [NAME] to src/content/integration/english/[slug].mdx, copying the frontmatter of src/content/integration/english/discord.mdx (title, excerpt, image, categories, button). Use a category that already exists in that folder. Add the logo path under /images/integration/ and tell me which image file to add. Then add the french and arabic versions. ``` **Add a changelog entry** ```text Add an entry to the list in src/content/changelog/english/-index.md for [WHAT SHIPPED] on [DATE], version [VERSION]. Follow the shape of the existing entries (title, version, date, content, types with a Lucide icon name). Leave out the video block unless I give you a file. Keep it under 150 words. Add the same entry to the french and arabic versions of the file. ``` **Add a legal or text page** ```text Add a page at /[slug]/ titled "[TITLE]" with this content: [TEXT]. Create src/content/pages/english/[slug].md like src/content/pages/english/terms-conditions.md, and the french and arabic versions in the matching folders. [page].astro renders it, so no route file is needed. Add it to the footer menu in every src/config/menu..json. ``` ### Navigation And Pages **Clean up the menus** ```text In every src/config/menu..json: keep only links to the pages I use ([LIST]), and set "enable": false on the rest in headerPrimary and footer. Keep the JSON shape, the weight values, and the same items in every language. Remember that a parent item with children can't be reached by its own url, so link to that page from inside its menu. Then check the header on desktop, with the keyboard, and in the mobile menu. ``` **Build a mega menu** ```text Turn the "[MENU NAME]" item in headerPrimary into a mega menu in every src/config/menu..json. Use hasMegaMenu: true with menus as groups of { enable, name, description, icon, url, weight }, following the shape documented in AGENTS.md under "Menus and Mega Menu". Add the cta card with [DETAILS] and the bottom bar with [TEXT, LABEL, URL]. The bar also shows the phone from contactInfo in src/i18n/.json. ``` **Add a page made of existing sections** ```text Create a page at /[slug]/ with these sections: [PageHeader, FeaturesGrid, TestimonialSection, CallToAction]. Follow the "Add a new page" skill in SKILLS.md: copy src/pages/[...lang]/about.astro, keep getStaticPaths with generatePaths(), and compose it from the section components with their copy coming from the existing section content files. Add "[slug]" to headerPrimary in every src/config/menu..json, then run npm run astro-check. ``` **Remove pages I don't need** ```text I don't need these pages: [LIST, for example /changelog/, /testimonial/, /integration/]. For each one, delete its route file in src/pages/[...lang]/ and its content folder in src/content/, remove it from src/lib/utils/aiContent.ts if it is listed there, then remove every link to it from each src/config/menu..json and from content files (search for the URL). Run npm run astro-check and npm run build, and fix anything they report. ``` ### Languages **Use English only** ```text I only need English. Set enable = false under [settings.multilingual] in src/config/config.toml. Don't delete any files yet. Then tell me exactly what npm run toml:watch and npm run remove-multilingual would do, and which lines I should remove from netlify.toml. ``` **Add a language** ```text Add [LANGUAGE] (code "[xx]", folder "[name]", locale "[xx-XX]", social locale "[xx_XX]") and keep the other languages. Follow the "Add or remove a language" skill in SKILLS.md: run npm run generate-multilingual-content with those values, add a /[xx]/* block to netlify.toml, and add a font entry to src/config/fonts.json if the script needs its own font. Then translate the copied content folders, src/config/menu.[xx].json, and src/i18n/[xx].json, keeping every key, icon name, URL, and number. If it is a right-to-left language, say so and use --dir rtl. ``` **Improve the Arabic or French translation** ```text The [Arabic | French] content is machine translated. Review src/content/[FOLDER]/ [arabic | french] and src/i18n/[ar | fr].json and rewrite the text so it reads naturally for a [finance | banking] audience. Keep every key, number, URL, and icon name exactly as it is, and don't change the English files. For Arabic, keep numbers, emails, and URLs left to right. ``` ### Forms, SEO, And Launch **Connect the contact form** ```text Connect the contact form to [Formspree with form ID xxxx | formsubmit.co with [EMAIL] | Netlify Forms]. Update contactFormAction and contactFormProvider in src/config/config.toml, following the comments next to them. Don't change the form fields. ``` **Change the contact form fields** ```text The contact form should ask for: [LIST OF FIELDS]. Edit form.inputs in src/content/sections/english/contact-section.md, and make the same change in the french and arabic copies. Don't edit widgets/ContactForm.astro. Keep the existing field shape and the required flags, and keep the labels translated per language. ``` **Set your business details** ```text My details are: address [ADDRESS], phone [PHONE], email [EMAIL]. Put them in contactInfo in every src/i18n/.json, translating only the labels. Also update the social links in src/config/social.json ([LIST OF URLS]) and set "enable": false on the networks I don't use. ``` **Write SEO descriptions** ```text For each page's -index.md in src/content/*/english/ and each file in src/content/pages/english/, write a metaDescription of 140-160 characters based on that page's real content. Only add or change metaDescription. Then do the french and arabic versions. ``` **Pre-launch review** ```text Review this site before launch and list what is still demo content. Check: baseUrl in [site] in src/config/config.toml (it ships as a pages.dev URL), contactFormAction, formAction under [settings.subscription], contactInfo in every src/i18n/.json (the sample address, phone, and email), the download button URLs under [[settings.downloadButtons]], social links in src/config/social.json, every price in src/content/sections/*/pricing-section.md, the legal pages in src/content/pages/, the sample authors in src/content/author/, any "#" or example.com links in the menus and content, and any remaining "Finzo" in visible text. Don't change files: list the file and the line for each item. ``` ### Fix Problems **Explain and fix an error** ```text npm run [dev | build | astro-check] fails with this error: [PASTE THE FULL ERROR] Explain the cause in one sentence, then fix it with the smallest change. Don't change unrelated files. ``` **A change doesn't show up** ```text I changed [WHAT] in [FILE] but the page [URL] still shows the old version. Find where that page gets this text: check its route in src/pages/[...lang]/, the content prop that route passes to the section, and the section file in src/content/sections/english/. Tell me which one wins and why. Don't change anything yet. ``` **Fix the Arabic layout** ```text On [PAGE] at /ar/, [WHAT LOOKS WRONG]. Follow the RTL Rules in AGENTS.md: replace physical classes with logical ones, add rtl: handling for translate-x, transform origins, and gradients, and add any direction-bearing icon to the rtlFlipIcons list in src/layouts/helpers/Icons.astro rather than at the call site. Then tell me what to check at /ar/. ```