Select your language
Select other languages

Automatic translation

Loading translator…

Magoo

Your
pre-design system library

Everything you need to know about component interaction design BEFORE building your design system.
Don't reinvent the wheel. Start the right way!

29 components · 5 categories

INTERACTION DESIGN ACCESSIBILITY ACCEPTANCE CRITERIA

Explore the library

Component interactions directly affect accessibility. Learn about interaction design, interaction methods, considerations, and how to write acceptance criteria for more effective component development.

Structure

Messages

Navigation

Hidden elements

Forms

Content version: 1.5.0

Changelog

Content changes, from newest to oldest.

Version 1.5.0

  • Adds plain-language quick guides for Modal, Button, and Input text while preserving the full guidance.
  • Prepares the Magoo in Figma skill for reviewing and documenting behavior.
  • Aligns local snapshot versions and validates differences between package, lockfile, catalog, and components.
  • Extends quick guides to all 29 components, with framed panels, 1rem paragraphs, and English translations.
  • Adds indexes for the five categories and breadcrumbs linking to parent levels with an unlinked current page.
  • Highlights Magoo with Figma on the homepage, with beginner setup guidance and a skill download.
  • Fixes validation to work in the npm package without a lockfile and includes the skill in the distribution.

Version 1.4.0

  • Adds US English as the second native website language, with a translated homepage and documentation for all 29 components; Brazilian Portuguese remains the primary language.
  • Centralizes translations and routes in JSON files to simplify adding languages, with Portuguese at /pt-br and English at /en.
  • Translates English URLs, preserves the component and section when switching languages, and redirects previous routes.
  • Maintains a canonical URL for each language and updates hreflang, the sitemap, Open Graph, and Twitter Cards.
  • Adds lists and accessible names to the main menu and language selection, with native buttons, selection state, and a responsive layout.
  • Keeps Google Translate for other languages, with the Select other languages label associated with the combo box for screen readers only.
  • Displays only the Tudo é Acessibilidade logo in the English footer, removing the institutional phrase and divider from the image.
  • Standardizes HTML indentation and keeps opening tags and their attributes on one line, with automatic checks after the build.
  • Fixes Apache rules to serve /en and /pt-br without trailing slashes and prevent the English homepage access error.
  • Updates deployment documentation and static discovery for agents; the MCP server and the guidance it retrieves remain in Brazilian Portuguese.

Version 1.3.4

  • Fixes the arrows on homepage links and automatically updates the component and category counts.

Version 1.3.3

  • Reviews the Gherkin guidance and fixes punctuation in the introductions to eight components.

Version 1.3.2

  • Adds the changelog to the homepage, with a history of changes in a modal.

Version 1.3.1

  • Fixes code markup in the Tabbar guide and restores the author's text on internal pages.

Version 1.3.0

  • Adds Tabbar under Structure, with guidance on navigating between destinations and switching panels.

Version 1.2.0

  • Adds Form validation under Messages, with errors next to fields, an error summary, and guidance on correcting errors.

Version 1.1.3

  • Expands the references for the four input types with design systems and specific examples.

Version 1.1.2

  • Standardizes the Gherkin for the four input types, including keyboards and screen readers on desktop and mobile devices.

Version 1.1.1

  • Adds code markup to mentions of keys and key combinations in the guidance.

Version 1.1.0

  • Adds Input "text", Input "email", Input "search" and Input "password" under Forms.
  • Includes rules for showing and hiding passwords, with a text button and guidance on icons.

Version 1.0.1

  • Updates installation and usage instructions, anchor navigation, translation, license, FAQ, and guidance by role.

Who is Magoo for?

UI designers

Design states, visual hierarchy, and feedback that make every component clear and consistent beyond its appearance.

UX designers

Explore behaviors and interaction methods to anticipate needs, reduce barriers, and guide more inclusive journeys.

Product Designers

Connect interface and experience decisions to expected behaviors before documenting your design system.

Product Owners

Use the questions and acceptance criteria to clarify requirements, align the team, and define a complete delivery.

Test analysts

Turn scenarios and considerations into test cases to check components using different interaction methods.

Developers

Understand states, keyboard interactions, and expected feedback to implement accessible components from the start.

How to use?

Instructions for including Magoo in your design system

Use Magoo as a reference to define, document, and verify behavior. Choose your role in the tabs below for guidance on applying it to your design system.

From reference to implementation

  1. Record the reference. In each component's documentation, include the corresponding Magoo page link, the author's name, the version used, and the date accessed. Use the public URL rather than a local preview address.
  2. Map the behaviors. Map the guidance to your component's variants, states, and actions. Document keyboard operation, focus management, and expected feedback for each interaction.
  3. Adapt to your context. Use the behavior as a reference for your implementation, regardless of framework. Apply your system's tokens and styles and record differences in behavior, reasons, and usage instructions.
  4. Define verifiable criteria. Turn scenarios into acceptance criteria using Given, When, and Then. Link these criteria to tests and the documented component, for example in Storybook or a documentation page.
  5. Validate and track revisions. Test the implementation with keyboards, screen readers, touch, and zoom. Record results and reassess adaptations when the reference or component changes. The reference alone does not prove an implementation is accessible.

Document design decisions

  1. Choose the component in Magoo. Read the interaction design, interaction methods, and considerations before designing the states.
  2. Record decisions in your design system. Document states, keyboard navigation, focus, and the adaptations needed for your project.
  3. Include the reference. Include the component link, the version used, and the date accessed in your design system documentation.

Turn guidance into checks

  1. Consult the Gherkin scenarios. Identify the initial conditions, actions, and expected results for each component.
  2. Adapt cases to the product. Cover states, errors, keyboard navigation, focus, screen readers, touch, and zoom.
  3. Record evidence. Associate each result with the component version, test environment, and acceptance criterion.
  4. Review with the team. Document differences and repeat tests after fixes or behavioral changes.

Example request to a connected assistant: “Consult the Modal acceptance criteria in the Magoo MCP. Organize a manual testing checklist, keeping the version and separating original scenarios from suggested additional cases.”

Consulting the MCP does not run tests or prove an implementation is accessible.

Align scope and acceptance criteria

  1. Identify the components being delivered. Use the catalog to discuss expected behavior with design, development, and testing.
  2. Include criteria in tasks. Record interactions and verifiable results before starting implementation.
  3. Document decisions. Explain behavioral adaptations and the instructions people need to understand these changes.
  4. Track validation. Link the delivery to test evidence and the version of the reference used.

Example request to a connected assistant: “Consult the Select component in Magoo and help write acceptance criteria for this delivery. Distinguish library content from product-specific recommendations.”

Instructions for using Magoo with Figma

Review states, discover pending decisions, and prepare behavior annotations using guides for all 29 components. You can start without writing code.

A skill is a set of instructions for the assistant. Choose the version for direct use in the Figma agent or the version for Codex connected to Figma.

Use directly in the Figma agent

Download the Markdown file and, in the Figma Design or Make chat, open Skills → Add skill → Upload a file. Select the file and click Add. Use /magoo-figma-native to start.

This version reads the library published on the web. If the agent cannot access the sources, attach the requested component JSON files. The file does not install the Magoo MCP.

Download skill in Portuguese (MD)

Download skill in English (MD)

Use through Codex: follow these steps

  1. 1. Open Codex on your computer

    Install the app and sign in. You also need a Figma account with access to the file you want to review.

    Open the official Codex guide (external link, opens in a new tab)

  2. 2. Connect your Figma account

    In Codex, open Plugins, find Figma, and choose to install it. Sign in to Figma and authorize access when prompted. Return to Codex to continue.

    See Figma’s official walkthrough (external link, opens in a new tab)

  3. 3. Download the Magoo in Figma skill

    Download the ZIP and extract it. On Mac, double-clicking usually works; on Windows, use Extract All. You will get a folder named magoo-figma. Keep it somewhere easy to find.

    Download Magoo in Figma skill (ZIP)

  4. 4. Ask Codex to install the skill

    Drag the skill file into the Codex window or provide the folder location on your computer and send the request below, replacing the bracketed text with the real path. You do not need to edit the files.

    Install the magoo-figma skill from [folder path on my computer] for my personal use. Check that it is available and tell me if I need to start a new conversation.
  5. 5. Connect the Magoo library

    The skill organizes the work but needs to consult the library. Configure the Magoo connection using the MCP instructions on this page. MCP is the connection that lets an assistant consult another tool.

    Go to Magoo setup (opens the section on this page)

  6. 6. Copy your component’s link in Figma

    Open the file, select the component or frame you want reviewed, and copy the selection’s link. Paste the link in Codex with this request:

    Use $magoo-figma to review this component: [paste the Figma link]. Explain in plain language what is visible, what I need to document, and what needs implementation checks. Consult Magoo and report the version used.

How to know you are ready

Ask the assistant to confirm it can find the skill, consult Magoo, and read the linked component. If anything is missing, it should explain which connection needs attention. To write annotations in Figma, request that action and identify the destination file.

Guides for all 29 components are part of version 1.5.0. When setting up Magoo, use the version shown on this page and ask the assistant to confirm the version consulted. Older connections need updating and restarting.

Instructions for using Magoo with your preferred AI

You can ask your AI to consult Magoo before suggesting how a component should work. To do so, you need to connect the library once. This connection is called MCP .

Prefer not to configure anything? Browse the components here on the website and copy the passage you want to discuss with your AI.

  1. Prepare your computer. You need Node.js 20.19 or later installed. It allows the connection to run on your computer. If you don't have it yet, download the installer from nodejs.org (external link, opens in a new tab) and follow the installation instructions.
  2. Open your AI settings. Look for the option to add an MCP server or ask the AI itself how to add one. Not every application supports this connection: it needs to let you enter a command to run on your computer. If it only asks for a URL, that option does not work with the current version of Magoo.
  3. Copy the details below. Fill each field with the value shown. You don't need to understand the commands or create an npm account.
Name
magoo
Connection type
STDIO (local)
Command
npx
Arguments
-y @acessibilidade/magoo-mcp@1.5.0

If the application asks for separate arguments, add -y and @acessibilidade/magoo-mcp@1.5.0 as two items.

Save and start chatting. If Magoo does not appear among the connections, close and reopen the application. The first time, it needs internet access to download the library.

Try this request: “Consult Magoo and explain how a modal should work with the keyboard. State the library version used.”

Magoo provides guidance for AI to consult. It does not automatically change your project or design file.

FREQUENTLY ASKED QUESTIONS

About Magoo

Magoo is a character from a 1949 cartoon, with some episodes broadcast in Brazil in the 1970s and 1980s. So if you know who Magoo is, you're probably well over 40... :)

Magoo was a wealthy retiree who found himself in a series of comic situations because of his extreme nearsightedness. The key point was that he did not recognize his difficulty seeing things.

When I thought of a name for a possible library, this was the first name that came to mind. Read this Wikipedia article about Mr. Magoo (external link, opens in a new tab) .

While developing various courses and lessons, students often asked where they could look up component interaction patterns. However, the references we had were either in English, in books such as Alan Cooper's About Face, or in libraries no longer updated, such as Yahoo YUI (User Interface Library). In that context, this library began as a resource for training delivered by Marcelo Sales.

The name "Magoo" was originally created for other purposes, but the projects were brought together with the idea of publishing this library openly.

No. You can browse all components directly on this website. Installing Node.js and setting up the MCP are only necessary to connect the library to an assistant that supports local servers.

No. Magoo provides documentation of interaction behaviors. The package exposes this content through a read-only MCP; visual and functional implementation remains part of your design system, using your team's technologies.

In a compatible assistant, request guidance on states, keyboard navigation, focus, and acceptance criteria. Use the responses to document decisions and specifications. Magoo’s MCP supplies the guidance. With the magoo-figma skill and a Figma integration connected to the assistant, you can review the file and request behavior annotations.

Yes. Magoo's code and original content are distributed under the MIT license, which permits use, adaptation, and redistribution, including commercially. Keep the authorship notice and license in copies or substantial portions. External materials cited have their own terms of use.

The reference helps define behaviors and acceptance criteria, but accessibility depends on implementation and context. Validate with keyboards, screen readers, zoom, and people with disabilities. Document and explain any behavioral adaptations.

Record the component, URL, version used, and date. When adopting a new version, review the differences and your system's tests. The MCP setup shown pins version 1.5.0 and does not automatically switch to a future version.

Send tips, suggestions, and improvements to oi@tudoeacessibilidade.com.br with the Magoo project in the subject line.