Inclusive Design System

An agent skill for designing, building, and reviewing inclusive web experiences.

This project adapts Microsoft Inclusive Design principles for practical web design work. It helps teams move beyond accessibility checklists by identifying where an interface creates exclusion, learning from human diversity, and turning pronounced access needs into flexible web patterns that benefit many people.

What It Does

Use this skill to improve web products such as apps, dashboards, forms, onboarding flows, settings, support experiences, content systems, and AI-assisted interfaces.

It focuses on:

• Inclusive design strategy for web products
• Accessibility-aware frontend implementation
• Cognitive load, focus, recall, decision-making, and communication
• Neurodiversity and mental-health-informed product patterns
• Notifications, interruptions, guidance, onboarding, and settings
• AI and automation that preserve user agency and trust
• Research, co-design, evaluation, and human-centered success metrics

Core Principles

The skill follows Microsoft Inclusive Design's three principles:

1. Recognize exclusion.
2. Learn from diversity.
3. Solve for one, extend to many.

For web work, exclusion is treated as a mismatch between a person and an interface. The goal is to design experiences that preserve agency, support multiple ways to participate, and remain usable across different abilities, devices, contexts, confidence levels, and states of attention.

How To Use

The main skill file is:

.agents/skills/inclusive-design-system/SKILL.md

Use $inclusive-design-system when asking an agent to design, audit, or implement a web experience through this lens.

Example prompts:

Use $inclusive-design-system to review this onboarding flow for cognitive load and accessibility risks.

Use $inclusive-design-system to redesign this settings page so it is easier to scan, recover from mistakes, and customize.

Use $inclusive-design-system to implement this form with accessible states, clear errors, and reduced-motion behavior.

Reference Files

The skill includes focused reference files under:

.agents/skills/inclusive-design-system/references/

Key references include:

• foundations.md: inclusive design definitions, mismatch framing, persona spectrum, and persona network
• web-accessibility-baseline.md: semantic HTML, ARIA, keyboard behavior, focus, forms, contrast, motion, and assistive technology basics
• cognition-and-neurodiversity.md: learning, focus, decision-making, recall, communication, self-efficacy, and risk tolerance
• mental-health-patterns.md: Preserve, Direct, Customize guidance and component patterns
• focus-and-interruptions.md: alerts, badges, notifications, timing, urgency, and attention cost
• guidance-and-learning.md: onboarding, help, examples, walkthroughs, and multiple learning paths
• ai-and-automation.md: AI assistants, transparency, privacy, bias, source support, and human control
• research-and-co-creation.md: co-design, recruiting, workshops, screeners, and prototype testing
• evaluation-and-metrics.md: human-centered success metrics, feedback loops, and accessibility maturity
• implementation-preflight.md: practical frontend checks before shipping

Boundaries

This skill is not a substitute for formal WCAG conformance testing, legal accessibility review, clinical mental health guidance, or medical diagnosis. It is a design and implementation aid for reducing exclusion and improving the quality of web experiences.

License

AGPL-3.0.