本文へ移動
cccskills
無料GitHub で公開

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".

Infrasity-Labs/dev-gtm-claude-skills
インストール方法を見る

含まれるファイル（1）

  • SKILL.md2.3 KB

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.

Remediating Findings

After identifying issues, use ui-ux-pro-max to get deeper remediation guidance per category:

# 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

Map findings from the audit to the closest domain keyword above. The ui-ux-pro-max Quick Reference (sections 1–9) covers every category the guidelines checker surfaces.

Related Skills

  • ui-ux-pro-max: Deeper UX guidance and remediation rules for every finding category
  • frontend-design: Design direction and planning before code is written
  • ui-styling: Component implementation — shadcn/ui and Tailwind — where fixes require component-level changes

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

a-b-test-design

無料

Design rigorous A/B tests with hypotheses, variants, metrics, and sample size calculations.

日本語の概要は準備中です。原文の説明を表示しています。

Infrasity-Labs/dev-gtm-claude-skills1362026年6月29日 更新

ab-testing

無料

When the user wants to plan, design, or implement an A/B test or experiment, or build a growth experimentation program. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," "hypothesis," "should I test this," "which version is better," "test two versions," "statistical significance," "how long should I run this test," "growth experiments," "experiment velocity," "experiment backlog," "ICE score," "experimentation program," or "experiment playbook." Use this whenever someone is comparing two approaches and wants to measure which performs better, or when they want to build a systematic experimentation practice. For tracking implementation, see analytics. For page-level conversion optimization, see cro.

日本語の概要は準備中です。原文の説明を表示しています。

Infrasity-Labs/dev-gtm-claude-skills1362026年6月29日 更新

academic-cv-builder

無料

Format CVs for academic positions with publications, grants, and teaching

日本語の概要は準備中です。原文の説明を表示しています。

Infrasity-Labs/dev-gtm-claude-skills1362026年6月29日 更新

accessibility-audit

無料

Conduct a comprehensive accessibility audit against WCAG guidelines with severity ratings and remediation steps.

日本語の概要は準備中です。原文の説明を表示しています。

Infrasity-Labs/dev-gtm-claude-skills1362026年6月29日 更新

accessibility-test-plan

無料

Create accessibility testing plans covering assistive technologies and WCAG criteria.

日本語の概要は準備中です。原文の説明を表示しています。

Infrasity-Labs/dev-gtm-claude-skills1362026年6月29日 更新

ad-creative

無料

When the user wants to generate, iterate, or scale ad creative — headlines, descriptions, primary text, or full ad variations — for any paid advertising platform. Also use when the user mentions 'ad copy variations,' 'ad creative,' 'generate headlines,' 'RSA headlines,' 'bulk ad copy,' 'ad iterations,' 'creative testing,' 'ad performance optimization,' 'write me some ads,' 'Facebook ad copy,' 'Google ad headlines,' 'LinkedIn ad text,' or 'I need more ad variations.' Use this whenever someone needs to produce ad copy at scale or iterate on existing ads. For campaign strategy and targeting, see ads. For landing page copy, see copywriting.

日本語の概要は準備中です。原文の説明を表示しています。

Infrasity-Labs/dev-gtm-claude-skills1362026年6月29日 更新

Infrasity-Labs のスキルをすべて見る

このスキルの問題を報告する