AgentSkillsCN

ui-verify

验证本仓库中树状Nix Flake模式的使用情况。当您审查模块、重构代码，或核查树状模式的合规性时，可使用此技能。它将验证Flake-Parts模块结构、面向切面的设计、功能组织方式，以及是否严格遵循Doc-Steve/dendritic-design-with-flake-parts维基中所倡导的树状设计原则。

SKILL.md
--- frontmatter
name: ui-verify
description: Verify UI changes using browser-based testing and visual checks.
required_tools:
  - run_command
  - browser_subagent
version: 1.0.0

UI Verification Skill

Ensures visual and interactive changes match design system expectations and accessibility standards.

Workflow

  1. •

    Environment Setup: Ensure the dev server is running.

    powershell
    bun dev
  2. •

    Visual Audit:

    • •Check responsive layouts: Mobile (375px), Tablet (768px), Desktop (1280px).
    • •Validate typography and color consistency.
    • •Verify hover, active, and focus states.
  3. •

    Accessibility:

    • •Keyboard navigation: All interactive elements reachable and focused.
    • •Focus indicators: Clearly visible.
    • •Contrast: Ensure AA compliance (4.5:1).
  4. •

    Automated Verification:

    • •

      Run E2E routes:

      powershell
      bun run test:e2e
    • •

      Run visual regression:

      powershell
      bun run test:visual

Tools

Use the browser_subagent for automated visual checks and screenshots when manual verification is not preferred.