Back to categories
Category

Agent Skills in category: ui

274 skills match this category. Browse curated collections and explore related Agent Skills.

html-markup

Write semantic, accessible HTML5 markup following best practices for structure, SEO, and accessibility. Use when creating HTML templates, fixing markup issues, or building web page structures.

htmlhtml-cssbest-practicesaccessibility
vapvarun
vapvarun
3

frontend-design

Create 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.

html-cssui-designresponsive-designweb-components
vapvarun
vapvarun
3

accessibility

Web accessibility (a11y) best practices for WCAG 2.1 AA compliance, ARIA attributes, keyboard navigation, screen reader support, and inclusive design. Use when auditing accessibility, implementing accessible features, fixing a11y issues, or when user mentions WCAG, accessibility, screen readers, or keyboard navigation.

a11yWCAGARIAkeyboard-navigation
vapvarun
vapvarun
3

react-component

Create React components with TypeScript, following best practices for hooks, state management, accessibility, and testing. Use when building new UI components or refactoring existing ones.

reacttypescriptreact-hooksaccessibility
vapvarun
vapvarun
3

react

Modern React SPA development with React Router v7, Jotai state management, and Vite tooling. Use for building single-page applications with client-side routing, global state, forms, and async data loading. Triggers: react, spa, single page application, react-router, jotai, vite, bun, client-side routing, react hooks, useState, useEffect.

reactspareact-routerjotai
cosmix
cosmix
3

accessibility

Web accessibility patterns and WCAG compliance guidelines. Use when implementing accessible UI components, keyboard navigation, screen reader support, or auditing for a11y compliance. Triggers: accessibility, a11y, WCAG, ARIA, screen reader, keyboard navigation, color contrast, semantic HTML, assistive technology.

accessibilitya11yWCAGARIA
cosmix
cosmix
3

ios-ux-design

Activate this skill when analyzing iOS app UI/UX, evaluating iOS design patterns, proposing iOS interface improvements, or creating iOS implementation specifications. Provides deep expertise in Apple Human Interface Guidelines, SwiftUI patterns, native iOS components, accessibility standards, and iOS-specific interaction paradigms.

iosswiftuiapple-human-interface-guidelinesux
mosif16
mosif16
5

react-patterns

Modern React patterns for TypeScript applications including hooks, state management, and component composition. Use when building React components, managing state, or implementing React best practices.

reacttypescriptreact-hooksstate-management
benshapyro
benshapyro
71

tailwind-conventions

Consistent Tailwind CSS patterns for React/Next.js applications. Use when styling components with Tailwind, adding responsive design, implementing dark mode, or organizing utility classes.

tailwind-cssreactnextjsresponsive-design
benshapyro
benshapyro
71

frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

html-cssresponsive-layoutui-componentsdesign-system
shekohex
shekohex
5

wizard

>

ui-componentswizardform-wizard
Jordan Godau
Jordan Godau
5

Design System Français (DSFR)

Documentation et accessibilité concernant le Design System Français (DSFR), un ensemble de composants et de bonnes pratiques pour créer des interfaces utilisateur conformes aux standards du gouvernement français. Use when user wants to implement DSFR components, needs DSFR documentation, asks about French government design system, requires RGAA accessibility guidelines, works with French government websites, or needs HTML/CSS examples for accessible components.

design-systemaccessibilityhtml-cssRGAA
numerique-gouv
numerique-gouv
8

inspector-customization

Create and customize inspector panels for node editors. Use when implementing custom inspector tabs, settings panels, node-specific inspectors, or using inspector UI components.

ui-componentsui-customizationpanel-uinode-editor
trkbt10
trkbt10
5

custom-node-definition

Create custom node definitions with renderers, ports, external data, and constraints. Use when implementing new node types, custom node appearances, or node-specific behaviors.

ui-componentsextension-developmentvisual-programmingcustom-node-definitions
trkbt10
trkbt10
5

fuzzy-selecting

Provides interactive fuzzy finder for selecting items from any list with preview capabilities. Use this skill when choosing from search results, files, processes, or any command output

cliterminalfuzzy-searchpreview
iota9star
iota9star
5

cognitive-foundations

Apply cognitive science and HCI research to design decisions. Use when you need the scientific 'why' behind usability, explaining user behavior, understanding perception/memory/attention limits, evaluating cognitive load, assessing mental model alignment, predicting performance with Fitts's/Hick's Law, or grounding interface decisions in research rather than opinion.

mental-modelingbehavioral-analysiscognitive-loadfitts-law
petekp
petekp
62

interaction-design

Apply interaction design principles to create intuitive, responsive interfaces. Use when designing component behaviors, micro-interactions, loading states, transitions, user flows, accessibility patterns, or when the user asks about UX, animation timing, keyboard navigation, or progressive disclosure.

microinteractionsuser-flowstransitionskeyboard-navigation
petekp
petekp
62

react-component-dev

Build React components with proper patterns, accessibility, and composition. Use when creating new components, refactoring existing ones, or reviewing component architecture. Covers forwardRef, prop design, accessibility, file organization, and testing approaches.

reactui-componentsaccessibilitycomponent-testing
petekp
petekp
62

Page 7 of 16 · 274 results