web-design-guidelines
Automated UI code review against Vercel's Web Interface Guidelines.
- Fetches the latest guidelines from the official Vercel repository before each review to ensure current rule compliance
- Analyzes React, Vue, Svelte, HTML, CSS, and JavaScript/TypeScript files against all fetched rules
- Reports violations in
file:lineformat with actionable feedback on how to fix each issue - Supports file paths and glob patterns for flexible scope selection across projects
Web Interface Guidelines Review
Review files for compliance with Vercel's Web Interface Guidelines.
When to use this skill
- UI code review: check compliance with Web Interface Guidelines
- Accessibility check: when asked "check accessibility"
- Design audit: when asked "audit design"
- UX review: when asked "review UX"
- Best practices review: when asked "check my site against best practices"
How It Works
- Fetch the latest guidelines from the source URL below
- Read the specified files (or prompt user for files/pattern)
- Check against all rules in the fetched guidelines
- Output findings in the terse
file:lineformat
More from supercent-io/skills-template
security-best-practices
Implement security best practices for web applications and infrastructure. Use when securing APIs, preventing common vulnerabilities, or implementing security policies. Handles HTTPS, CORS, XSS, SQL Injection, CSRF, rate limiting, and OWASP Top 10.
14.1Kdata-analysis
Analyze datasets to extract insights, identify patterns, and generate reports. Use when exploring data, creating visualizations, or performing statistical analysis. Handles CSV, JSON, SQL queries, and Python pandas operations.
13.8Kweb-accessibility
Implement web accessibility (a11y) standards following WCAG 2.1 guidelines. Use when building accessible UIs, fixing accessibility issues, or ensuring compliance with disability standards. Handles ARIA attributes, keyboard navigation, screen readers, semantic HTML, and accessibility testing.
12.7Kworkflow-automation
Automate repetitive development tasks and workflows. Use when creating build scripts, automating deployments, or setting up development workflows. Handles npm scripts, Makefile, GitHub Actions workflows, and task automation.
12.6Kcode-review
Conduct thorough, constructive code reviews for quality and security. Use when reviewing pull requests, checking code quality, identifying bugs, or auditing security. Handles best practices, SOLID principles, security vulnerabilities, performance analysis, and testing coverage.
12.5Kdatabase-schema-design
Design and optimize database schemas for SQL and NoSQL databases. Use when creating new databases, designing tables, defining relationships, indexing strategies, or database migrations. Handles PostgreSQL, MySQL, MongoDB, normalization, and performance optimization.
12.2K