web-design-guidelines

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

技能概览

名称

版本

v1.0.0

作者

calcom

更新日期

2026-01-29T16:59:55.655Z

标签：

#filesystem #io

SKILL.md

Web Interface Guidelines

Review files for compliance with Web Interface Guidelines.

How It Works

1. Fetch the latest guidelines from the source URL below

2. Read the specified files (or prompt user for files/pattern)

3. Check against all rules in the fetched guidelines

4. Output findings in the terse file:line format

Guidelines Source

Fetch fresh guidelines before each review:

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

Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.

`Usage`

When a user provides a file or pattern argument:

1. Fetch guidelines from the source URL above

2. Read the specified files

3. Apply all rules from the fetched guidelines

4. Output findings using the format specified in the guidelines

If no files specified, ask the user which files to review.

      
安装方式
 使用 pa-skills CLI 安装此技能：
  pa-skills add web-design-guidelines
  
 
需要已安装 pa-skills CLI
 
    
资源下载
 下载此技能的完整资源包：
  
下载 ZIP
 
包含此技能的所有文件
 
   相关技能
     A 
   agent-browser 
 Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.
 
  
   B 
   better-auth-best-practices 
 Skill for integrating Better Auth - the comprehensive TypeScript authentication framework.
 
  
   C 
   cache-components 
 Expert guidance for Next.js Cache Components and Partial Prerendering (PPR).

**PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations.

**DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions.

**USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.
 
  
   C 
   canvas-design 
 Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
 
  
   C 
   competitor-alternatives 
 When the user wants to create competitor comparison or alternative pages for SEO and sales enablement. Also use when the user mentions 'alternative page,' 'vs page,' 'competitor comparison,' 'comparison page,' '[Product] vs [Product],' '[Product] alternative,' or 'competitive landing pages.' Covers four formats: singular alternative, plural alternatives, you vs competitor, and competitor vs competitor. Emphasizes deep research, modular content architecture, and varied section types beyond feature tables.
 
  
 
 
查看更多 →