메뉴
Use when the user asks to generate, create, or scaffold a Checkbox — accessible checkbox with indeterminate state, aria-checked, custom indicator, and Input dependency.
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 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.
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.
| name | component-checkbox |
| description | Use when the user asks to generate, create, or scaffold a Checkbox — accessible checkbox with indeterminate state, aria-checked, custom indicator, and Input dependency. |
| disable-model-invocation | true |
| hint | Invoke explicitly via `/kit-add checkbox`, `/kit-create` (then ask for a checkbox), or call the `component-checkbox` skill by name. Describe the label, the initial state (checked/unchecked/indeterminate), controlled vs uncontrolled, and any error/required state. |
| allowed-tools | Read, Write, Edit, Bash, Glob, Grep, AskUserQuestion |
Generate an fpkit-style accessible Checkbox component directly into a developer's project.
checkbox.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, ## TSX Template), its ## Styles section, plus ## Accessibility and ## Examples. If checkbox.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 (golden-guarded).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.[input]. Before generating Checkbox, check whether <targetDir>/input.tsx already exists. If missing, invoke component-input skill first (or generate Input inline following component-input/reference.md), then continue.<targetDir>/checkbox.tsx from the ## TSX Template (under ## Target: react in checkbox.component.md, or top-level in reference.md)<targetDir>/checkbox.module.scss from the ## Styles section (checkbox.component.md) or the ## SCSS Template 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 checkbox.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/.