Prompt Library
Skill level: Beginner
Copy a prompt, replace the parts in [BRACKETS], and send it to your assistant. Each prompt names the Stella 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, and src/content/sections/english/home-hero.md. Summarize in 10bullet points how this Astro theme is organized: where text lives, how a page picks its sections,how a page overrides a section with the content prop, which pages keep their copy in sectionsrather than in their own file, and which collections npm run astro-check actually validates.Don't change any files yet.Describe your product once, then reuse it
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: short, clear, confident. No hype words.Never invent customer names, testimonials, user counts, uptime figures, funding, orcertifications. 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 "Stella" to "[NAME]". In src/config/config.toml update [site] title,description, tagline, and logoText, brandName in [settings], and [seo] author. Then setseo.description and seo.tagline in every src/i18n/<language>.json that has them, and searchsrc/content and src/config for any remaining "Stella" in visible text and replace it. Don'trename 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-theme-light and --color-theme-dark tomatch. Keep at least 4.5:1 contrast for text on --color-body and on --color-theme-dark. Don't addarbitrary color values anywhere else, and don't touch the typography tokens. List the values youchose.Change the fonts
Replace Figtree with [GOOGLE FONT] for --font-primary in src/config/fonts.json. Keep InstrumentSerif for --font-secondary unless I say otherwise, and keep the IBM Plex Sans Arabic entry (it isloaded only on Arabic pages). Keep the cssVariable names, the weights, and the fallbacks. Don'tedit 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", adjust logoWidth and logoHeight to keep its proportions, and set logoTextto [NAME OR ""]. Also set image under [site.favicon] to the same file, and tell me to runnpm run generate-favicons. Remember that a content path like /images/... meanssrc/assets/images/..., while public/images/ holds og-image.jpg and the favicons.Homepage And Sections
Rewrite the homepage for my product
Rewrite the English homepage text for my product. The homepage issrc/pages/[...lang]/index.astro, and its copy is in the section files insrc/content/sections/english/ (src/content/homepage/english/-index.md holds only the title andmeta). Keep every key, option, icon name, image path, and the number of items in each list. Onlychange text values. Then write the french and arabic versions, with identical 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 ROUTE in src/pages/[...lang]/], change [WHAT] for that page only. Pass the valuesthrough the section component's content prop in that route, the way company.astro passes theour-values file to BenefitsSection. Leave the file in src/content/sections/english/ alone soother pages keep the current text. Note that a block in a page's frontmatter does nothing unlessthe route passes it.Switch a section variant
Change [the pricing table to the comparison layout | the testimonials to the minimal layout | thecustomers logos to the light version]. These are props on the section in its route file:PricingSection layout="comparison", TestimonialSection minimalLayout, Customers lightLogo,HowItWorks hideButton, and imagePosition insrc/content/sections/<language>/features-section-two.md. Change only what I asked for, then runnpm 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, footerMenu, footerMenuOne, and footerMenuTwo. Keepthe JSON shape, the weight values, and the same items in every language. The footer column titlesare footer.colTitleOne and footer.colTitleTwo in src/i18n/<language>.json. Then check the headeron 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].Add a page made of existing sections
Create a page at /[slug]/ with these sections: [PageHeader, FeaturesSection, Customers,CallToAction]. Follow the "Add a new page" skill in SKILLS.md: copysrc/pages/[...lang]/faq.astro, keep its getStaticPaths, and compose it from the sectioncomponents, passing the content prop where a section needs page-specific values. Add "[slug]" toheaderPrimary 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 /career/, /changelog/, /integration/]. 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 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. Set seo.description and seo.tagline there, or leave them empty to usethe config.toml values.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 SaaSaudience. 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 widgets/ContactForm.astro. Keep the existing field shape and therequired flags, and keep the labels translated per language.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], contactInfo in every src/i18n/<language>.json (the sample address,phone, and email), social links in src/config/social.json, every price and the comparison tablein src/content/sections/*/pricing-section.md, the sample integrations in src/content/integration/,the sample roles in src/content/career/, the sample quotes in src/content/testimonial/, thechangelog entries, the legal pages in src/content/pages/, any "#" or example.com links in themenus and content, and any remaining "Stella" in visible text. Don't change files: list the fileand 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 route in src/pages/[...lang]/, whether it passes a content prop to thatsection, 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
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. Note that elements positioned byscripts in pixels, such as the pricing toggle thumb, stay physical on purpose. Then tell me whatto check at /ar/.