hydra-gate-modal-isolation

This skill detects inline NcModal and NcDialog markup in Vue components by scanning the codebase through shell-based file system traversal and grep pattern matching. It identifies files that violate component isolation rules and require refactoring into dedicated modules.

Extracting inline modals improves frontend architecture by preventing bloated, tightly-coupled parent components. This enforces modular standards and ensures a maintainable codebase by requiring modals to be isolated into dedicated files within src/modals/ or src/dialogs/ directories.

You can enforce ADR-004 modal isolation guidelines by scanning your Nextcloud codebase for inline NcModal or NcDialog declarations. The scan identifies violating files and validates that components are properly extracted into dedicated directories for strict adherence.

No specific dependencies are required to scan for inline Vue modal violations. The skill operates using a standard shell environment to execute file system traversal and grep-based pattern matching, requiring no additional packages or external component installations.

The best way to refactor scattered modal components in a Vue dashboard is to run an automated architectural scan that identifies inline modal declarations. This provides a targeted list of files requiring extraction into dedicated src/modals/ or src/dialogs/ directory structures.

You should not use automated modal isolation linting when working outside of Vue or Nextcloud frontend environments, or when your project does not need to adhere to strict ADR-004 component isolation guidelines. It strictly targets NcModal and NcDialog markup patterns.