shawn-sandy/component-input
plugins/acss-kit/skills/component-input/SKILL.md
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.
data-ai
Updated May 22, 2026
$ install --global
skillsauthnpx skillsauth add shawn-sandy/acss-plugins component-inputInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 22, 2026, 2:10 AM145.2s2 files scanned
SKILL.md
- name:
- component-input
- description:
- 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.
- disable-model-invocation:
- true
- hint:
- >-
- allowed-tools:
- Read, Write, Edit, Bash, Glob, Grep, AskUserQuestion
SKILL: component-input
Generate an fpkit-style accessible Input component directly into a developer's project.
Workflow
- Read
reference.mdin this skill directory for the canonical templates, Generation Contract, Props Interface, CSS Variables, Accessibility requirements, and Usage Examples. - Init check — run
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.mdto initialize it before generating this component. - Dependencies — Input has no upstream dependencies (it is a leaf component). Skip dep resolution.
- Generate — apply the Generation Contract from
reference.mdto produce:<targetDir>/input.tsxfrom the## TSX Templatesection<targetDir>/input.module.scssfrom the## SCSS Templatesection Substitute{{IMPORT_SOURCE:...}},{{NAME}},{{FIELDS}}placeholders if present.
- Verify — run
python3 ${CLAUDE_PLUGIN_ROOT}/scripts/verify_integration.py <projectRoot>and print the summary to the developer.
Reference
All templates and documentation live in reference.md alongside this SKILL.md. The shared generation contract, accessibility patterns, SCSS conventions, and CSS variable strategy are documented in ${CLAUDE_PLUGIN_ROOT}/skills/kit-core/references/.
Related Skills
shawn-sandy/kit-core
development
VerifiedTrustedCommunity
Internal orchestrator for /kit-create, /kit-list, /kit-sync, /kit-update and Form/HTML/Style-Tune modes. Per-component generation lives in component-<name> skills; do not auto-trigger for component requests.
SKILL.mdUpdated May 22, 2026
shawn-sandy/component-table
data-ai
VerifiedTrustedCommunity
Use when the user asks to generate, create, or scaffold a Table — accessible data table with caption, scope headers, responsive scroll wrapper, and sortable column support.
SKILL.mdUpdated May 22, 2026
shawn-sandy/component-popover
tools
VerifiedTrustedCommunity
Use when the user asks to generate, create, or scaffold a Popover — accessible tooltip/popover using the Popover API with focus trap, aria-expanded, and light-dismiss.
SKILL.mdUpdated May 22, 2026
shawn-sandy/component-nav
tools
VerifiedTrustedCommunity
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.
SKILL.mdUpdated May 22, 2026