Prompt Library
Skill level: Beginner
Copy a prompt, replace the parts in [BRACKETS], and send it to your assistant. Each prompt names the Taskly 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/home-2.md, and src/content/sections/english/hero-section.md. Summarizein 10 bullet points how this Astro theme is organized: where text lives, how pages pick theirsections, how a page overrides a section (named blocks and the merge rules), and how the `layout`field works. 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: calm, friendly, concrete. No hype words.Confirm with one line, and don't change any files yet.Brand
Rename the site
Change the brand from "Taskly" to "[NAME]". In src/config/config.toml update [site] title, logoText,tagline, description, and [seo] author and keywords. Update "tagline" under "site" in src/i18n/en.jsonand fr.json. Then search src/content and src/i18n for any remaining "Taskly" in visible text,including src/content/widgets/*/dashboard-mockup.md, and replace it. Don't rename files or codeidentifiers.Rebrand the colors
Follow the "Rebrand colors / typography" skill in SKILLS.md. My brand color is [HEX] and mybutton color is [HEX | keep sun]. In src/styles/theme.css, inside :root, set --theme-primary tothe brand color (links, focus rings, the featured plan, the logo tile: white text sits on it, socheck the contrast), set --theme-primary-soft to a very light tint of it, set --theme-sun and--theme-accent to the button color (the "fill" button is dark text on it, so keep it light), and[keep | adjust to match] the pastels --theme-lime, --theme-sky, --theme-orchid, --theme-mint,--theme-lemon, --theme-lilac, and the soft tints --theme-sun-soft, --theme-lime-soft,--theme-sky-soft. If a pastel goes from light to dark or back, update its text color insrc/lib/pastel.ts. Don't rename any variable, and don't change the pastel names used in contentfiles. List the old and new values.Change the fonts
Replace [Figtree | Bricolage Grotesque] with [GOOGLE FONT] in src/config/fonts.json. Keep itscssVariable ("--font-primary" for body text, "--font-heading" for headings), the weights, and thefallback. Keep DM Mono (--font-note) and Instrument Serif (--font-display) unless I say otherwise.Don't edit CSS files.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 logoWidth and logoHeight to keep its proportions at about 32px tall,and set logoText to [NAME OR ""] (the wordmark footer on / prints logoText, or the site titlewhen it is empty). If the logo is dark, set logoDark to a light version for the dark footer. Also set [site.favicon] image to a square version and tell meto run npm run generate-favicons and npm run generate-og-image.Homepage
Rewrite the homepage for my product
Rewrite the English homepage text for my product. The homepage is src/pages/[...lang]/index.astro.Edit the section files it uses in src/content/sections/english/ (hero-section.md, logos-section.md,why-section.md, features-section.md, integrations-section.md, overview-section.md,testimonials-section.md, pricing-section.md, faq-section.md, call-to-action.md) and any namedblocks in src/content/homepage/english/-index.md. Keep every key, option, layout, icon name, and thenumber of items in each list. Only change text values. Keep the sample reviews, ratings, prices,and numbers and list them for me to replace. Then write the French version in the matchingfrench/ files.Change a homepage layout
On [/ | /home-2/ | /home-3/], use the "[LAYOUT]" layout of the [hero | logos | why | integrations |testimonials | faq] section. Set `layout` in the matching named block ofsrc/content/homepage/english/[-index.md | home-2.md | home-3.md] and the french/ file (add the blockif it is missing). Copy the allowed values from the comment next to `layout` in the section filein src/content/sections/english/. If the layout reads extra fields (for example rating for thesplit hero, or pill and signup for the signup hero), check they are filled in. Don't change theother homepages. Then run npm run astro-check and tell me to open the page.Make another homepage the main one
I want the layout of [/home-2/ | /home-3/] as my main homepage at /. Replace the sections insrc/pages/[...lang]/index.astro with the ones in src/pages/[...lang]/[home-2 | home-3].astro, andcopy the named blocks and footerLayout from src/content/homepage/english/[home-2 | home-3].mdinto src/content/homepage/english/-index.md (same for french). Keep the metaTitle and metaDescription of-index.md. Then delete home-2.astro and home-3.astro and their content files, and remove the "Home"menu from src/config/menu.en.json and menu.fr.json and the "Homepages" footer column.Reorder or remove homepage sections
On the homepage (src/pages/[...lang]/index.astro), move [SECTION] above [SECTION] and remove[SECTION]. Keep the hero first: the header floats over it. Only edit the route file: don't deleteany content files. Remove imports that are no longer used.Replace the dashboard sample data
Rewrite the sample data of the coded product dashboard insrc/content/widgets/english/dashboard-mockup.md for my product: tabs, greeting, actions, and theperformance, focus, project, team, and activity cards. Keep every key, the three legend items, thetwo activity periods, and the same number of labels and values. Then do the same in french/.Sections And Pages
Add a section
Follow the "Add a new section" skill in SKILLS.md. Create a [DESCRIBE IT, for example "logo wallwith a quote"] section: src/layouts/components/sections/[Name]Section.astro, a content filesrc/content/sections/english/[name]-section.md and french/, a schema in src/sections.schema.tsregistered in sectionsSchema as [name]Section, and comments in the .md that list every option.Reuse SectionHeading, Button, DynamicIcon, OptimizedImage, the tint names (pastel), and the themetokens; no arbitrary Tailwind values, no hardcoded ids. Add it to [PAGE ROUTE] after [SECTION].Then run npm run astro-check and tell me which page to open.Add a page made of existing sections
Follow the "Add a new page" skill in SKILLS.md. Create a /[slug]/ page from existing sections:PageHeader, then [SECTIONS]. Add the route at src/pages/[...lang]/[slug].astro (copy the pattern ofsrc/pages/[...lang]/features.astro), a content collection "[slug]" with the page schema insrc/content.config.ts, and src/content/[slug]/english/-index.md and french/-index.md with thetitle, meta fields, pageHeader, and a named block per section. Don't name it like an existingsection file. Add it to the header menu in menu.en.json and menu.fr.json. Run npm run astro-check.Add a simple text page
Add a text page at /[slug]/: create src/content/pages/english/[slug].md and french/[slug].md withthe same frontmatter as privacy-policy.md (title, description, date, pageHeader, contentPage), andthis body: [TEXT]. src/pages/[...lang]/[page].astro renders it, so don't add a route. Link it fromthe footer in src/config/menu.en.json and menu.fr.json.Remove pages I don’t need
I don't need these pages: [/home-2/, /home-3/, /status/, /careers/, ...]. For each one, delete itsroute in src/pages/[...lang]/ and its content folder or files in src/content/, remove its linksfrom src/config/menu.en.json and menu.fr.json, and search src/content and src/i18n for links to it.Keep /elements/ out of the menus. Then run npm run build and fix any broken import.Collections
Add a template
Add a project template "[NAME]" to the templates gallery. Createsrc/content/templates/english/[slug].md by copying the frontmatter shape of bug-triage.md: title,description, category (one of the categories in templates-catalog-section.md, or a new one),view (board | list | calendar | timeline), color (sun | lime | sky | lilac | orchid | mint |lemon | white | cream), icon (a Lucide name), taskCount, audience, columns with example tasks,related, and weight. Then write the French version in src/content/templates/french/[slug].md withthe same file name.Add an open role
Add an open role "[TITLE]" to the careers page. Create src/content/careers/english/[slug].md bycopying the shape of backend-engineer.md: title, description, date, department (one of thedepartments in careers-list-section.md), workplace (remote | hybrid | onsite), location, type(full-time | part-time | contract | internship), salary, salaryRange, applyUrl [URL], weight, and aMarkdown body with "About the role", "What you will do", and "What you bring". Use only facts Igive you: [DETAILS]. Then write the French version with the same file name. Delete the sampleroles I don't keep: [LIST].Edit the status page data
Update the status page data in src/content/sections/english/status-section.md (and french/): setthe components to [NAMES AND DESCRIPTIONS], each with status operational | degraded | outage |maintenance and a 90-day `history` string (one letter per day, oldest first: o operational,d degraded, x outage, m maintenance, - no data). Add this incident at the top of incidents.items:[DATE, TITLE, STATUS, AFFECTED COMPONENTS, UPDATES]. Keep the banner and state labels. Leave`uptime` empty where I don't give a number, so it is computed from the history.Write a blog post
Write a blog post about [TOPIC] for [AUDIENCE]. Create src/content/blog/english/[slug].md with thesame frontmatter as the existing posts (title, description, image, date, author, categories,tags, draft: false). Use an existing author from src/content/author/english/ or [NEW AUTHOR]. About800 words, with ## headings. Then write the French version with the same file name.Add a changelog entry
Add a changelog release [VERSION] dated [DATE]: [WHAT CHANGED]. Createsrc/content/changelog/english/[slug].md with the same frontmatter as the existing releases (title,description, date, version, tags, highlights). Then the French version with the same file name.Write pricing plans
Replace the sample plans in src/content/sections/english/pricing-section.md with my plans: [PLANS,MONTHLY AND YEARLY PRICES, FEATURES]. Keep the structure of each plan (name, color, description,price, period, featured, badge, features, button). Update the comparison table inplan-compare-section.md to match (one value per plan in each row). Check the pricingSection blocksin src/content/homepage/english/home-2.md and src/content/pricing/english/-index.md too, because ablock's `plans` list replaces the section's list. Then French.Write the FAQ
Rewrite the FAQ in src/content/sections/english/faq-section.md for my product: [TOPICS]. Fill`items` (used on the homepages) with 6 questions, and `groups` (used on /faq/) with 4 to 6 topics,each with a title, a Lucide icon, a color, and 3 to 5 questions. Answers in 1 to 3 sentences, usingonly facts I give you: [FACTS]. Then French.Navigation, Forms, And Launch
Clean up the menus
Update the menus in src/config/menu.en.json and menu.fr.json. Header: [Product (dropdown: ...),Solutions, Pricing, Resources (mega menu: ...), Contact]. Hide the "Home" and "Pages" demo menus.Footer columns: [Product, Resources, Company]. Use Lucide icon names, keep "enable": true on everyvisible item, and translate the names for French.Pick the footers
Set the site footers with footerLayout (default | wordmark | newsletter | tiles) in the pagefrontmatter: [wordmark] on / (src/content/homepage/english/-index.md), and [default] on everyother page. Make the same change in the french/ files. Don't edit the footer components. Thenrun npm run astro-check and tell me which pages use which footer.Connect the contact form
Set up the contact form for [Formsubmit with my email | Formspree form ID | Netlify Forms]. EditcontactFormAction and contactFormProvider in src/config/config.toml and tell me any step I mustdo on the provider's side.Pre-launch review
Review this site before launch and give me a checklist of what is still demo content. Check:[site] baseUrl in src/config/config.toml (it ships as https://example.com), contactFormAction,[settings.subscription] formAction, form.action in src/content/auth/, the contact details incontact-cards-section.md and contact-message-section.md, social links in src/config/social.json,the "Home" and "Pages" menus, the announcement bar, the legal pages in src/content/pages/, the sample careers roles, the status page data, the dashboardsample data, ratings and reviews, customer logos, placeholder "#" links in the help center, andany remaining demo brand names. Also tell me to check that PUBLIC_DEMO_MODE is not set on my host.Don't change files: list the file and 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 unrelated files.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 its route in src/pages/[...lang]/, the named blocks in its content file,the section file in src/content/sections/english/, and src/content/widgets/english/. Tell me whichfile wins and why.