Update to Agility CMS

{
  "description": "Build or fix a website front end that reads content from Agility CMS - fetching content and pages, rendering components, linked lists, images and rich text, caching and revalidation on publish, preview and Web Studio visual editing. Use when a developer is coding against Agility (Next.js or any framework), adding a component end to end, or debugging content that renders wrong or not at all.",
  "included_files": [],
  "name": "build-frontend",
  "skill_md_contents": "---\nname: build-frontend\ndescription: Build or fix a website front end that reads content from Agility CMS - fetching content and pages, rendering components, linked lists, images and rich text, caching and revalidation on publish, preview and Web Studio visual editing. Use when a developer is coding against Agility (Next.js or any framework), adding a component end to end, or debugging content that renders wrong or not at all.\n---\n\n# Build a front end on Agility CMS\n\n## Ground yourself first\n\n- Read the project's `AGENTS.md` or `CLAUDE.md` if it has one. It holds the\n  project's conventions and instance facts.\n- For SDK and API details, search Agility's documentation (the Agility\n  Knowledgebase MCP's `search_docs` and `fetch_doc`, if connected, or\n  https://agilitycms.com/docs). Do not guess method names or parameters.\n- For a new Next.js site, start from the Agility Next.js Starter\n  (https://github.com/agility/agilitycms-nextjs-starter) and extend its patterns.\n- Before writing code against a model, read it with the Agility CMS tools\n  (`get_component_model_details`, `get_content_model_details`) and use the real\n  field names.\n\n## Add a component end to end\n\n1. List existing models (`get_component_models`, `get_content_models`) and reuse\n   one if it fits.\n2. Create or update the model with the `content-modeling` skill, then read it\n   back.\n3. Write the component following the project's existing pattern. In the Next.js\n   starter: an async server component receives its content ID, fetches its own\n   fields through the project's data layer, and fetches linked lists separately\n   by reference name.\n4. Register it in the component registry under the model's reference name, or it\n   renders as \"not found\".\n5. Add sample content (saved as drafts) and check it in development.\n\n## Data rules that fail silently\n\n- **List limits:** content list calls return 10 items by default and at most 250\n  per request. Always pass `take`, and page with `skip` until you have read\n  `totalCount`.\n- **Field names** arrive with only the first letter lowercased: `Title` is\n  `fields.title`, but `URL` is `fields.uRL`.\n- **Values can arrive as strings:** numbers and booleans may come back as `\"12\"`\n  and `\"false\"` (which is truthy). Convert them in the data layer and type the\n  converted shape. Test date fields with a time near midnight; they can shift by\n  the instance's time zone.\n- **Linked content depth:** a field that links to a whole list can come back as\n  a stub with only the list's reference name. Fetch the list separately, or set\n  the link depth, according to the docs for your SDK.\n- **Reference names:** reads return container reference names lowercased. Use the\n  exact case from `get_containers` when writing.\n- **Missing items:** a deleted component can stay listed on a published page\n  until the page is republished. Make components render nothing when their item\n  is missing instead of throwing.\n\n## Caching and publishing\n\n- Route every CMS read through one data layer that sets cache tags, and have the\n  publish webhook revalidate exactly those tags. A read that skips the data layer,\n  or a tag that does not match what the webhook sends, works in development and\n  then updates only when the cache expires.\n- Development and preview read Staging content with the preview key. \"It works\n  locally\" does not prove content is published. Check the live site in a private\n  window.\n\n## Preview and Web Studio\n\n- Preview must validate the preview key, not just check that one is present.\n  Otherwise anyone can read drafts on the public site.\n- For Web Studio click-to-edit, the rendered HTML needs `data-agility-*`\n  attributes: `data-agility-component` only on a component's root element,\n  `data-agility-field` on each rendered field (the element must contain only\n  that field's value), `data-agility-nested-listitem` on items rendered from a\n  linked list, and `data-agility-html` on rich text. Search the docs for \"Web\n  Studio setup\" for the full list and the page and instance attributes.\n- The site must allow being framed by the Agility app, and an instance has one\n  preview domain, so plan multi-site preview routing early.\n\n## Before calling it done\n\nRun the project's build, which catches components that break on real content.\nThen check one page in preview and, after publishing, on the live site.\n"
}