Build accessible Preact + htm UI components with keyboard-first patterns and ARIA roles.
npx skills add https://github.com/qol-tools/qol-skills --skill preact-qol-tools
Please help me install this Agent Skill. Skill: preact Source: https://github.com/qol-tools/qol-skills/tree/main/plugins/qol-dev-conventions/skills/preact Command: npx skills add https://github.com/qol-tools/qol-skills --skill preact-qol-tools
The Preact + htm development pattern guide helps teams avoid JSX and boilerplate while ensuring accessibility and consistent component structure.
Start by wiring up a keyboard-first Preact + htm pattern in a sample component to validate focus trap and accessible interactions.
High-intent search queries and answers about installing and using this skill.
Build accessible Preact components by enforcing keyboard-first interaction patterns, applying ARIA roles, and implementing focus trapping to ensure full keyboard operability and screen reader compatibility.
Manage focus trapping in Preact without JSX by using the htm tagged template library, applying dedicated focus-trap guidelines to constrain keyboard navigation within modals and interactive UI components.
Use htm with Preact to avoid JSX boilerplate while maintaining accessibility by following component design guidelines that map htm templates to ARIA roles and keyboard-first input handling.
Implement a global toast system in Preact by utilizing a centralized toast component that manages user feedback notifications and handles state persistence across component remounts.
Persist provider state across remounts in a Preact application by applying dedicated provider state persistence recommendations, ensuring robust UI state recovery when components unmount and re-render.
Preact supports guarded routes and dissolve transition effects through dedicated UI pattern guidelines, enabling custom router guards for access control and smooth dissolve utilities for component transitions.
JochenYangAutomate Three.js web app creation with ES modules and import maps.
inkeepIdentify and document accessibility issues in React/Next.js UI components.
MinhAnh-CorpImplement WCAG 2.2 compliant interfaces and ARIA patterns for UI components.
adamhjkExplains SolidJS JSX syntax and rules for writing efficient, reactive components.
