Stats
Actions
Tags
From addresszen
Use this skill whenever the user wants address autocomplete, address suggestions as the user types, address validation in a form, US or international address lookup, or any form field that should be auto-populated from a selected address — even if they don't name the package. Specifically covers `@addresszen/address-lookup` (vanilla JS). Includes npm and CDN install, initialisation via `AddressLookup.setup`, callbacks, CSS, country filter/bias, and common gotchas (API key allowed-URLs, source vs CDN build, default US addresses). For the React wrapper, use the `azn-react` skill instead.
How this skill is triggered — by the user, by Claude, or both
Slash command
/addresszen:azn-address-lookupThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Address autocomplete widget for the AddressZen API. Suggests addresses as the user types and populates form fields when one is selected. Defaults to US addresses.
references/additional-configuration.mdreferences/additional-data.mdreferences/behaviours.mdreferences/bias-by-geolocation.mdreferences/bias-by-ip.mdreferences/callbacks.mdreferences/configure.mdreferences/css-classes.mdreferences/default-country.mdreferences/default-styling.mdreferences/detach.mdreferences/exclude-islands.mdreferences/exclude-military.mdreferences/exclude-po-box.mdreferences/filter-by-geospatial-box.mdreferences/hide.mdreferences/home.mdreferences/how-it-works.mdreferences/key-usability.mdreferences/messages.mdAddress autocomplete widget for the AddressZen API. Suggests addresses as the user types and populates form fields when one is selected. Defaults to US addresses.
npm install @addresszen/address-lookup
import { AddressLookup } from "@addresszen/address-lookup";
const controller = AddressLookup.setup({
apiKey: "ak_...",
outputFields: {
line_1: "#line_1",
line_2: "#line_2",
city: "#city",
state: "#state",
zip_plus_4_code: "#zipcode",
},
});
<script src="https://cdn.jsdelivr.net/npm/@addresszen/address-lookup@2"></script>
<script>
AddressZen.AddressLookup.setup({
apiKey: "ak_...",
outputFields: {
line_1: "#line_1",
line_2: "#line_2",
city: "#city",
state: "#state",
zip_plus_4_code: "#zipcode",
},
});
</script>
The CDN build is a polyfilled UMD bundle exposed on the global AddressZen.AddressLookup.
For React / Next.js, prefer the dedicated @addresszen/react wrapper (its own azn-react skill). To drive the vanilla library from React directly, use AddressLookup.watch inside useEffect — see react.md.
AddressLookup.setup({...}) — not new AddressLookup(...). It's a factory method, not a constructor.apiKey is camelCase, not api_key or API_KEY.outputFields is required — it maps address attributes (line_1, city, state, zip_plus_4_code, …) to your form's input selectors. Without it, the widget has nothing to populate.defaultCountry: "GBR" (fields become line_1, post_town, postcode, county, …); for another country use its ISO code. See default-country.md.@latest will silently break when a major bumps. Use @addresszen/address-lookup@2 (or the current major).@addresszen/address-lookup via npm for bundlers (smaller, tree-shakable). Use the jsDelivr UMD bundle (global AddressZen.AddressLookup) for <script> tags.https://example.com, no trailing slash, no path). localhost is allowed by default for development.<head> (injectStyle defaults to true). To supply your own CSS, set injectStyle: false and style the widget's classes yourself. See default-styling.md.restrictCountries: ["USA"] removes the country picker control — it does not hide the toolbar bar itself. For a clean single-country setup, also hide the toolbar. See hide.md.For the long tail of error patterns and fixes, see troubleshooting.md.
The references below are organised by intent. Read only the ones relevant to the user's task — not the whole list.
npm.md — npm/bundler installscript.md — CDN <script> tag install (global AddressZen.AddressLookup)configure.md — minimum required config (apiKey, outputFields)additional-configuration.md — full options referencecallbacks.md — onAddressRetrieved, onLoaded, onFailedCheck, etc.react.md — AddressLookup.watch + useEffect patterndetach.md — detach/re-attach on route changenudge.md — manual re-init / re-attachrestrict-country.md — limit which countries the user can pickdefault-country.md — pre-select / bias toward a countryrestrict-to-mainland-us.md — exclude US territoriesrestrict-to-states.md — limit to specific US statesbias-by-geolocation.md — toward a lat/lngbias-by-ip.md — toward the user's IP locationfilter-by-geospatial-box.md — within a bounding boxexclude-islands.md — exclude island addressesexclude-military.md — exclude military addressesexclude-po-box.md — exclude PO Box addressesdefault-styling.md — built-in look and injectStylecss-classes.md — class hooks for custom CSSstyle-tweaks.md — common style overridesmessages.md — customise UI stringssingle-field.md — one input that captures the whole addressseparate-input.md — dedicated lookup input separate from output fieldsmultiple.md — more than one lookup on the pagehide.md — hide output fields (and the toolbar) until an address is pickedprevent-autofill.md — disable browser autofill on the lookup inputkey-usability.md — keyboard navigation tweaksvalidate-before-submitting.md — block submit until an address is verifiedadditional-data.md — populate fields beyond the standard output sethow-it-works.md — internal model: input field, dropdown, key checkbehaviours.md — the DOM the widget renders and how it reactshome.md — feature overviewtroubleshooting.md — common errors with root cause + fix (authored sibling, not in references/)The full AddressZen documentation — every guide, API reference, and integration — is available as a single file at llms.txt. Point your agent there for anything this skill doesn't cover.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub addresszen/skills --plugin addresszen