Help center
Open dashboard

Atarim for Frontend Developers: Aligning Development with Design

Every ticket arrives with the element path, the URL, the browser, and a screenshot — so the first thing you do is fix it, not reproduce it.

Atarim team Updated 6 Aug 2026 · 14 min read
Role-Specific Guides
An Atarim task with element context a developer can build from
Before you start

Relevant for

  • Frontend developers implementing design feedback — whether the work arrives from a designer, a QA pass, or a client clicking things on a live site.

Required knowledge

  • Browser devtools and CSS selectors. Nothing Atarim-specific beyond finding a task.

Tools & resources needed

  • A team member role or above, access to the projects you work on, and optionally the WordPress plugin or an MCP-capable coding agent.

The expensive part of implementing feedback is rarely the code. It is working out which element “the button” refers to, on which page, at which breakpoint, in which browser — and then discovering the reporter meant something else. Atarim collects that context at the moment the task is created, because the reporter was standing on the page when they made it.

The context you would otherwise have to ask for is captured when the task is created.

The expensive part of implementing feedback is rarely the code. It is working out which element “the button” refers to, on which page, at which breakpoint, in which browser — and then discovering the reporter meant something else.

Atarim collects that context at the moment the task is created, because the reporter was standing on the page when they made it. This guide is about extracting it efficiently and closing the loop back to the person who reported it.

Reading a Task’s Technical Details

Open a task and expand Technical Details. This is the panel that removes most of the back-and-forth.

FieldWhat it gives you
Element PathThe selector for the element the reporter clicked. Copyable in one action.
Page URLThe exact address they were on, also copyable.
BrowserWhat they were using, which is usually the answer when something reproduces for them and not for you.
Screen SizeThe viewport at the time — the breakpoint the issue actually occurs at.
Website Name and Page NameWhich project and page the task belongs to.
Created ByWho to ask when the comment is ambiguous.
Task ID and Share LinkA stable reference and a copyable link for a commit message or a standup.
Due Date and Add TagsScheduling and categorisation, editable in place.
The Technical Details panel on a task, showing element path, page URL, browser and screen size
Technical Details — the context you would otherwise have to ask for
Copy the element path before you read the thread
Paste it into your devtools console first. Nine times out of ten it lands you on the element and the rest of the thread makes immediate sense. Read Understanding User Roles And Permissions

When the Element Has Moved

Code changes. A task pinned to an element that no longer exists reports Element not found on this page, and offers Remap to element so you can point it at the current markup rather than losing the thread.

This matters more than it sounds. A refactor that renames a component orphans every task attached to it, and remapping is the difference between a task list that stays trustworthy and one people stop believing.

A task reporting that its element was not found, with the option to remap it
When markup changes, Remap to element reattaches the task
Remap orphaned tasks as part of the refactor that broke them
The person who just moved the markup knows where it went; the person picking the task up next week does not. Explore The Visual Collaboration Tools Overview

Working Across Breakpoints

The collaboration view carries a device menu for previewing at Desktop, Tablet, and Mobile. Feedback left while a view is active is recorded against that view, so a task that only reproduces on mobile arrives already saying so.

It works in both directions: check your fix at the breakpoint the task was reported at, then sweep the others before you mark it done. The Screen Size field tells you where to start.

The device preview menu offering desktop, tablet and mobile views
Feedback records the viewport it was left in
Responsive bugs are reported where they are seen
If the reporter was on mobile, the task carries that. You do not have to guess whether “the layout is broken” means at 1440 or at 375 — the task already answers it. See Responsive Testing Across Breakpoints

Applying Changes to WordPress with Do It

Where the project is a WordPress site with the Atarim plugin connected, some changes can be applied without leaving the task. The control is Do It, and its tooltip is exactly that — apply this change.

What you seeWhat it means
Do ItThe change can be applied from here.
QueuedAccepted and applying in the background.
UndoReverts a change that was applied.
Log in to your WordPress to use Do ItYou are not authenticated against the site yet.
Connect WordPress to use Do ItThe plugin is not connected. The window offers to install it from your site URL, or to download it.
More Do It integrations are coming soonThe feature is WordPress-only for now.
Do It writes to the live site
Treat it like any other production change. It is well suited to copy fixes and small content corrections, and poorly suited to anything you would normally want in version control and through review. Undo exists, but a revert is not the same as never having shipped it. Learn More About The Atarim WordPress Plugin

Connecting a Coding Agent Over MCP

Atarim exposes an MCP endpoint so AI coding agents can read the work directly. The panel describes it as connecting Atarim to your AI coding agents over MCP, where one connection exposes every site in the workspace.

Instructions:

  • Open Settings and find Atarim MCP under Connected Apps.
  • Under Connect an agent, choose your agent. The options are Claude, Codex, and Other — Claude is selected by default.
  • Copy the Server URL using the copy control beside the field. A confirmation reads Server URL copied to clipboard.
  • Paste the endpoint into your agent’s MCP configuration.
  • The Do It control on a task for a connected WordPress site
    Choose your agent, then copy the Server URL
    DetailWhat to know
    ScopeOne connection covers every site in that workspace.
    PermissionsThe token inherits the workspace’s permissions — agents can only act on sites you already have access to.
    AgentsClaude and Codex are named explicitly; Other covers any MCP-capable client.
    Server URLRead-only. Copy it rather than retyping it.
    The token carries your access, not less
    Because it inherits workspace permissions, an agent connected with your token can reach everything you can. Connect from an account whose access matches what you actually want an agent touching, and keep the endpoint out of anything shared. See Atarim MCP

    Working with the InnerCircle

    Atarim’s AI team reviews pages the same way your reviewers do, and two of its members are aimed squarely at things a frontend developer would otherwise find in QA.

    AgentWhat it looks at
    GlitchFunctionality — interactions that break, and pinpointing what is breaking them.
    NaviUser experience and accessibility.
    IndexSEO and performance.
    PixelDesign — layout and spacing execution.
    LexiContent and tone.
    ClaroClarity, including chasing vague client feedback before it reaches you.

    Findings come back in the Review tab in the sidebar, listed as subtasks under the review and grouped by the viewport they were found in. Selecting a finding takes you to it on the page — so, as with a human-reported task, the breakpoint comes with the issue rather than needing to be worked out.

    Instructions:

  • Open the project in the collaboration view and start a page review from the sidebar. At least one agent must be enabled.
  • Let the review run. A review already in progress blocks a second one until it finishes.
  • Open the Review tab and work through what came back. Findings are grouped by viewport, and selecting one takes you to it on the page.
  • A page review being run from the sidebar in Atarim
    Running a page review — at least one agent must be enabled

    The Checks the AI Can Run for You

    The agents are not limited to reading a page. Ask in an AI chat and, where relevant, they can run real diagnostics against a public URL. These are run on request rather than automatically as part of a review:

  • Lighthouse audit — performance, accessibility, best practices, SEO, and PWA, returning scores out of 100 with actionable fixes.
  • Accessibility scan — a WCAG 2.1 pass returning violations with severity and the affected nodes.
  • Colour contrast check — a WCAG 2.0/2.1 contrast ratio with AA and AAA pass or fail for normal text, large text, and UI components.
  • Browser verification — a headless browser driven through a scripted sequence against a URL, returning the document status and the results of each interaction.
  • These checks need a publicly reachable URL
    The Lighthouse and accessibility scans explicitly exclude authenticated and internal URLs. Staging behind basic auth, a VPN, or an IP allowlist will not return useful results — run them against a public environment, or expect them to fail.

    AI Chat Inside a Task

    Each task thread carries an AI control, described as somewhere to ask AI to clarify, suggest ideas, or sanity-check your thinking, based on that thread. For a developer this is most useful on the ambiguous ones — work out what a comment is actually asking for before you either build the wrong thing or spend a day waiting on a reply.

    A task can also be switched between a regular general task and an AI review, so a thread that turns out to need a proper look can become one without being recreated.

    Run a review before you hand work back, not before you start
    Finding a contrast failure or a broken interaction yourself is a fix; having a client find it after you marked something Pending Review is a round trip and a credibility cost. Read Catch Bugs Before Users Do With Glitch

    Moving Work Through Statuses

    Tasks carry four statuses and four priorities. Using them consistently is what lets a designer or PM see progress without asking you.

    StatusWhen to set it
    OpenUntouched. Anything sitting here is unclaimed.
    In ProgressYou have started. Set it when you pick the task up, not when you finish.
    Pending ReviewImplemented and waiting on the reporter to confirm. This is the handback.
    CompleteConfirmed and closed.
    Moving tasks between columns on a board
    Boards show the same queue as columns rather than a list

    Priorities run Low, Medium, High, and Critical. A quick-complete control also exists for one-line fixes, with a matching tooltip for setting a task back to In Progress if it turns out not to be done.

    Move to Pending Review rather than Complete
    When a client or designer raised the task, closing it yourself removes their prompt to look, and the task quietly reopens as a new comment a week later. Explore Setting Due Dates And Prioritizing Tasks

    Talking to Your Team Without Talking to the Client

    Comments and tasks can be marked internal, which hides them from guests and clients. This is where the implementation conversation belongs — why an approach will not work, what it will cost, what you are going to push back on.

    It keeps the client thread readable. They see the decision; they do not see the three messages it took to reach it.

    Check the label before you type
    Where the feature is not on the plan, the control reports it as unavailable rather than silently posting publicly — but confirm it is enabled before you rely on it. Read Internal Tasks

    Finding Your Work

    Open the Tasks tab in the sidebar and the filter controls appear with it. Assigned To Me is the one you will use most; scope switches between the current page and the whole project; and sorting by Priority, Status, Date, or Unread reorders the queue. Search runs across tasks and comments in real time.

    The same controls appear on the Pages tab. If you cannot see them at all, filtering is not enabled for your role.

    Filter once at the start of the day
    Assigned To Me, sorted by Priority — rather than re-reading the whole project list every time you finish something. See Kanban Boards

    Checking Work Against the Design

    Where the designs live in Atarim too, the source of truth is one click away rather than in a chat message from three weeks ago. Designs are versioned, so you can confirm you are building against the round that was actually approved rather than the one that happened to be open.

    A project can also carry a Figma link, which puts the design source on the project itself instead of in someone’s bookmarks.

    Check the version before you build
    A design with several versions will happily show you an old one. If a task refers to something you cannot find in the design, confirm which version it was raised against before assuming the task is wrong. Learn More About Atarim For Design Leads

    Getting Tasks Into Your Own Tools

    Most teams do not want a second place to look. Atarim pushes tasks out to the tracker you already use — Jira, ClickUp, Trello, Asana, Basecamp, Teamwork, and monday.com among them — with Slack for notifications and webhooks or Zapier for anything custom.

    The Integrations panel in Atarim settings
    Integrations push tasks out to the tracker your team already uses
    Push to your tracker, but keep the conversation in Atarim
    The value is the screenshot, the element path, and the reporter being one reply away — and that is exactly what does not survive being flattened into a ticket description. Explore Webhooks

    Benefits for a Frontend Developer

    BenefitIn practice
    No reproduction stepBrowser, viewport, URL, and element path arrive with the task.
    A selector, not a descriptionCopy the element path instead of hunting for “the button near the top”.
    The reporter is reachableAmbiguity is one reply away in the same thread, not an email chain.
    Breakpoint comes with the bugResponsive issues state where they occur.
    Tasks survive refactorsRemapping keeps feedback attached when markup moves.
    A QA pass before QAGlitch, Navi, and Index can run Lighthouse, WCAG, and contrast checks against a public URL before anyone else looks.
    Agents can read the queueMCP exposes the work to Claude or Codex under your existing permissions.

    Example Use Cases

    SituationWhat to do
    “This is broken” with no detailOpen Technical Details. Browser and screen size usually explain why it works for you.
    A spacing fix on an unfamiliar pageCopy the element path into devtools and go straight to it.
    A refactor orphaned a batch of tasksRemap them to the new markup as part of the same change.
    A one-line copy correction on WordPressApply it with Do It rather than opening a branch for it.
    Implementing a design you did not attend the review forCheck the design version the task was raised against before you build.
    Handing work back to a clientSet Pending Review rather than Complete, so they know to look.

    Known Limitations

  • Do It is WordPress-only. The interface states that more integrations are coming, and it requires the plugin connected and a WordPress login.
  • Element paths reflect the page as it was. After markup changes, tasks need remapping.
  • MCP tokens inherit workspace permissions rather than being separately scoped.
  • Internal tasks, attachments, and notes depend on your plan and report a lock where unavailable.
  • Technical Details visibility is permission-controlled, so not every role sees the full panel.
  • AI diagnostic checks need a public URL. Lighthouse and accessibility scans exclude authenticated and internal addresses.
  • An AI review must have at least one agent enabled, and only one review can run at a time.
  • Screenshots capture the moment of reporting and do not update as the page changes.
  • Design status and task status are separate — closing every task does not approve a design.
  • FAQs

    Where do I find the CSS selector for a reported element?

    In the task’s Technical Details panel, as Element Path. It can be copied in one action.

    What happens to tasks when I refactor the markup?

    They report that the element was not found and offer Remap to element so you can reattach them.

    Does the task tell me which breakpoint a bug happens at?

    Yes. Screen Size records the viewport at the time of reporting.

    Can I apply fixes without leaving Atarim?

    On connected WordPress sites, using Do It. It is WordPress-only at present.

    Can I undo a Do It change?

    Yes, with Undo, which reverts the change.

    Which coding agents connect over MCP?

    Claude and Codex are named, and Other covers any MCP-capable client.

    What can an MCP-connected agent access?

    Only what you can. The token inherits your workspace permissions.

    Can the AI run real accessibility or performance checks?

    Yes — Lighthouse audits, WCAG 2.1 scans, and contrast checks, against publicly reachable URLs.

    Can I use AI on a single task rather than a whole page?

    Yes. Each task thread has an AI control for clarifying or sanity-checking that specific thread.

    Should I mark a task Complete or Pending Review?

    Pending Review when someone else raised it, so they get prompted to confirm. Complete once they have.

    Can I discuss implementation without the client seeing?

    Yes, using internal notes and tasks, where enabled on your plan.

    Can tasks go into Jira or ClickUp instead?

    Yes. Atarim integrates with the major trackers, plus Slack, webhooks, and Zapier.

    Common issues

    • “Element not found on this page” — the markup changed. Use Remap to element to point the task at the current element.
    • A bug you cannot reproduce — check Browser and Screen Size in Technical Details and match the reporter’s conditions.
    • “Log in to your WordPress to use Do It” — authenticate against the WordPress site, then retry.
    • “Connect WordPress to use Do It” — the plugin is not connected. Install it from the prompt using your site URL.
    • Do It shows Queued and nothing changes yet — it is applying in the background. Give it a moment before retrying.
    • Your agent cannot reach a site over MCP — the token inherits workspace permissions. Confirm your account has access to that site.
    • Technical Details is missing fields — your role does not carry full visibility. Ask an administrator.
    • An AI accessibility or Lighthouse check returns nothing useful — the URL is probably not publicly reachable. Run it against a public environment.
    • The AI review will not start — enable at least one agent, and wait for any review already in progress to finish.
    • A task refers to something not in the design — check which design version it was raised against.
    • The screenshot does not match the page — it is a snapshot from when the task was made. The page has changed since.

    Conclusion

    Open the task, copy the element path, check the browser and viewport, fix it at that breakpoint, sweep the others, and hand it back as Pending Review rather than closing it yourself. The context is already in the ticket — the discipline is using it before you start guessing.

    Understanding how feedback reaches you makes it easier to work with. Explore Atarim For Clients And Stakeholders

    Tips & best practices

    • Copy the element path into devtools before reading the thread.
    • Check Browser and Screen Size before declaring something unreproducible.
    • Remap orphaned tasks during the refactor that orphaned them.
    • Set In Progress when you pick a task up, not when you finish it.
    • Hand client-raised work back as Pending Review, never straight to Complete.
    • Keep implementation debate in internal notes so the client thread stays readable.
    • Use Do It for copy and content, not for anything that belongs in version control.
    • Run an AI review before handing work back, not before you start.
    • Point diagnostic checks at a public URL — they cannot reach protected staging.
    • Connect MCP from an account whose access matches what an agent should reach.

    Related articles