Responsive Accessibility

Community

Owl-Listener

responsive-accessibility

Design responsive layouts that maintain accessibility across screen sizes, zoom levels, and orientations. Use when designing responsive interfaces, testing zoom behaviour, or reviewing layouts across devices. Triggers on: responsive, zoom, reflow, breakpoint, mobile accessibility, screen size, orientation, viewport, 200% zoom, text scaling, layout shift, horizontal scroll.

Overview

Publisher	Owl-Listener
Repository	`inclusive-design-skills`
Skill name	`responsive-accessibility`
Stars	108
Forks	28
Bundled files	Instructions only
License	MIT
Links	Skill source Repository

Markdown instructions
A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.
Works with any LLM
AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.
Self-contained
Everything the model needs lives in the instructions — no extra files to sync.
Open source
Published by Owl-Listener on GitHub. Read the source before you install it.

Installation

Install the Responsive Accessibility AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

Open the app and go to Plugins → Skills.
Choose "Install from GitHub".
Paste the skill folder URL below and confirm.
https://github.com/Owl-Listener/inclusive-design-skills/tree/main/adaptive-interfaces/skills/responsive-accessibility
Enable the skill in any chat where you want it available.

Store

Installed

Skills

Add skills

Import one or more skills from a public GitHub folder or a local .skill or .zip archive, or SKILL.md file.

From GitHub URLFrom .skill, .zip, or SKILL.md

GitHub repo or folder

https://github.com/Owl-Listener/inclusive-design-skills/tree/main/adaptive-interfaces/skills/responsive-accessibility

Points to a single skill folder, or any folder that contains multiple skills. Public repos only.

CancelContinue

Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills

git clone --depth 1 https://github.com/Owl-Listener/inclusive-design-skills.git /tmp/inclusive-design-skills
mkdir -p .claude/skills
cp -r /tmp/inclusive-design-skills/adaptive-interfaces/skills/responsive-accessibility .claude/skills/responsive-accessibility

Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Responsive Accessibility in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Responsive Accessibility on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Responsive Accessibility is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

Loaded only when it is needed
The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.
Switch models mid-chat
Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

Responsive Accessibility

Responsive design isn't just about screen size — it's about ensuring accessibility holds at every viewport, zoom level, and orientation. A layout that works at 1440px but breaks at 200% zoom has failed the users who need zoom most.

Core Requirements

Text Reflow at 200% Zoom

All content must reflow into a single column at 200% zoom with no horizontal scrolling
This is WCAG 2.1 Level AA (Success Criterion 1.4.10)
Test by setting browser zoom to 200% at 1280px viewport — the result must be usable without horizontal scroll
Exceptions: data tables, maps, and diagrams may scroll horizontally if no information is lost

Text Scaling to 200%

All text must remain readable when scaled to 200%
Text must not be clipped, truncated, or overlap other elements
Use relative units (rem, em, %) not fixed pixels for text
Line height and spacing should scale proportionally

Orientation Freedom

Content must work in both portrait and landscape orientation
Never lock orientation unless essential to function (a piano app may need landscape; a form never does)
Some users mount devices in fixed orientations due to physical setup — locking orientation can block access entirely

Design Patterns

Fluid Layout

Use flexible grids that adapt rather than fixed breakpoints that snap
Set max-width on content containers for readability (45–75 characters per line)
Let whitespace compress before content reflows
Avoid fixed-width elements that force horizontal scroll

Content Priority

Define what's essential at each breakpoint
On small screens: show core content, provide access to rest
Don't hide critical functionality behind "desktop only" features
Navigation should adapt (hamburger menu is fine) but all destinations must remain accessible

Touch and Pointer Adaptation

At small viewports: increase touch targets to 48px minimum
At large viewports: pointer-friendly sizes are acceptable (24px minimum)
Detect pointer type with @media (pointer: coarse) for touch-first sizing
Spacing between targets should increase on touch devices

Zoom-Safe Patterns

Sticky headers must not consume excessive vertical space at zoom (a header that takes 30% of the viewport at 200% zoom is a barrier)
Fixed-position elements must be tested at 200% zoom
Tooltips and popovers must remain visible and reachable at zoom
Modal dialogs must be scrollable if content exceeds viewport at zoom

Testing Protocol

Test at 100%, 150%, and 200% browser zoom on a 1280px viewport
Test at 320px viewport width (mobile equivalent)
Test in both portrait and landscape orientation
Test with system font size set to largest option
At each test point verify: no horizontal scroll, no clipped text, no overlapping elements, all interactions functional

Assessment Checklist

Content reflows at 200% zoom without horizontal scrolling
Text remains readable at 200% scaling
Both orientations are supported
Touch targets increase at small viewports
Sticky/fixed elements don't dominate the viewport at zoom
No functionality is lost at any supported viewport size
All text uses relative units

Frequently asked questions

What does the Responsive Accessibility AI skill do?

Why use Responsive Accessibility on TypingMind?

Because you install it once and use it with any model. Responsive Accessibility is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Responsive Accessibility in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/Owl-Listener/inclusive-design-skills/tree/main/adaptive-interfaces/skills/responsive-accessibility. TypingMind reads its SKILL.md and installs it as a skill you can enable per chat.

Which AI models can use Responsive Accessibility?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Responsive Accessibility?

As many as you like. As long as a model supports skills, you can use Responsive Accessibility with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Responsive Accessibility AI skill free?

Yes. It is published on GitHub by Owl-Listener under the MIT license. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

View all

Tldraw Offline

NousResearch

OrganizationPopular

Drive and script tldraw offline canvases with an agent.

Brand Guidelines

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual…

Solid

Write, port, review, or test Solid 2 UI in OpenClaw (Control UI, plugin views, Canvas hosts), including state ownership, Lit interop during the migration, native overlays, testing, performance, and…

Canvas

Present hosted widget documents on a connected macOS panel and control panel visibility or navigation.

Overview

Installation

Install in TypingMind

Install in another agent

Use it in TypingMind

Works with any AI model

Skill instructions

Responsive Accessibility

Core Requirements

Text Reflow at 200% Zoom

Text Scaling to 200%

Orientation Freedom

Design Patterns

Fluid Layout

Content Priority

Touch and Pointer Adaptation

Zoom-Safe Patterns

Testing Protocol

Assessment Checklist

Frequently asked questions

Related AI Skills

Set up your own AI workspace now