Web Design Guidelines

What it does

This skill helps AI agents review files for compliance with web interface guidelines. It fetches the latest guidelines from a specified URL, reads user-provided files or patterns, and checks them against those rules. The results are then output in a terse "file:line" format, indicating potential issues found during the review process.

When to use it

• When ensuring new web UI components adhere to established design standards.
• During code reviews for frontend development projects.
• To automatically check files against a set of web interface guidelines before merging changes.
• For quickly identifying deviations from defined coding or design conventions in existing codebase.

Key capabilities

• Fetches the latest web interface guidelines from https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md.
• Reads specified files or patterns provided by the user.
• Checks files against all rules defined in the fetched guidelines.
• Outputs findings in a "file:line" format.
• Prompts the user for file selection if no files are initially provided.

Example prompts

• “Review src/components/Button.js against web design guidelines.”
• “Check all .css files in the styles directory for compliance.”
• "What web design guideline issues do you see?" (This will prompt the user to specify which files to review.)

Tips & gotchas

• The skill relies on a tool called "WebFetch" to retrieve guidelines. Ensure this dependency is available within the agent's environment.
• The output format is specifically defined by the fetched guidelines, so expect results in a "file:line" structure.
• Always fetch fresh guidelines before each review to ensure accuracy and up-to-date standards.