Frontend Accessibility Best Practices
Skill TerverifikasiAccessibility (a11y) best practices for React components. Use when creating UI components, forms, interactive elements, or reviewing code for accessibility compliance.
This skill provides a structured set of rules and code examples to improve the accessibility of React UI components. It covers semantic HTML, screen reader support, keyboard navigation, and user preferences, guiding developers to build more inclusive applications according to WCAG standards.
Maintenance
- warning:Commit recencyNo commits were found in the last 12 months, indicating the extension may be unmaintained.
Versioning
- warning:Release ManagementNo version information is present in the manifest files (SKILL.md, package.json) or via GitHub releases/CHANGELOG, and install instructions reference 'main'.
Instalasi
npx skills add sergiodxa/agent-skillsMenjalankan Vercel skills CLI (skills.sh) via npx — memerlukan Node.js secara lokal dan setidaknya satu agen yang kompatibel dengan skills terinstal (Claude Code, Cursor, Codex, …). Mengasumsikan repo mengikuti format agentskills.io.
Ekstensi serupa
Frontend Design
99Create distinctive, production-grade frontend interfaces with high design quality. Provides analysis tools for auditing existing designs and generation tools for creating color palettes, typography systems, design tokens, and component templates. Supports React, Vue, Svelte, and vanilla HTML/CSS. Use when building web components, pages, or applications. Keywords: design, UI, frontend, CSS, components, palette, typography, tokens, accessibility.
react-is
98Brand checking of React Elements.
Frontend Design
98Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
React Router Best Practices
98React Router performance and architecture patterns. Use when writing loaders, actions, forms, routes, or working with React Router data fetching. Triggers on tasks involving React Router routes, data loading, form handling, or route organization.
react-devtools-inline
97Embed react-devtools within a website
Modern CSS
96Proactively apply when creating design systems, component libraries, or any frontend application. Triggers on CSS Grid, Subgrid, Flexbox, Container Queries, :has(), @layer, @scope, CSS nesting, @property, @function, if(), oklch, color-mix, light-dark, relative color, @starting-style, scroll-driven animations, view transitions, anchor positioning, popover, customizable select, content-visibility, logical properties, text-wrap, interpolate-size, clamp, field-sizing, modern CSS, CSS architecture, responsive design, dark mode, theming, design tokens, cascade layers. Use when writing CSS for any web project, choosing layout approaches, building responsive components, implementing dark mode or theming, creating animations or transitions, styling form elements, or modernizing legacy stylesheets. Modern CSS features and best practices for building interfaces with pure native CSS.