Use when working on inclusion, i18n/localization, global name/address forms, low-end devices, slow/metered networks, affordability, or first-time/low-confidence users; not WCAG/screen readers (see accessibility).
npx skills add https://github.com/evanca/flutter-ai-rules --skill inclusive-design
Inclusive design answers a different question from accessibility:
> Does this respect the real-world context, identity, language, culture, device, confidence level, and constraints of the person using it?
Accessibility asks whether someone *can operate* the interface with their abilities and assistive tools. Inclusion asks who gets *left out* by the assumptions baked into the product — the person on a $40 phone over a metered 2G connection, the person whose name doesn't fit your form, the person reading in their third language, the person who has never done this online before and is afraid of getting it wrong. WCAG conformance does not address any of that. This skill does.
Per W3C, accessibility, usability, and inclusion overlap but each has a distinct focus: accessibility targets disability, usability targets the quality of the experience (effective, efficient, satisfying), and inclusion targets the full breadth of human diversity — hardware and software, literacy, economic situation, education, geography, culture, age, and language.
Use this skill when the work is about *who you might be excluding and why* — not about a specific assistive-tech bug. Triggers: reviewing a design "through an inclusive lens," building personas, internationalization/localization, designing name/address/profile forms for a global audience, supporting low-end devices or poor connectivity, lowering cost/data barriers, onboarding nervous or first-time users, reducing stress and cognitive load, or any "are we leaving anyone out?" conversation.
When *not* to use it: if the task is screen-reader support, keyboard navigation, focus order, color contrast, alt text, ARIA, captions, or passing WCAG — that's the accessibility skill. The two are partners; pick by focus.
The social model reframes disability as a mismatch between a person and their environment, product, or society — not a deficiency in the person. As August de los Reyes put it:
> "The biggest challenge is reframing disability as a mismatch between one's abilities and the environment. In other words, disability is designed."
The empowering corollary: if mismatches are designed, they can be *un*-designed. The same logic extends past disability to every exclusion in this skill — a form that rejects a valid name, an app that needs more bandwidth than a user can afford, copy only a fluent reader can parse. Each is a designed mismatch you can remove. Microsoft states it as: *disability = mismatched human interactions.*
A constraint is rarely permanent-only. Microsoft's Persona Spectrum maps each limitation across permanent, temporary, and situational states — which both grows the affected population enormously and reveals the universal need:
| Ability | Permanent | Temporary | Situational |
|---|---|---|---|
| Touch (one arm) | amputation | broken arm | a new parent holding a baby |
| See | blindness | cataracts / eye dilation | driving; bright sunlight |
| Hear | deafness | ear infection | a loud bar; a quiet library |
| Speak | non-verbal | laryngitis | a heavy accent on voice UI |
> "We use the Persona Spectrum to understand related mismatches and motivations across a spectrum of permanent, temporary, and situational scenarios."
The scaling is the point: ~26,000 Americans a year experience permanent upper-limb loss, but counting temporary and situational impairments the number is more than 20 million. Designing for the edge serves the middle.
Go dimension by dimension and ask "who does this assume, and who does that leave out?" Each dimension has a reference file with the depth.
For the philosophy, principles, Persona Spectrum activities, and the accessibility/usability/inclusion distinction in full, see references/frameworks.md.
Inclusion is not a checklist you complete; it's a habit of noticing your assumptions. The fastest way to find exclusion is to stop designing for an "average user" (who doesn't exist) and instead pick a specific person at the edge — someone unlike you in language, income, device, or confidence — and walk your flow as them. The friction they hit is the design's, not theirs.
Primary sources:
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
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 formatting, or company design standards apply.
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling
Use Expo DOM components to run web code in a webview on native and as-is on web. Migrate web code to native incrementally.
Take evanca/inclusive-design from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.