skilld
All skills
aviralj02 avatar

aviralj02/interface-skills

🥷 Agent skills for interfaces that survive contact with real users.

main Updated last weekGitHub
README badge for aviralj02/interface-skills

Repository statistics

  • Indexed skills

    12

  • Skill groups

    1

  • GitHub stars

    0

  • Forks

    0

Skills

12 total

/design-system-evolution

Grow a design system out of an existing product's code instead of designing one in the abstract — find duplicate and near-duplicate components, repeated behavioral patterns, and hard-coded values; decide what to abstract, what to leave alone, and when abstraction would hurt; define component boundaries and APIs that encode behavior (states, async, focus, destructive safeguards), extract tokens from real usage, and plan incremental adoption. Produces an extraction report with an abstraction verdict per candidate. Use in mature or fast-grown codebases with copy-pasted components, before building a component library, when a "Button" has 14 props, or when deciding whether to abstract something. Triggers on "duplicate components", "should I abstract this", "component library", "extract design tokens", "refactor components", "design system from existing code". Not for creating a design system from scratch in a design tool.

/pattern-consistency

Audit whether an interface behaves consistently — how destructive actions confirm, how modals close, how loading, empty, and error states look, when validation fires, how success is confirmed, what terms and labels are used, how dates and numbers are formatted, and where primary actions sit. Inventories each behavior across the product, identifies variants, chooses a canonical pattern with rationale, and produces a migration plan. Use when a product has grown across teams or AI-generated features, when similar features feel different, before extracting a design system, or when users report that the same action works differently in different places. Triggers on "inconsistent", "consistency audit", "every modal behaves differently", "standardize", "UX debt". Not for visual token consistency alone (spacing, colors).

/content-resilience

Design and verify interfaces against real content — long and short names, missing images and avatars, huge numbers, long unbroken strings and URLs, user-generated content, translated and RTL text, dates and currencies, and lists with 0, 1, many, or thousands of items. Produces a content contract (min/typical/max per field with overflow rules) and a stress-test fixture set. Use when building components that display user or API data (cards, tables, lists, headers, avatars, badges, navigation labels), when designs were made with placeholder text, or when layouts break in production. Triggers on "long text breaks layout", "truncate", "overflow", "ellipsis", "missing image", "i18n", "German text too long", "large numbers", "user generated content". Not for choosing type styles.

/responsive-behavior

Decide how each part of an interface transforms — not just reflows — across viewport and container sizes and input modalities — component priority, what collapses or moves, sidebar to drawer, table to cards or priority columns, filters to bottom sheet, toolbar to overflow menu, multi-pane to stacked navigation, hover-dependent actions on touch, on-screen keyboard, and state preserved across breakpoint changes. Produces a transformation matrix per surface. Use when building layouts that must work on phones and desktops, adapting a desktop-first design, reviewing mobile usability, or choosing container vs viewport queries. Triggers on "responsive", "mobile version", "breakpoints", "table on mobile", "sidebar on mobile", "touch", "container queries", "adaptive". Not for fluid typography or spacing scales alone.

/ux-writing

Write interface copy that tells users what happened, why, and what to do next — error messages, empty states, loading and progress text, confirmations, success messages, button labels, helper text, permission and disabled explanations, and notifications. Works from a state matrix or flow and produces a copy deck keyed to each state, plus a terminology glossary. Use when writing or reviewing error messages, "something went wrong" text, empty states, confirmation dialogs, button labels, toasts, or form validation messages. Triggers on "error message", "microcopy", "UX copy", "button label", "empty state text", "confirmation text", "what should this say". Not for marketing copy, brand voice, or removing AI-sounding prose.

/async-interactions

Design the full lifecycle of user-triggered asynchronous actions — pending feedback, timing thresholds, double-submit prevention, race conditions and stale responses, optimistic updates with rollback, retry and idempotency, cancellation, long-running and background jobs, polling vs push, uploads, and leaving the page with work in flight. Produces an action spec per operation. Use when implementing save, submit, delete, send, upload, import, export, sync, search-as-you-type, toggles, or anything that calls a server and changes data. Triggers on "optimistic update", "double click submits twice", "race condition", "loading button", "retry", "cancel request", "upload progress", "polling", "background job". Not for the static states of a data view (use interface-states).

/destructive-actions

Design actions that delete, overwrite, revoke, cancel, reset, or otherwise permanently change user data — classify severity by reversibility and blast radius, choose the right safeguard (none, undo, soft delete with trash, confirmation dialog, type-to-confirm, delayed execution), write consequence-specific confirmations, handle bulk and cascading effects, and pair UI safeguards with server-side protection. Produces a destructive action inventory with a chosen pattern for each. Use when adding delete, remove, discard, reset, revoke, cancel subscription, overwrite, merge, bulk actions, or when reviewing confirmation dialogs. Triggers on "delete confirmation", "are you sure dialog", "undo", "soft delete", "trash", "irreversible", "bulk delete", "danger zone". Not for general form validation.

/focus-management

Design where keyboard focus goes after every change in the interface — opening and closing dialogs, drawers, and menus; deleting, adding, and reordering items; route changes in single-page apps; form submission and validation errors; inline editing; dynamic and lazily loaded content; toasts; and composite widgets with roving focus — plus what gets announced to screen readers. Produces a focus map for each interaction. Use when building dialogs, menus, lists with delete, SPA navigation, multi-step forms, inline editors, or when keyboard or screen reader users lose their place. Triggers on "focus trap", "focus lost", "return focus", "keyboard navigation", "tab order", "focus after delete", "route change announcement", "aria-live". Not a full WCAG audit.

/information-architecture

Decide where information and functionality live — object model, navigation hierarchy, grouping, page vs modal vs drawer vs inline placement, tabs vs sections vs separate pages, primary vs secondary actions, progressive disclosure, what gets a URL, and information density. Produces an object map, structure map, and placement decisions with rationale. Use when adding a feature to an existing app, starting a new product area, when settings or navigation feel cluttered, or when choosing whether something should be a modal, a page, or a tab. Triggers on "where should this go", "modal or page", "tabs or sections", "navigation structure", "sitemap", "too many menu items", "settings page organization", "progressive disclosure". Not for visual layout or spacing.

/user-flows

Design complete user journeys across screens — entry points, decision points, success and failure branches, interruptions (refresh, back button, session expiry, closed tab), returning users, and exit points — instead of isolated screens. Produces a flow diagram, step table, and interruption table. Use when planning a multi-step feature (signup, checkout, onboarding, upload, invite, import, wizard), when a feature spans pages or modals, or when users get stuck, lose progress, or land mid-flow from a link or notification. Triggers on "user flow", "journey", "wizard", "multi-step", "onboarding flow", "what happens after", "deep link". Not for the layout of a single screen.

/feature-completeness

Evaluate whether a feature is actually finished by walking it through eight paths — happy, error, empty, loading, permission, mobile, accessibility, and recovery — and produce a completeness scorecard with a prioritized gap list. Use before calling a feature done, when planning a feature from a spec or PRD, when reviewing a pull request that adds UI, or when something "works" but feels incomplete. Triggers on "is this done", "ready to ship", "what am I missing", "review this feature", "definition of done", "edge cases". This is the entry point of the interface-skills collection and routes each gap to the skill that fixes it. Not for visual polish reviews.

/interface-states

Enumerate and design every state a UI surface can be in — initial, loading, empty, populated, partial, error, stale, offline, disabled, permission-denied — and produce a state matrix before or alongside implementation. Use when building or reviewing any page, panel, list, table, dashboard, widget, or component that renders data, depends on a request, or varies by user permission. Triggers on "loading state", "empty state", "error state", "what if the API fails", "skeleton", "no data", "blank screen", "state matrix". Not for visual styling of those states; not for the lifecycle of a single user-triggered action (use async-interactions).

Add to your README

The badge links readers to this page. It shows the skilld mark and no counts, and it follows the reader's light or dark GitHub theme.

<a href="https://skilld.dev/gh/aviralj02/interface-skills"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://skilld.dev/b/aviralj02/interface-skills?theme=dark"> <source media="(prefers-color-scheme: light)" srcset="https://skilld.dev/b/aviralj02/interface-skills?theme=light"> <img alt="Skill repository on skilld.dev" src="https://skilld.dev/b/aviralj02/interface-skills?theme=light"> </picture> </a>