Name: united-kingdom-national-insurance-number-view
Author: LilyDesignSystem

Imported from LilyDesignSystem/lily-design-system (components/united-kingdom-national-insurance-number-view/AGENTS.md). Install upstream with npx skills add LilyDesignSystem/lily-design-system --skill united-kingdom-national-insurance-number-view. Copyright stays with the author.

UnitedKingdomNationalInsuranceNumberView

Metadata

Component: united-kingdom-national-insurance-number-view
PascalCase: UnitedKingdomNationalInsuranceNumberView
Description: a read-only display of United Kingdom's National Insurance Number (NINO)
Status: beta — implemented and unit-tested in all seven frameworks with an axe-clean demo page; not yet exercised in composed flows
HTML tag:
CSS class: .united-kingdom-national-insurance-number-view
Interactive: no

Key Behaviors

Renders as <span> with class united-kingdom-national-insurance-number-view and role="text"
Format: two prefix letters, six digits, and a suffix letter (A, B, C, or D) — e.g. AB123456A; the letters D, F, I, Q, U, V and the prefix-2 letter O are excluded
Read-only; not editable

ARIA

aria-label provides accessible name from label prop
role="text" so the identifier announces as a single unit

Keyboard

Not interactive

Props

value: string (required) — the identifier to display
label: string (optional) — accessible name override via aria-label
...restProps: any additional HTML attributes spread onto the root

Acceptance Criteria

Renders element with class="united-kingdom-national-insurance-number-view" and role="text"
Renders value as text content
WCAG 2.2 AAA compliant
Zero CSS — fully headless

References

Documentation: index.md
CSS class: .united-kingdom-national-insurance-number-view in css-style-sheet-template.css
Companion: UnitedKingdomNationalInsuranceNumberInput
Wikipedia: https://en.wikipedia.org/wiki/National_Insurance_number

{ "ocm": "1", "id": "lilydesignsystem-lily-design-system-united-kingdom-natio-76ee11", "kind": "skill", "name": "united-kingdom-national-insurance-number-view", "description": "UnitedKingdomNationalInsuranceNumberView", "publisher": "LilyDesignSystem", "version": "1.0.0", "capabilities": { "domains": [ "general" ], "tags": [ "skill-md", "github-agents" ], "languages": [ "en" ] }, "quality_prior": 0.6, "examples": [ "UnitedKingdomNationalInsuranceNumberView" ], "primary": false, "metadata": { "source": { "provider": "github-agents", "repository": "https://github.com/LilyDesignSystem/lily-design-system", "path": "components/united-kingdom-national-insurance-number-view/AGENTS.md", "ref": "9cfcd928481c32498737458cec976d92f01b8f3c", "url": "https://github.com/LilyDesignSystem/lily-design-system/blob/9cfcd928481c32498737458cec976d92f01b8f3c/components/united-kingdom-national-insurance-number-view/AGENTS.md", "key": "LilyDesignSystem/lily-design-system/components/united-kingdom-national-insurance-number-view/AGENTS.md" } }, "instructions": "# UnitedKingdomNationalInsuranceNumberView\n\n## Metadata\n\n- Component: united-kingdom-national-insurance-number-view\n- PascalCase: UnitedKingdomNationalInsuranceNumberView\n- Description: a read-only display of United Kingdom's National Insurance Number (NINO)\n- Status: beta — implemented and unit-tested in all seven frameworks with an axe-clean demo page; not yet exercised in composed flows\n- HTML tag: <span>\n- CSS class: .united-kingdom-national-insurance-number-view\n- Interactive: no\n\n## Key Behaviors\n\n- Renders as `<span>` with class `united-kingdom-national-insurance-number-view` and `role=", "cost": { "context_tokens": 413 } }

united-kingdom-national-insurance-number-view

About