flexbox-patterns
Use when reviewing stylesheets, component styles, and responsive behavior related to Apply Flexbox best practices. Check the rendered layout across breakpoints and interaction states before proposing a fix.
Browse reusable Agent Skills, each with a clear purpose and practical guidance.
Use when reviewing stylesheets, component styles, and responsive behavior related to Apply Flexbox best practices. Check the rendered layout across breakpoints and interaction states before proposing a fix.
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Manage focus during dynamic interactions. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
Use when reviewing sticky navigation, consent banners, chat widgets, skip links, or any fixed-position UI. Validate the actual tab order and viewport behavior at realistic zoom levels.
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Ensure logical focus order. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
Use when reviewing stylesheets, component styles, and responsive behavior related to Provide visible custom focus indicators. Check the rendered layout across breakpoints and interaction states before proposing a fix.
Use when auditing slow page loads, heavy assets, or rendering delays related to Optimize web font loading. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
Use when applies to all CSS `font-size` declarations, particularly those using `px` units for body text, UI labels, and navigation. Use when auditing mobile responsiveness and accessibility compliance. Check for `font-size` in media queries targeting small screens.
Use when reviewing public HTML forms (no authentication required to reach them) for bot and abuse protection mechanisms.
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use a single label for each form field. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
Use when reviewing HTML forms, fetch/XHR calls, and form action attributes to ensure data is submitted exclusively over HTTPS.