frontend--components_skill

Overview

This skill applies the Agent OS standard for building and maintaining frontend components. It ensures consistency, accessibility, and predictable behavior across UI elements. Use it to align components with the project's conventions and to speed up reviews and reuse.

How this skill works

The skill inspects component structure, naming, props, and public API to confirm they follow the Agent OS frontend component standard. It checks for required documentation, accessibility attributes, tests, and consistent styling patterns. The output highlights deviations and suggests concrete fixes based on the standard.

When to use it

• When creating new reusable UI components for the application
• When refactoring or renaming existing components to match conventions
• Before merging component pull requests to ensure standard compliance
• When adding accessibility or testing coverage for components
• When preparing a component library or design system release

Best practices

• Name components with clear, scope-aware identifiers and keep public APIs small
• Document props, default behaviors, and accessibility expectations alongside the component
• Prefer composition over inheritance; expose slots/children rather than many boolean flags
• Include unit tests for logic and a11y tests or manual checklist for screen-reader support
• Keep styling predictable: use tokens, avoid global overrides, and document styling hooks

Example use cases

• Validating a new Button component for consistent props, accessible labels, and keyboard behavior
• Refactoring Modal components to have standardized open/close APIs and focus management
• Auditing a set of form controls for consistent error handling, aria attributes, and tests
• Preparing a component package for distribution by verifying exports, types, and changelog entries