Frontend engineer
Agent Plugins 1.0.0 compatible
Build accessible, fast, well-structured UI components with design tokens, solid data-fetching states, and reproducible UI bug fixes.
Version 1.0.2Updated Oct 20, 2026Source
First time? Install with npm i -g harnesstap
Download as Agent Plugins zipWhat's inside
Skills (6)
accessible-markupWrite UI markup that works with keyboards, screen readers, and zoom from the start. Use while building or changing interactive UI such as forms, menus, dialogs, tabs, tables, and custom controls. Covers semantics, names, focus, and state, and checks the result with keyboard and automated tools.client-performanceMeasure and fix frontend performance problems such as slow first load, large bundles, layout shift, and slow interactions. Use when Core Web Vitals regress, a page feels slow, or a bundle grew. Measures first, changes one thing at a time, and records before and after numbers.component-buildBuild a new UI component or extend an existing one so it is typed, composable, and consistent with the codebase. Use when asked to create a component, turn a design into code, or split a large component. Produces the component, its stories or examples if the repo uses them, and tests.data-fetching-stateImplement data loading in the UI with every state handled: loading, empty, error, stale, and success, plus caching and mutations. Use when wiring a screen to an API, adding a form that writes data, or fixing flicker, double requests, or stale data bugs.design-tokens-wiringConnect design tokens (color, spacing, typography, radius, shadow, motion) to code and remove hard-coded values. Use when adding tokens from a design system, replacing magic numbers in styles, adding a theme such as dark mode, or when a component does not match the design system.ui-bug-reproTurn a vague visual or interaction bug report into a minimal, reliable reproduction before fixing it. Use when a UI bug is reported with a screenshot, a video, or \"it looks broken on my machine\", especially when it depends on browser, viewport, data, or timing.
Rules (2)
component-standardsStandards for every UI component written or changed.css-modules-or-tailwindUse the styling approach the repo already uses, with tokens instead of hard-coded values.
Commands (2)
a11y-checkRun a quick accessibility check on a component or page while building it.component-scaffoldScaffold a new component that matches the repo's existing component conventions.
Plugins (6)
frontend-design@claude-plugins-officialimpeccable@impeccablecontext7@claude-plugins-officialplaywright@claude-plugins-officialchrome-devtools-mcp@claude-plugins-officialui-ux-pro-max@ui-ux-pro-max-skill