web-design-guidelines

Name: web-design-guidelines
Author: infrasity-labs

github.com/infrasity-labs设计与 UI15089 次安装18 周前更新

代码仓库

关于 web-design-guidelines

web-design-guidelines 是用于依据最新 Web Interface Guidelines 检查文件的技能。它会在每次审查前获取规则，并以简洁的文件和行号格式报告发现。

主要功能

01获取最新审查指南
02检查指定文件或匹配模式
03按文件和行号报告发现
04使用 ui-ux-pro-max 获取修复指导

适用场景

01检查界面代码是否符合指南
02定位文件中的问题以便跟进
03借助相关技能规划修复

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/infrasity-labs/dev-gtm-claude-skills --skill web-design-guidelines

安装后在 Claude Code 中输入/web-design-guidelines确认已加载。

详细介绍

Web Interface Guidelines

检查文件是否符合 Web 界面指南。

工作原理

从下方的源 URL 获取最新指南
阅读指定文件（或提示用户提供文件/模式）
根据获取的指南检查所有规则
使用简洁的 file:line 格式输出检查结果

指南来源

每次检查前都获取最新指南：

https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md

使用 WebFetch 获取最新规则。获取的内容包含所有规则和输出格式说明。

用法

当用户提供文件或模式参数时：

从上方的源 URL 获取指南
阅读指定文件
应用所有指南规则
使用指南中指定的格式输出检查结果

如果未指定文件，请询问用户要检查哪些文件。

修复检查结果

找出问题后，使用 ui-ux-pro-max 获取各类别更深入的修复指导：

# Accessibility findings
python3 skills/ui-ux-pro-max/scripts/search.py "accessibility contrast aria keyboard" --domain ux

# Form UX findings
python3 skills/ui-ux-pro-max/scripts/search.py "forms validation error feedback" --domain ux

# Animation / motion findings
python3 skills/ui-ux-pro-max/scripts/search.py "animation reduced-motion timing" --domain ux

# Navigation findings
python3 skills/ui-ux-pro-max/scripts/search.py "navigation breadcrumb back behavior" --domain ux

# Performance / layout findings
python3 skills/ui-ux-pro-max/scripts/search.py "layout shift lazy loading performance" --domain ux

将检查结果映射到上方最接近的领域关键词。ui-ux-pro-max 快速参考（第 1–9 节）涵盖指南检查器检测出的所有类别。