interface-design

name	interface-design
description	Use when building, redesigning, or reviewing frontend UI: pages, components, dashboards, landing pages, mobile screens, charts, and interaction states.

Interface Design

Overview

Ground UI work in targeted retrieval from the curated interface database, then implement with the project's existing design system and verify the complete interaction surface.

Announce: "I'm using the interface-design skill to ground this UI work in the design guidance database."

Reference Router

• Generate/persist a design system and run targeted domain or stack queries: retrieval workflow
• Select supported domains, including explicit gsap, and supported web/mobile/desktop stacks: catalog
• Apply layout, icon, accessibility, state, chart, and pre-delivery rules: implementation and checklist

Load the retrieval workflow first. Load the catalog only to choose a domain/stack, then load implementation guidance for the surface being built or reviewed.

Mandatory Gates

• Retrieval gate: Run .agent/skills/interface-design/scripts/search.py and read returned rows. Do not paste or preload .agent/skills/interface-design/data/**/*.csv into model context; raw CSV is only for editing or validating the data itself.
• Search-before-missing gate: Before declaring a design pattern, domain, stack, or guidance absent, run the relevant design-system, --domain, and/or --stack search with concrete product, industry, page, and framework terms. Distinguish no retrieval result from an unsupported capability.
• Provenance gate: UPSTREAM.json is the authority for selective upstream provenance. Preserve its pinned commit, normalized hashes, mirrored/transformed status, local transforms, local-only files, and intentionally excluded assets. Files not listed must not be claimed to mirror upstream.
• Context gate: Identify product type, audience, platform, page/screen, stack, project configuration, and style constraints. Use the configured stack; default to html-tailwind only for generic web UI.
• Design-system gate: Reuse existing components, tokens, styling conventions, and icon libraries before adding primitives. Persist retrieved guidance only when multiple UI tasks need it and respect overwrite/path protections.
• Implementation gate: Build the requested product experience, not a decorative concept. Cover responsive behavior, stable layout, text overflow, keyboard/focus behavior, accessible names, touch/safe-area needs, chart alternatives, and loading, empty, error, disabled, success, hover, focus, and pressed states.
• Evidence gate: Record which design-system/domain/stack searches informed the result and verify mobile/desktop layout, accessibility, interaction states, and stack-specific risks before delivery.