# 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 Folex 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, src/content/homepage/english/-index.md, and src/content/sections/english/banner-agency.md. Summarize in 10 bullet points how this Astro theme is organized: where text lives, how a page picks its sections, how a named block in a page's frontmatter overrides a section, where the block names come from, how options.layout works, and which collections npm run astro-check actually validates. Don't change any files yet. ``` **Describe your studio once, then reuse it** ```text Here is my studio. Use it for every copywriting request in this conversation: - Name: [STUDIO OR YOUR NAME] - What we make: [ONE SENTENCE] - Who it is for: [AUDIENCE] - Services: [3 TO 6 SERVICES] - Tone: confident, concrete, no buzzwords. Never invent client names, testimonials, awards, follower counts, or prices. 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 "Folex" to "[NAME]". In src/config/config.toml update [site] title and logoText, and [seo] author. Then set the tagline and description in `site` in every src/i18n/.json, and search src/content and src/config for any remaining "Folex" in visible text and replace it. 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, --color-theme-light, and --color-theme-dark to match. Keep at least 4.5:1 contrast for text on --color-body and on --color-theme-dark. Don't add arbitrary color values anywhere else, and don't touch the typography tokens. List the values you chose. ``` **Change the fonts** ```text Replace Poppins with [GOOGLE FONT] for --font-primary and Unbounded with [GOOGLE FONT] for --font-secondary in src/config/fonts.json. Keep the cssVariable names, the weights, the fallbacks, and the IBM Plex Sans Arabic entry (it is loaded only on Arabic pages). Don't edit any CSS file. Remind me to restart npm run dev. Unbounded is a wide display font: after the change, tell me which headings to check at 375 px. ``` **Use my logo** ```text I added my logo at src/assets/images/[FILE].svg and a light version at src/assets/images/[FILE]-light.svg. In src/config/config.toml set [site] logo and logoAlternate to those paths, adjust logoWidth and logoHeight to keep their proportions, and set logoText to [NAME OR ""]. Also set image under [site.favicon] to the main file, and tell me to run npm run generate-favicons. ``` ### Homepages And Sections **Pick one homepage and drop the others** ```text I want the [creative agency | startup agency | personal portfolio] homepage as my main homepage. Replace the sections of src/pages/[...lang]/index.astro with the ones in src/pages/[...lang]/[creative-agency | startup-agency | personal-portfolio].astro, and copy the named blocks from src/content/homepage/english/[FILE].md into src/content/homepage/english/-index.md (same for french and arabic). Then delete the other homepage routes and their content files, and remove them from the menus in every src/config/menu..json. Run npm run astro-check. ``` **Rewrite the homepage for my studio** ```text Rewrite the English homepage text for my studio. The homepage is src/pages/[...lang]/index.astro. Edit the named blocks in src/content/homepage/english/-index.md and 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. Then write the french and arabic versions, 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. Then run npm run astro-check. ``` **Change a section on one page only** ```text On [PAGE, for example /about/], change [WHAT] for that page only. Add or edit the matching named block in that page's frontmatter in src/content/[about-us | pricing | faq | contact]/english/ -index.md, using a block name that exists in src/sections.schema.ts. Leave the file in src/content/sections/english/ alone so the other pages keep the current text. Do the same for french and arabic. ``` **Switch a section layout** ```text Change the [portfolio | services | team | testimonial] section to the "[VALUE]" layout. Set options.layout in src/content/sections/english/[FILE].md, and use one of the values from the comment next to it. Make the same change in the french and arabic copies, then run npm run astro-check and tell me which pages use that section. ``` **Change the header style or footer on a page** ```text On [PAGE ROUTE in src/pages/[...lang]/], use footer layout "[footer-1 | footer-2 | footer-3]" and [a dark | a light] header over the banner. Set the footerLayout, headerPosition, and hasHeaderDarkBackground props on in that route file only. Don't change Base.astro. ``` ### Content **Replace the portfolio with my work** ```text Replace the sample projects with mine: [FOR EACH PROJECT: TITLE, CLIENT (only if I may show it), YEAR, CATEGORIES, 2-3 SENTENCE DESCRIPTION]. The entries are the files in src/content/portfolio/english/. Keep the frontmatter shape of portfolio-01.mdx (title, customSlug, description, date, categories, information) and the body structure. Use image paths under /images/portfolio/ and tell me which image files to add. Mark entries I don't need as draft: true rather than deleting them. Then add the french and arabic versions. ``` **Rewrite the services** ```text My services are: [LIST]. Rewrite the entries in src/content/services/english/, following the frontmatter of service-01.mdx (title, customSlug, description, date, icon, image) and keeping the body structure. Use icon paths that already exist under /images/icons/svg/services/. Then update src/content/sections/english/services-section.md so the section text matches, and do the french and arabic folders. ``` **Add team members** ```text Add my team to src/content/team/english/: [FOR EACH PERSON: NAME, ROLE, SHORT BIO, SOCIAL LINKS]. Copy the frontmatter of an existing entry in that folder, keep the same keys, and use image paths under /images/team/. Tell me which image files to add. Then add the french and arabic versions. ``` **Write pricing plans** ```text Update the plans in src/content/sections/english/pricing-section.md to: [PLAN NAME, PRICE, 3-6 FEATURES for each plan]. Keep the file's structure, the button shape, and the options documented in the comments. Mark [PLAN] as the featured one. Then copy the same numbers into the french and arabic versions and translate only the text. ``` **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. Use an existing image path and an existing author from src/content/author/english/. Use ## headings, and the MDX shortcodes from src/lib/shortcodes.ts (such as or ) where they help. Add the french and arabic versions. ``` **Write the FAQ** ```text Replace the questions in src/content/sections/english/faq-section.md with 8 questions a client of my studio would ask, with short, direct answers. Keep the file's structure and keys, and keep the same number of items. Then translate them into the french and arabic copies 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. [page].astro renders it, so no route file is needed. Add it to a 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, footerPrimary, footerSecondary, and footerTertiary. Keep the JSON shape, the weight values, and the same items in every language. 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 number from [settings.contactInfo] in config.toml. ``` **Add a page made of existing sections** ```text Create a page at /[slug]/ with these sections: [ServicesSection, Stats, Testimonial, CallToAction]. Follow the "Add a new page" skill in SKILLS.md: copy src/pages/[...lang]/ about.astro, keep its getStaticPaths, and compose it from the section components. Put the page's own copy in named blocks in a new content file, using block names from src/sections.schema.ts. 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 /faq/, /pricing/, /team/]. 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. 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 the fields 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 the phone and email in [settings.contactInfo] in src/config/config.toml, and the address in contactInfo.address in every src/i18n/.json (it may contain a
for the line break). 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 https://example.com), contactFormAction, formAction under [settings.subscription], [settings.contactInfo], contactInfo.address in every src/i18n/.json, social links in src/config/social.json, every price in src/content/sections/*/pricing-section.md, the sample projects in src/content/portfolio/, the sample team in src/content/team/, the legal pages in src/content/pages/, any "#" or example.com links in the menus and content, and any remaining "Folex" 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 the named block in the page's frontmatter, whether that block name is a key of sectionsSchema in src/sections.schema.ts, 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. Custom reveal effects live in src/styles/animation.css with their mirror in rtl.css. Then tell me what to check at /ar/. ```