hueyexe/frontend-agent-skills

# Accessibility Inclusive Design

## Purpose

Help an agent design and critique interfaces that are accessible, inclusive, keyboard-friendly, screen-reader-aware, and usable by diverse people.

Use this skill to turn accessibility into normal design practice. Treat accessibility as part of product quality, not as a late QA task or legal checkbox.

## When to use this skill

Use this skill when the user asks for help with:

- UI, UX, frontend implementation, product design, or design-system work.
- Accessibility critique, audit, remediation, redesign, or conformance planning.

# Design Systems Frontend Architecture

## Purpose

Help an agent convert UI, UX, product, and brand decisions into a durable frontend system: reusable components, tokens, layout rules, state behavior, documentation, governance, and implementation guidance that can scale across screens, teams, devices, and time.

Optimize for actual product work. Do not merely describe design systems. Produce decisions, defaults, component contracts, implementation guidance, critiques, and next steps the user can act on.

## When to use this skill

Use this skill when the user asks for any of the following:

- Design-system strategy, component libraries, pattern libraries, style guides, design tokens, UI kits, component audits, interface inventories, or governance.
- UI critique, redesign, frontend implementation plans, component decomposition, responsive layout guidance, CSS architecture, or frontend maintainability.

# Forms, Inputs, and Checkout

## Purpose

Help an agent design, critique, and implement clear, accessible, high-conversion forms, inputs, validation, and checkout flows.

Treat every form as a barrier between a person and a goal. The agent's job is to reduce that barrier without collecting bad data, hiding meaningful choices, or weakening accessibility, privacy, legal, or business requirements.

## When to use this skill

Use this skill for:

- Checkout, cart, payment, shipping, billing, promo-code, account, registration, sign-in, onboarding, subscription, lead-capture, support, survey, settings, profile, upload, and data-entry forms.
- Critiquing screenshots, wireframes, Figma descriptions, HTML/CSS/React components, design-system components, or product flows involving forms.

# Information Architecture Navigation

## Purpose

Help an agent make information easier to find, navigate, and understand. Treat information architecture as a product system made from organization, labeling, navigation, search, metadata, content structure, and wayfinding. Optimize for user tasks and comprehension before visual styling.

## When to use this skill

Use this skill when the user asks you to:

- Critique or redesign navigation, menus, breadcrumbs, tabs, sidebars, search, filters, faceted browsing, category pages, documentation structure, content hubs, settings IA, onboarding flows, product dashboards, or information-dense pages.
- Create an information model, sitemap, taxonomy, label set, navigation model, content grouping, search UX, metadata schema, or IA style guide.
- Improve findability, discoverability, wayfinding, content hierarchy, cross-linking, or search result quality.
- Translate a content inventory or product feature set into a usable structure.

# Interaction Patterns Components

## Purpose

Help an agent choose, critique, and design effective UI interaction patterns and reusable product components.

The skill covers navigation patterns, menus, cards, tables, dashboards, modals, flows, states, and component behavior. It treats visual polish only where it affects interaction clarity, hierarchy, accessibility, or component usability.

## When to use this skill

Use this skill when the user asks for any of the following:

- Critique, redesign, or UX review of an app screen, website, product flow, wireframe, component, or frontend implementation.
- Selection of UI patterns such as navigation, menus, breadcrumbs, dashboards, cards, tables, forms, modals, wizards, split panes, tabs, accordions, toolbars, hover tools, lists, grids, or feedback states.

# UI Visual Composition

## Purpose

Help an AI agent create and critique polished visual UI through hierarchy, spacing, typography, color, depth, imagery, and finishing details. Treat visual design as functional communication: the interface should help users understand what matters, what belongs together, what can be acted on, and what has changed.

This skill covers visual design quality, layout composition, typography, color systems, depth, imagery, polish, accessibility, and frontend implementation choices that affect visual quality. It does not cover deep UX research, information architecture strategy, or frontend architecture except where those concerns determine visual composition.

## When to use this skill

Use this skill when the user asks for UI critique, redesign, product-page improvement, frontend visual implementation, design-system guidance, style polish, layout refinement, typography, color palette, empty/error/loading state improvement, or visual QA of generated UI.

Also use it when producing frontend code for a visual interface, because component structure, semantic markup, tokens, state styling, responsive behavior, and accessibility details determine whether visual recommendations survive implementation.

# UX Research Discovery Testing

## Purpose

Help an agent make better product, UX, UI, and frontend recommendations by grounding them in user goals, observed behavior, business outcomes, and testable evidence. Use this skill to choose just-enough research methods, write interview and usability-test plans, synthesize findings, identify opportunities, and explain evidence-backed product decisions.

It is an operating manual for doing practical research under real product constraints.

## When to use this skill

Use this skill when the user asks you to:

- Plan discovery, customer interviews, field visits, contextual inquiry, or stakeholder interviews.
- Review, critique, redesign, or generate a UI where user behavior, task success, accessibility, or product outcomes matter.

# UX Usability Foundations

## Purpose

Help an agent make interfaces understandable, usable, forgiving, and aligned with user expectations. Treat usability as product behavior, not surface decoration. The agent should turn unclear or fragile UI into an interface where users can quickly answer: what is this, what can I do here, where am I, what happened, how do I recover, and is this worth the effort?

## When to use this skill

Use this skill when the user asks you to critique, redesign, create, or specify a UI, flow, form, app screen, website, dashboard, onboarding, settings page, checkout, navigation model, state behavior, or component interaction for usability. Use it for affordances/signifiers, feedback, constraints, errors, empty/loading/success states, recognition over recall, task clarity, and frontend behavior.

## When not to use this skill

Do not use as the primary skill for deep research operations, brand styling systems, visual polish, typography craft, frontend architecture, or persuasion/growth tactics unless those choices directly affect user understanding, control, or recovery.

# UX Writing & Content Design

## Purpose

Help an AI agent write and evaluate product copy that helps people understand an interface, take action, recover from problems, and trust the product. Treat words as part of the design system and interaction model, not as decoration added after the interface is finished.

This skill covers product UX copy: microcopy, button labels, links, labels, hints, descriptions, empty states, onboarding, validation, errors, success messages, loading/progress states, notifications, terminology, voice, tone, and content strategy. It does not cover long-form marketing copy except when that copy directly affects product comprehension, action, trust, onboarding, or conversion inside a product experience.

## When to use this skill

Use this skill when the user asks you to:

- Write, rewrite, or critique UI text, product copy, UX copy, microcopy, form copy, navigation labels, CTAs, onboarding, empty states, errors, confirmations, loading states, notifications, help text, or design-system content guidance.
- Review a UI, mockup, screenshot, frontend component, flow, prototype, or design system for clarity, tone, usability, trust, recovery, or accessibility.