# Customize Taskly With AI

## Customize Taskly With AI

**Skill level:** Beginner · **Works with:** Claude Code, Cursor, OpenAI Codex, GitHub Copilot, Gemini CLI, Windsurf, ChatGPT, and any other assistant

Taskly is built so that an AI assistant can change it safely. Three things make that work:

1. **Content is separate from code.** Almost every change is an edit to a Markdown, TOML, or JSON file, which is the kind of task AI tools do well.
2. **Every content file explains itself.** Section and page files list their options and allowed values in comments, so the assistant can see what is possible without guessing.
3. **The theme ships instruction files for AI tools.** They describe the folder structure and the rules for changing it. The AI coding tools in the table below load their file when you open the project folder.

### The AI Instruction Files In Taskly
These files are in the theme folder: most at the top level, and three in the `.github/`, `.cursor/rules/`, and `.windsurf/rules/` subfolders. You don't need to edit them; they are there for your assistant.

| File                                    | Loaded automatically by                       | What it contains                                       |
| --------------------------------------- | --------------------------------------------- | ------------------------------------------------------ |
| `AGENTS.md`                             | OpenAI Codex, Cursor, Windsurf, and GitHub Copilot (coding agent, VS Code, CLI). Claude Code and Gemini CLI get it through their own file (next rows) | The full rules: structure, section conventions, the design system (palette, fonts, shapes, buttons, homepages, menus), page blocks, validation limits, styling, components, forms, languages, customizing for your own site, and checks |
| `CLAUDE.md`                             | Claude Code                                   | Imports `AGENTS.md` (the `@AGENTS.md` line), plus a short summary |
| `GEMINI.md`                             | Gemini CLI                                    | Imports `AGENTS.md` (the `@./AGENTS.md` line), plus the same summary |
| `.github/copilot-instructions.md`       | GitHub Copilot                                | A short summary that points to `AGENTS.md` and `SKILLS.md` |
| `.cursor/rules/theme-architecture.mdc`  | Cursor (always on)                            | The architecture rules for Cursor                      |
| `.windsurf/rules/theme-architecture.md` | Windsurf (always on)                          | The architecture rules for Windsurf                    |
| `SKILLS.md`                             | No tool loads it on its own: mention it in your request | Step-by-step recipes: add a section or page, add or reorder homepage sections, edit a collection, add or remove a language, rebrand colors and fonts, add an icon, configure forms, menus, and SEO, verify |
| `README.md`                             | None: it is written for you                   | The install commands, where the main files live, the AI tool table, and a checklist for launch |

These files tell an assistant to keep text in `src/content/`, to make every change in English and French, to reuse Taskly's buttons, icons, and tint names, to use the theme's color tokens instead of raw values, and to run `npm run astro-check` when it finishes. `AGENTS.md` also covers the things that are easy to get wrong:

- **Page blocks**: how a page's named block merges with the section file, and that a misnamed block is ignored without an error
- **Validation limits**: section files are checked when the page renders, so the assistant checks each value against the comment next to it and opens the page
- **Customizing for your own site**: change content and config first, don't invent testimonials, customer names, metrics, ratings, or prices, and check every changed page at phone and desktop width, in every language you changed

### Point Your Tool At The Rules
<CardGrid>
  <Card title="Claude Code" icon="laptop">
    Run `claude` in the `taskly` folder. It reads `CLAUDE.md`, which pulls in
    `AGENTS.md`. For bigger jobs, add "Follow the matching recipe in
    SKILLS.md" to your request.
  </Card>
  <Card title="Cursor" icon="laptop">
    **File → Open Folder** and pick `taskly`. Cursor reads `AGENTS.md` and the
    always-on rule in `.cursor/rules/`. Use Agent mode for multi-file changes.
  </Card>
  <Card title="OpenAI Codex" icon="laptop">
    Start Codex (CLI, IDE extension, or cloud) in the `taskly` folder. It reads
    `AGENTS.md` from the project root on its own.
  </Card>
  <Card title="Copilot, Windsurf, Gemini CLI" icon="laptop">
    Open the `taskly` folder. Each tool loads its own file from the table
    above. If answers ignore the rules, start with "Read AGENTS.md first."
  </Card>
</CardGrid>

### Two Ways To Work With AI
<CardGrid>
  <Card title="AI that can open your files" icon="laptop">
    Claude Code, Cursor, Codex, Windsurf, GitHub Copilot in VS Code, Gemini
    CLI. Open the `taskly` project folder in the tool and describe the change.
    It loads its instruction file, edits the files, and can run the checks.
    **This is the best way to work.**
  </Card>
  <Card title="Chat assistants" icon="comment">
    ChatGPT, Claude, or Gemini in the browser. They can't see your project, so
    you paste `AGENTS.md` and the file you want changed, and copy the answer
    back. Fine for rewriting text, one file at a time.
  </Card>
</CardGrid>

The [AI Workflow](/taskly/ai-customization/ai-workflow/) page shows both step by step.

### What AI Is Great At In Taskly
- Rewriting all demo copy for your product, in English and French
- Filling collections: templates, solutions, integrations, careers, blog, changelog, help articles
- Changing plans and prices, FAQ answers, the status page data, and menus
- Replacing the sample data in the coded dashboard (`dashboard-mockup.md`)
- Picking layouts and reordering sections
- Translating the site into another language
- Adding a new page from existing sections
- Explaining an error message and fixing it

### What To Check Yourself
- **Facts and numbers.** AI writes convincing copy. It can add customer quotes, ratings ("4.9/5 from 3,000+ teams"), or usage numbers that were not in your brief, even though Taskly's instruction files tell it not to. Check every quote, metric, price, and claim before you publish.
- **Longer names and labels.** A name or label longer than the sample can be cut off or wrap. Check the header, menu labels, buttons, the hero title, and the small labels inside the product mockups at phone width.
- **Legal pages.** The privacy policy, terms, and cookie policy are placeholders. Have them reviewed for your business.
- **The result in the browser.** Look at each changed page on a phone-sized window and in every language you changed.
- **Forms.** Submit each form once on the live site.

<Aside type="tip" title="Five rules for good results">
  1. One task per request. "Change the hero" works better than "redo the site".
  2. Name the file when you know it. Every page in these docs tells you which one.
  3. Say what must stay the same: "keep every key and option, only change the text".
  4. Ask for both languages, or say you only use English.
  5. Save a checkpoint first (a git commit or a copy of the folder), so any change can be undone.
</Aside>

Ready? Go to the [Prompt Library](/taskly/ai-customization/prompt-library/) for copy-paste prompts.