Prompt Library
Skill level: Beginner
Copy a prompt, replace the parts in [BRACKETS], and send it to your assistant. Each prompt names the Looka 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/services-section.md. Summarize in 10 bullet points how this Astrotheme is organized: where text lives, how a page picks its sections, how a page block overrides asection and why the route file has to pass it in, where section options are documented, and whichcollections npm run astro-check actually validates. Don't change any files yet.Describe your firm once, then reuse it
Here is my firm. Use it for every copywriting request in this conversation:- Name: [FIRM NAME]- What we do: [ONE SENTENCE]- Industries we serve: [LIST]- Services: [3 TO 6 SERVICES]- Tone: professional, specific, no buzzwords.Never invent client names, testimonials, case-study results, team sizes, awards, or prices. Ifyou 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 "Looka" to "[NAME]". In src/config/config.toml update [site] title andlogoText, brandName in [settings] (the big footer text), and [seo] author. Then setseo.siteDescription and seo.tagline in every src/i18n/<language>.json, and search src/content andsrc/config for any remaining "Looka" in visible text and replace it. Don't rename files or codeidentifiers.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-secondary, --color-theme-dark, and--color-theme-light to match. Remember that --color-light is a grey text color, not a background.Keep at least 4.5:1 contrast for text on --color-body and on --color-theme-dark. Don't addarbitrary color values anywhere else. List the values you chose.Change the fonts
Replace DM Sans with [GOOGLE FONT] for --font-primary and Syne with [GOOGLE FONT] for--font-secondary in src/config/fonts.json. Keep the cssVariable names, the weights, thefallbacks, and the IBM Plex Sans Arabic entry (it is loaded only on Arabic pages). Don't edit anyCSS 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", adjust logoWidth and logoHeight to keep its proportions, and set logoTextto [NAME OR ""]. The footer uses a white version from src/assets/images/logo-white.svg, set insrc/layouts/components/global/Footer.astro: tell me what to put there. Also set image under[site.favicon] to the main file, and tell me to run npm run generate-favicons.Homepage And Sections
Rewrite the homepage for my firm
Rewrite the English homepage text for my firm. The homepage is src/pages/[...lang]/index.astro.Edit the blocks in src/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 blockin that page's frontmatter in src/content/[about | pricing | faq | contact]/english/-index.md,and make sure the route file in src/pages/[...lang]/ passes that block to the section with thecontent prop. Leave the file in src/content/sections/english/ alone so other pages keep thecurrent text. Do the same for french and arabic.Set section options
Change the [services | FAQ | case studies | blog] section options: [WHAT I WANT]. Use the optionsdocumented in AGENTS.md under "Sections and Page Blocks" (services: colorScheme, showServicesAs,cta, limit, creativeShape; FAQ: sectionLayout, minimalFaqLayout, faqLayoutOnly, showCategories;case studies: filter.layout, body.layout, body.card.layout, headType; blog: settings.card.layoutand single.layout). Set them in the matching content file, pick only values from the comment nextto each option, make the same change in french and arabic, then run npm run astro-check.Hide a section everywhere
Hide the [SECTION] everywhere. Set enable: false in src/content/sections/english/[FILE].md and inthe french and arabic copies. Don't delete the files or edit the routes.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, footerMenuQuickLink, footerMenuResources,footerMenuLegal, and footerMenu. Keep the JSON shape, the weight values, and the same items inevery language. Then check the header on desktop, with the keyboard, and in the mobile menu.Build a mega menu
Turn the "[MENU NAME]" item in headerPrimary into a mega menu in everysrc/config/menu.<language>.json. Use hasMegaMenu: true with menus as groups of{ enable, name, description, icon, url, weight }, following the shape documented in AGENTS.mdunder "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 [settings.contactInfo] in config.toml.Add a page made of existing sections
Create a page at /[slug]/ with these sections: [AboutUs, Achievements, Testimonial,CallToAction]. Follow the "Add a new page" skill in SKILLS.md: copysrc/pages/[...lang]/about.astro, keep its getStaticPaths, and compose it from the sectioncomponents. Put the page's own copy in blocks in a new content file and pass each block to itssection with the content prop. Add "[slug]" to headerPrimary in everysrc/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 /career/, /faq/, /pricing/]. For each one, delete itsroute file or folder in src/pages/[...lang]/ and its content folder in src/content/, remove itfrom src/lib/utils/aiContent.ts if it is listed there, then remove every link to it from eachsrc/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 those values, 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, and number. Remember that lists don't fall back: every collection needs its filesin the new language or those detail pages won't exist.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 corporateaudience. Keep every key, number, URL, and icon name exactly as it is, and don't change theEnglish 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 form.inputs insrc/content/sections/english/contact-section.md, and make the same change in the french andarabic copies. Don't edit ContactSection.astro, and don't replace the theme's form classes. Keepthe existing field shape and required flags. Note that each input's name is the label thatappears on the submission.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 a pages.dev URL), contactFormAction, formAction under[settings.subscription] (both ship as placeholders and nothing warns about them),[settings.contactInfo], the contact details in src/content/sections/*/contact-section.md andoffice-locations.md, social links in src/config/social.json, every price insrc/content/sections/*/pricing-section.md, the sample results in src/content/case-studies/, thesample team in src/content/team/, the sample roles in src/content/career/, the legal pages insrc/content/pages/, any "#" or example.com links in the menus and content, and any remaining"Looka" 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 block in the page's frontmatter, whether the route file insrc/pages/[...lang]/ passes that block to the section, and the section file insrc/content/sections/english/. If the field is in blog, services, case-studies, or pages, alsocheck whether src/content.config.ts lists it, because unknown keys are dropped. Tell me which onewins 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/.