Use when building or fixing an interactive component — dialog, menu, tabs, combobox, tooltip — or handling focus, ARIA, or keyboard support.
EnglishUse when defining a palette, building colour ramps or theme tokens, adding a dark theme, or auditing contrast in an interface.
EnglishUse when building or reviewing any user interface, to apply real design judgment and avoid the recognisable tells of generated UI.
EnglishUse when writing or reviewing any user-facing words — button labels, errors, empty states, dialogs, tooltips, form hints, or accessible names.
EnglishUse when building or reviewing any screen that fetches or lists data, to design its empty, loading, error, offline, stale, and overflow states.
EnglishUse when a page feels slow or janky, when optimising Core Web Vitals, or when writing code that renders, animates, or re-renders frequently.
EnglishUse when a layout must adapt across screen sizes — breakpoints, container queries, fluid type, touch targets, zoom, or mobile overflow bugs.
EnglishUse when building reveal-on-scroll, parallax, sticky or pinned sections, horizontal scroll, scroll-snap, or scrollytelling.
EnglishUse when adding page metadata, structured data, sitemaps, canonicals or hreflang, or when a page is not indexed, previewed or cited correctly.
EnglishUse when applying shadows, elevation, glass, gradients, or corner radii, or when an interface looks flat, cheap, or physically incoherent.
EnglishUse when building design tokens, adding dark mode or multi-brand theming, wiring a theme switcher, or supporting forced-colors, density, or RTL.
EnglishUse when choosing typefaces, building a type scale, setting line-height, tracking, or measure, or loading webfonts without layout shift.
EnglishUse when asked to build any page, screen, component, dashboard, or app UI, to follow the ordered procedure from brief to critique to report.
English
AGENT SKILLS ATLASIncludes Accessible Components, Colour Systems, Design Judgment, and other workflows.
Claude Code
Codex
Cursor
GitHub Copilot
Gemini CLISupported by the Atlas install prompt. Skill-specific requirements vary.
Pack stats
What’s included
Accessible Components
Use when building or fixing an interactive component — dialog, menu, tabs, combobox, tooltip — or handling focus, ARIA, or keyboard support.
Colour Systems
Use when defining a palette, building colour ramps or theme tokens, adding a dark theme, or auditing contrast in an interface.
Design Judgment
Use when building or reviewing any user interface, to apply real design judgment and avoid the recognisable tells of generated UI.
Interface Copy
Use when writing or reviewing any user-facing words — button labels, errors, empty states, dialogs, tooltips, form hints, or accessible names.
Interface States
Use when building or reviewing any screen that fetches or lists data, to design its empty, loading, error, offline, stale, and overflow states.
Rendering Performance
Use when a page feels slow or janky, when optimising Core Web Vitals, or when writing code that renders, animates, or re-renders frequently.
Responsive Architecture
Use when a layout must adapt across screen sizes — breakpoints, container queries, fluid type, touch targets, zoom, or mobile overflow bugs.
Scroll Experiences
Use when building reveal-on-scroll, parallax, sticky or pinned sections, horizontal scroll, scroll-snap, or scrollytelling.
SEO and Metadata
Use when adding page metadata, structured data, sitemaps, canonicals or hreflang, or when a page is not indexed, previewed or cited correctly.
Surface and Depth
Use when applying shadows, elevation, glass, gradients, or corner radii, or when an interface looks flat, cheap, or physically incoherent.
Theming Systems
Use when building design tokens, adding dark mode or multi-brand theming, wiring a theme switcher, or supporting forced-colors, density, or RTL.
Typographic Systems
Use when choosing typefaces, building a type scale, setting line-height, tracking, or measure, or loading webfonts without layout shift.
UI Generation Workflow
Use when asked to build any page, screen, component, dashboard, or app UI, to follow the ordered procedure from brief to critique to report.
Quick start
- Choose your skills. Select individual skills above, or choose the entire pack.
- Copy the install prompt. Use Copy install prompt above the list.
- Send it to your agent. Paste into your coding agent’s chat. Your agent reviews the source and guides the setup.
Try it with your agent
After installation, start with a request like:
Use the Accessible Components skill to help with my task.
Ask me for the context you need before getting started.Requirements & license
- A coding agent that can access your project files and install skills.
- Your agent checks each skill’s instructions, dependencies, and permissions during setup.
- Reported license for the skills shown: Apache-2.0. The author’s terms apply.