Prompt Library
Skill level: Beginner
Copy a prompt, replace the parts in [BRACKETS], and send it to your assistant. Each prompt names the Techlo 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
Read AGENTS.md and SKILLS.md, then look at src/config/config.toml,src/pages/[...lang]/index.astro, src/content/homepage/english/-index.md, andsrc/content/sections/english/banner.md. Summarize in 10 bullet points how this Astro theme isorganized: where text lives, how a page picks its sections, how a named block in a page'sfrontmatter overrides a section, how options.layout works and when a homepage route's contentprop wins over it, how a page picks its header layout and position, and which collectionsnpm run astro-check actually validates. Don't change any files yet.Describe your company once, then reuse it
Here is my company. Use it for every copywriting request in this conversation:- Name: [COMPANY NAME]- What we do: [ONE SENTENCE]- Who it is for: [AUDIENCE]- Services: [3 TO 6 SERVICES]- Tone: direct, technical, no buzzwords.Never invent client names, testimonials, project results, certifications, partner badges, uptimefigures, 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
Change the brand from "Techlo" to "[NAME]". In src/config/config.toml update [site] title,description, tagline, and logoText, and [seo] author. Then check `site` in everysrc/i18n/<language>.json, and search src/content and src/config for any remaining "Techlo" invisible text and replace it. Don't rename files or code identifiers.Apply brand colors
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-primary-soft, --color-theme-dark,--color-theme-light, and --color-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'ttouch the typography tokens. List the values you chose.Change the fonts
Replace Sora with [GOOGLE FONT] for --font-primary in src/config/fonts.json. Keep the cssVariablename, the weights, the fallback, and the IBM Plex Sans Arabic entry (it is loaded only on Arabicpages). Don't edit any CSS file. Remind me to restart npm run dev.Use my logo
I added my logo at src/assets/images/[FILE].svg. In src/config/config.toml set [site] logo to"/images/[FILE].svg", set logoAlternate if I have a light version, adjust logoWidth andlogoHeight to keep its 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, Headers, And Sections
Pick one homepage and drop the others
I want the [second | third] homepage as my main homepage. Replace the sections ofsrc/pages/[...lang]/index.astro with the ones in src/pages/[...lang]/home-[two | three].astro,and copy the frontmatter of src/content/homepage/english/home-[two | three].md intosrc/content/homepage/english/-index.md (same for french and arabic). Keep the headerLayout andheaderPosition props that route uses. Then delete the other homepage routes and their contentfiles, and remove them from the Home menu in every src/config/menu.<language>.json. Runnpm run astro-check.Rewrite the homepage for my company
Rewrite the English homepage text for my company. The homepage issrc/pages/[...lang]/index.astro. Edit the named blocks insrc/content/homepage/english/-index.md and the section files it uses insrc/content/sections/english/. Keep every key, option, icon name, image path, and the number ofitems in each list. Only change text values. Then write the french and arabic versions, withidentical keys.Reorder or remove homepage sections
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 areno longer used. Then run npm run astro-check.Change a section on one page only
On [PAGE, for example /about/], change [WHAT] for that page only. Add or edit the matching namedblock 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 insrc/content/sections/english/ alone so other pages keep the current text. Do the same for frenchand arabic.Switch a section layout
Change the [services | projects | team | blog | testimonials] section to the "[VALUE]" layout.Set options.layout in the matching file in src/content/sections/english/, using a value from thecomment next to it, and make the same change in the french and arabic copies. If the homepageroute passes a layout through that section's content prop, change it there too, because the routewins. Then run npm run astro-check.Change the header or footer background on a page
On [PAGE ROUTE in src/pages/[...lang]/], use headerLayout "[one | two | three]" andheaderPosition "[fixed | static | sticky]", and [a dark | a light] footer background. SetheaderLayout, headerPosition, and hasFooterDarkBackground on <Base> in that route file only.Note that header layout three has no language switcher, so don't use it if I keep more than onelanguage.Content
Navigation And Pages
Clean up the menus
In every src/config/menu.<language>.json: keep only links to the pages I use ([LIST]), and set"enable": false on the rest in headerPrimary and in the footer columns. Keep the JSON shape, theweight values, and the same items in every language. Then check the header on desktop, with thekeyboard, and in the mobile menu.Edit the Services mega menu
The Services mega menu in headerPrimary should list these services: [LIST, with a one-linedescription and an icon for each]. Update it in every src/config/menu.<language>.json, keepingthe hasMegaMenu shape documented in AGENTS.md under "Menus and Mega Menu" ({ enable, name,description, icon, url, weight } inside menus). Update the cta card with [DETAILS] and the bottombar with [TEXT, LABEL, URL], or set their enable to false.Add a page made of existing sections
Create a page at /[slug]/ with these sections: [AboutSection, Features, StatsSection,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 innamed blocks in a new content file, using block names from src/sections.schema.ts. Add "[slug]"to headerPrimary in every src/config/menu.<language>.json, then run npm run astro-check.Remove pages I don’t need
I don't need these pages: [LIST, for example /projects/, /faq/, /testimonials/]. For each one,delete its route file or folder 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 itfrom each src/config/menu.<language>.json and from content files (search for the URL). Runnpm run astro-check and npm run build, and fix anything they report.Languages
Use English only
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 andnpm run remove-multilingual would do, and which lines I should remove from netlify.toml.Add a language
Add [LANGUAGE] (code "[xx]", folder "[name]", locale "[xx-XX]", social locale "[xx_XX]") and keepthe other languages. Follow the "Add or remove a language" skill in SKILLS.md: runnpm run generate-multilingual-content with that code, add a /[xx]/* block to netlify.toml, andadd a font entry to src/config/fonts.json if the script needs its own font. Then translate thecopied content folders, src/config/menu.[xx].json, and src/i18n/[xx].json, keeping every key,icon name, URL, number, and customSlug.Improve the Arabic or French translation
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 technicalaudience. Keep every key, number, URL, icon name, and customSlug exactly as it is, and don'tchange the English files. For Arabic, keep numbers, emails, and URLs left to right.Forms, SEO, And Launch
Connect the contact form
Connect the contact form to [Formspree with form ID xxxx | formsubmit.co with [EMAIL] | NetlifyForms]. Update contactFormAction and contactFormProvider in src/config/config.toml, following thecomments next to them. Don't change the form fields.Change the contact form fields
The contact form should ask for: [LIST OF FIELDS]. Edit the form block insrc/content/sections/english/contact-section.md, which every contact form shares, and make thesame change in the french and arabic copies. If contact-section-two.md has its own form block,update that too. Follow inputFieldSchema in src/sections.schema.ts, don't editwidgets/ContactForm.astro, and keep the required flags.Add a newsletter form
No page renders a newsletter form today. Add widgets/SubscriptionForm.astro to the footer, setformAction under [settings.subscription] in src/config/config.toml to [MY MAILCHIMP URL], andmake sure its labels come from subscription in src/i18n/<language>.json in every language. Thenrun npm run astro-check and tell me what to test.Write SEO descriptions
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 orchange metaDescription. Then do the french and arabic versions.Pre-launch review
Review this site before launch and list what is still demo content. Check: baseUrl in [site] insrc/config/config.toml (it ships as https://example.com and the build warns about it),contactFormAction, [settings.contactInfo], src/content/contact/*/-index.md,src/content/sections/*/contact-section-two.md, contactInfo in every src/i18n/<language>.json,social links in src/config/social.json, every price insrc/content/sections/*/pricing-section.md, the sample projects in src/content/projects/, thesample team in src/content/team/, the sample quotes in src/content/testimonials/, the legal pagesin src/content/pages/, any "#" or example.com links in the menus and content, and any remaining"Techlo" in visible text. Don't change files: list the file and the line for each item.Fix Problems
Explain and fix an error
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 unrelatedfiles.A change doesn’t show up
I changed [WHAT] in [FILE] but the page [URL] still shows the old version. Find where that pagegets this text: check the named block in the page's frontmatter, whether that block name is a keyof sectionsSchema in src/sections.schema.ts, the content prop the route passes to the section,and the section file in src/content/sections/english/. Remember that older components readdifferently named files (Features.astro reads features.md). Tell me which one wins and why.Don't change anything yet.Fix the Arabic layout
On [PAGE] at /ar/, [WHAT LOOKS WRONG]. Follow the RTL Rules in AGENTS.md: replace physicalclasses with logical ones, add rtl: handling for translate-x, transform origins, and gradients,and add any direction-bearing icon to the rtlFlipIcons list insrc/layouts/helpers/Icons.astro rather than at the call site. Then tell me what to check at /ar/.