Skills
Practical instructions for better interface work.
accessibilityExternal
Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".
accessibility-diffExternal
Regression check that diffs a live page's accessibility violations against a baseline from uncommitted changes or a branch.
accessibility-scanExternal
Run the AccessLint rule engine against a live page and return a worklist of WCAG 2.2 violations grounded to DOM selectors and source locations.
accessible-focus-states
Keep a visible, high-contrast focus indicator on every interactive element, without a generic browser outline or none at all.
accessible-animationExternal
Tiered reduced-motion patterns for CSS, GSAP, Framer Motion, Lenis, and other web animation systems.
auditExternal
Run technical UI quality audits across accessibility, performance, theming, responsive behavior, and anti-patterns.
audit-and-fixExternal
Accessibility auditing and remediation workflow that combines detection, prioritization, and practical fixes for WCAG issues.
balise-ux-writingExternal
Reviews, rewrites, creates, harmonizes, and implements user-centered interface copy across design files, screenshots, product specifications, source code, localization catalogs, prototypes, and rendered applications. Use for buttons, navigation, forms, errors, empty states, onboarding, confirmations, settings, consent, notifications, help, and system feedback while preserving product behavior, terminology, voice, accessibility, localization, legal meaning, component structure, and implementation constraints.
better-accessibilityExternal
Review and improve focus states, keyboard support, ARIA, forms, screen readers, hit areas, and motion accessibility.
better-colorsExternal
OKLCH color space for web projects. Convert hex/rgb/hsl to oklch, generate palettes, check contrast, handle gamut boundaries, and theme with Tailwind v4. Triggers on oklch, color conversion, palette generation, contrast ratio, gamut, display p3, design tokens, hue drift, chroma, dark mode colors.
better-interfaceExternal
Run a holistic interface review across accessibility, layout, writing, typography, color, and visual polish.
better-typographyExternal
Web typography from choosing fonts to spacing, wrapping and accessibility. Use when picking or pairing typefaces, configuring variable fonts or OpenType features, setting up a type scale, styling text in components, truncating text, styling underlines, selection, placeholders or carets, or reviewing frontend code for typography. Triggers on typography, fonts, font formats, woff2, variable fonts, font-weight, opentype, font-feature-settings, letter-spacing, line-height, type scale, tabular numbers, text-wrap, truncation, line clamp, underlines, text-decoration, text selection, iOS input zoom, font smoothing, text contrast, measure, line length, text-box, smart punctuation, drop cap.
better-writingExternal
Improve UX writing for interface labels, errors, empty states, settings, notifications, and product voice consistency.
build-primitiveExternal
Build foundational UI primitives from scratch with strong ARIA, keyboard, focus, and state handling.
color-contrast-for-taste
Use accessible contrast ratios as a floor, then build restrained hierarchy on top of them rather than treating them as the whole job.
contrast-checkerExternal
Compatibility listing for contrast-checker installs from AccessLint's marketplace skill set.
create-anatomyExternal
Generate a visual anatomy annotation in Figma showing numbered markers on a component instance with an attribute table. Use when the user mentions anatomy, anatomy annotation, component anatomy, create anatomy, or wants to annotate a component's structural elements.
create-voiceExternal
Generate VoiceOver, TalkBack, and ARIA screen reader specs in Figma with focus order, property tables, and announcements by component state.
design-reviewExternal
Run a sharp, prioritized design critique of a UI — a URL, a screenshot/image, or a component file — covering visual hierarchy, typography, spacing, color & contrast, motion, component states, responsiveness, accessibility, and brand consistency. Returns findings ranked from blocking to polish, each with a specific fix; can optionally apply the fixes to code. Use when the user asks to review/critique a design, page, screen, component, or screenshot, or to check craft/accessibility before shipping.
fixing-accessibilityExternal
Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance.
frontend-ui-engineeringExternal
Frontend UI engineering guidance covering component architecture, responsive design, accessibility, and maintainable implementation patterns.
link-purposeExternal
Compatibility listing for link-purpose installs from AccessLint's marketplace skill set.
oklch-skillExternal
Practical OKLCH color workflow skill for building consistent, accessible, and tunable color systems in modern UIs.
ramsExternal
Real-time design feedback skill focused on accessibility, spacing, typography, contrast, and component quality.
refactorExternal
Compatibility listing for refactor installs from AccessLint's marketplace skill set.
sounds-on-the-webExternal
Audit interface sound feedback for UX quality, accessibility, and practical implementation patterns.
use-of-colorExternal
Compatibility listing for use-of-color installs from AccessLint's marketplace skill set.
wcag-audit-patternsExternal
Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations, or implementing accessible design patterns.
vercel-labs-web-design-guidelinesExternal
Review UI code for Web Interface Guidelines compliance. Audit design, accessibility, and UX against Vercel's best practices.
antfu-web-design-guidelinesExternal
Review UI code for web interface guideline compliance, including accessibility and UX best practices.
web-quality-auditExternal
Web quality auditing skill for Lighthouse-style analysis across performance, accessibility, best practices, and SEO signals.