القائمة
Use when the user asks to generate, create, or scaffold a Nav — accessible navigation landmark with aria-label, current-page link marking, and horizontal/vertical layout.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Use when the user asks to generate, create, or scaffold an Alert — accessible status/error/info/warning notification with ARIA live regions and icon support.
Use when the user asks to generate, create, or scaffold a Card — accessible content container with header/body/footer slots and interactive variant support.
Use when the user asks to generate, create, or scaffold a Checkbox — accessible checkbox with indeterminate state, aria-checked, custom indicator, and Input dependency.
Use when the user asks to generate, create, or scaffold a Dialog — accessible modal dialog with focus trap, aria-modal, return-focus on close, and Button dependency.
Use when the user asks to generate, create, or scaffold a Field — accessible form field wrapper with label, hint, and error message association via aria-describedby.
Use when the user asks to generate, create, or scaffold an Input — accessible text/number/email input with aria-invalid, error state, and controlled/uncontrolled patterns.
| name | component-nav |
| description | Use when the user asks to generate, create, or scaffold a Nav — accessible navigation landmark with aria-label, current-page link marking, and horizontal/vertical layout. |
| disable-model-invocation | true |
| hint | Invoke explicitly via `/kit-add nav`, `/kit-create` (then ask for a nav), or call the `component-nav` skill by name. Describe the aria-label for the landmark, the link items (label + href), the current-page link, and horizontal vs vertical orientation. |
| allowed-tools | Read, Write, Edit, Bash, Glob, Grep, AskUserQuestion |
Generate an fpkit-style accessible Nav component directly into a developer's project.
nav.component.md in this skill directory (the spec-driven source of truth). Read its ## Target: react adapter (Generation Contract on its generation: line, ## Props Interface, ## Key Pattern: blocks), its ## Styles section, plus ## Accessibility and ## Examples. nav is legacy-shape — it has no ## TSX Template block; the generated nav.tsx is assembled from the Props Interface and the ## Key Pattern: Compound Component Assembly. If nav.component.md is absent, fall back to reference.md (canonical templates, Generation Contract, Props Interface, CSS Variables, Accessibility, Usage Examples). Both yield byte-identical output.python3 ${CLAUDE_PLUGIN_ROOT}/scripts/detect_target.py <cwd>. If foundation (ui.tsx) is missing, run Step A of ${CLAUDE_PLUGIN_ROOT}/skills/kit-core/SKILL.md to initialize it before generating this component.<targetDir>/nav.tsx from the ## Key Pattern: Compound Component Assembly (under ## Target: react in nav.component.md, or top-level in reference.md) — there is no ## TSX Template block<targetDir>/nav.module.scss from the ## Styles section (nav.component.md) or the ## SCSS Pattern section (reference.md)
Substitute {{IMPORT_SOURCE:...}}, {{NAME}}, {{FIELDS}} placeholders if present.python3 ${CLAUDE_PLUGIN_ROOT}/scripts/verify_integration.py <projectRoot> and print the summary to the developer.Templates and documentation live in nav.component.md (the neutral spec-driven source) alongside this SKILL.md, with reference.md kept as the byte-identical fallback. The shared generation contract, accessibility patterns, SCSS conventions, and CSS variable strategy are documented in ${CLAUDE_PLUGIN_ROOT}/skills/kit-core/references/.