From ideal-postcodes
Use this skill whenever the user wants UK postcode lookup, postcode search, "find addresses by postcode", a postcode-to-address dropdown, or any UK address form where the user enters a postcode and picks an address — even if they don't name the package. Specifically covers `@ideal-postcodes/postcode-lookup`. Includes npm and CDN install, initialisation via `PostcodeLookup.setup`, lifecycle callbacks, CSS customisation, full-text address search, custom UI elements, and common gotchas (the required `context` parameter, API key allowed-URLs, bundled vs source build).
How this skill is triggered — by the user, by Claude, or both
Slash command
/ideal-postcodes:ideal-postcodes-postcode-lookupThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Postcode search widget for the Ideal Postcodes API. User enters a UK postcode, picks an address from the dropdown, and your form fields auto-populate.
references/add-custom-elements.mdreferences/additional-data.mdreferences/behaviours.mdreferences/callbacks.mdreferences/configuration-reference.mdreferences/configure.mdreferences/css-classes.mdreferences/custom-button.mdreferences/custom-callback.mdreferences/custom-elements.mdreferences/custom-input.mdreferences/full-search.mdreferences/hide-fields.mdreferences/home.mdreferences/how-it-works.mdreferences/messages.mdreferences/multi-page-form.mdreferences/multiple.mdreferences/npm.mdreferences/react.mdPostcode search widget for the Ideal Postcodes API. User enters a UK postcode, picks an address from the dropdown, and your form fields auto-populate.
npm install @ideal-postcodes/postcode-lookup
import { PostcodeLookup } from "@ideal-postcodes/postcode-lookup";
const controller = PostcodeLookup.setup({
apiKey: "ak_test",
context: "#postcode-lookup-container",
outputFields: {
line_1: "#line_1",
line_2: "#line_2",
line_3: "#line_3",
post_town: "#post_town",
postcode: "#postcode",
},
});
<div id="postcode-lookup-container"></div>
<script src="https://cdn.jsdelivr.net/npm/@ideal-postcodes/postcode-lookup-bundled@2"></script>
<div id="postcode-lookup-container"></div>
<script>
IdealPostcodes.PostcodeLookup.setup({
apiKey: "ak_test",
context: "#postcode-lookup-container",
outputFields: {
line_1: "#line_1",
line_2: "#line_2",
line_3: "#line_3",
post_town: "#post_town",
postcode: "#postcode",
},
});
</script>
context is required. It tells the widget where to render its UI (search box, dropdown). Pass a CSS selector or DOM node. Without it, nothing appears.PostcodeLookup.setup({...}) — not new PostcodeLookup(...). It's a factory method, not a constructor.apiKey is camelCase, not api_key or API_KEY.@latest will silently break on a major. Use @ideal-postcodes/postcode-lookup-bundled@2 (or current major).@ideal-postcodes/postcode-lookup for bundlers. Use @ideal-postcodes/postcode-lookup-bundled for <script> tags or compatibility.https://example.com).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 install, source vs bundled trade-offsscript.md — CDN <script> tag installconfigure.md — minimum required config (apiKey, context, outputFields)configuration-reference.md — full options referencecallbacks.md — onAddressSelected, onLoaded, onSearchCompleted, etc.react.md — useEffect-based init patternfull-search.md — enable address-text search alongside postcode (strictlyPostcodes: false)behaviours.md — fine-grained behaviour flagssingle-field.md — single combined inputmultiple.md — more than one postcode lookup on one pagemulti-page-form.md — populate fields across multiple form pageshide-fields.md — hide output fields until an address is pickedremove-organisation.md — strip organisation name from line 1custom-input.md — replace the default postcode inputcustom-button.md — replace the default search buttoncustom-elements.md — replace any rendered elementadd-custom-elements.md — inject extra UI (e.g. manual-entry link)custom-callback.md — drive selection from your own UIcss-classes.md — class hooks for custom CSSstyle-tweaks.md — common CSS overridesmessages.md — customise UI stringsadditional-data.md — populate fields beyond the standard 5 lineshow-it-works.md — internal model: search → dropdown → populatetroubleshooting.md — common errors with root cause + fix (authored sibling, not in references/)The full Ideal Postcodes 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.
npx claudepluginhub ideal-postcodes/skills --plugin ideal-postcodesCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.