Communitygithub.com

Infrasity-Labs/dev-gtm-claude-skills

UIコードをWebインターフェースガイドラインに沿ってレビューします。「UIをレビューして」「アクセシビリティを確認」「デザイン監査」「UXレビュー」「ベストプラクティスに沿ってサイトを確認」といった指示で使用します。

dev-gtm-claude-skills とは?

このスキルは、指定されたファイルをWebインターフェースガイドラインに照らし合わせて自動レビューします。主なワークフローは、まずソースURLから最新のガイドラインを取得し、対象ファイルを読み込み、すべてのルールを適用して問題を検出、そして`file:line`形式で簡潔に結果を出力します。Vercel Labsが公開するガイドラインを動的に取得するため、常に最新のルールに基づいた監査が可能です。ファイルやパターンが指定されない場合は、ユーザーにレビュー対象を尋ねます。検出された問題の修正には、関連スキルである`ui-ux-pro-max`を活用し、アクセシビリティ、フォームUX、アニメーション、ナビゲーション、パフォーマンスなどのカテゴリ別に深い改善ガイダンスを得ることができます。Claude Codeや類似のエージェント環境で使用されることを想定しています。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Infrasity-Labs/dev-gtm-claude-skills/tree/HEAD/.claude/skills/web-design-guidelines

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Webインターフェースガイドライン

ファイルをWebインターフェースガイドラインに準拠しているかレビューします。

動作方法

  1. 以下のソースURLから最新のガイドラインを取得
  2. 指定されたファイルを読み込む(またはユーザーにファイル/パターンを促す)
  3. 取得したガイドラインのすべてのルールと照合
  4. 結果を簡潔な file:line 形式で出力

ガイドラインのソース

レビュー前に毎回新しいガイドラインを取得します:

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

WebFetchを使用して最新のルールを取得します。取得したコンテンツにはすべてのルールと出力形式の指示が含まれています。

使用方法

ユーザーがファイルまたはパターン引数を指定した場合:

  1. 上記のソースURLからガイドラインを取得
  2. 指定されたファイルを読み込む
  3. 取得したガイドラインのすべてのルールを適用
  4. ガイドラインで指定された形式を使用して結果を出力

ファイルが指定されていない場合は、ユーザーにレビューするファイルを尋ねます。

問題の修正

問題を特定した後、ui-ux-pro-maxを使用してカテゴリごとに詳細な改善ガイダンスを取得します:

# アクセシビリティに関する発見事項
python3 skills/ui-ux-pro-max/scripts/search.py "accessibility contrast aria keyboard" --domain ux

# フォームUXに関する発見事項
python3 skills/ui-ux-pro-max/scripts/search.py "forms validation error feedback" --domain ux

# アニメーション/モーションに関する発見事項
python3 skills/ui-ux-pro-max/scripts/search.py "animation reduced-motion timing" --domain ux

# ナビゲーションに関する発見事項
python3 skills/ui-ux-pro-max/scripts/search.py "navigation breadcrumb back behavior" --domain ux

# パフォーマンス/レイアウトに関する発見事項
python3 skills/ui-ux-pro-max/scripts/search.py "layout shift lazy loading performance" --domain ux

監査から得られた発見事項を、上記の最も近いドメインキーワードにマッピングします。ui-ux-pro-maxクイックリファレンス(セクション1~9)は、ガイドラインチェッカーが表面化するすべてのカテゴリをカバーしています。

関連スキル

  • ui-ux-pro-max: すべての発見カテゴリに対する詳細なUXガイダンスと修正ルール
  • frontend-design: コード作成前のデザイン方向性と計画
  • ui-styling: コンポーネント実装 — shadcn/uiとTailwind — コンポーネントレベルの変更が必要な修正に使用

Individual skills in this repo

This repo contains 9 individual skills — each has its own dedicated page.

Infrasity-Labs/dev-gtm-claude-skills

Translate existing blog posts into one or more target languages with SEO-optimized localization. Produces native-quality translations that preserve markdown structure, frontmatter, schema JSON-LD, image and chart embeds, and citation capsules. Localizes keywords, meta tags, numbers, dates, currencies, and quote styles per locale. Flags machine-translation artifacts for review. Run BEFORE blog-localize: this handles language conversion; localize handles cultural adaptation after translation completes. Use when user says "translate blog", "blog translate", "uebersetzen", "traduire", "traducir", "translate post", "blog auf Deutsch", "blog en espanol".

Infrasity-Labs/dev-gtm-claude-skills

Balance visual design with ATS compatibility for creative roles

Infrasity-Labs/dev-gtm-claude-skills

Apply Fitts's Law to size and position interactive targets for fast, accurate interaction.

Infrasity-Labs/dev-gtm-claude-skills

When the user wants to plan a product launch, feature announcement, or release strategy. Also use when the user mentions 'launch,' 'Product Hunt,' 'feature release,' 'announcement,' 'go-to-market,' 'beta launch,' 'early access,' 'waitlist,' 'product update,' 'how do I launch this,' 'launch checklist,' 'GTM plan,' or 'we're about to ship.' Use this whenever someone is preparing to release something publicly. For ongoing marketing after launch, see marketing-ideas.

Infrasity-Labs/dev-gtm-claude-skills

Design interfaces that adapt gracefully to multiple languages, writing directions, and cultural contexts.

Infrasity-Labs/dev-gtm-claude-skills

Create platform-specific social media posts for LinkedIn, Facebook, Instagram, and Reddit. Handles character limits, hashtag strategies, hook placement, and image specs per platform. Works from scratch, from existing content (blog, newsletter, announcement), or as a multi-platform campaign. Produces copy-paste-ready posts. Triggers: 'social media post', 'linkedin post', 'facebook post', 'instagram caption', 'reddit post', 'social posts', 'post to social', 'repurpose for social', 'social media campaign'.

Infrasity-Labs/dev-gtm-claude-skills

Transform resume bullets into detailed portfolio case studies

Infrasity-Labs/dev-gtm-claude-skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

Infrasity-Labs/dev-gtm-claude-skills

Audits any landing or service page across 48 checks in 10 categories for LLM/AI discoverability, GEO readiness, content clarity, schema markup, internal linking, freshness signals, and technical crawlability. Produces an overall score out of 100, a per-category score out of 100, pass/warn/fail/ manual counts, and a prioritised fix list — all rendered as a standalone HTML report saved to disk. Use when a user provides a URL and asks to audit it, score it, check its GEO readiness, test its AI discoverability, run a landing page audit, or evaluate it for LLM citation potential. Also trigger on phrases like "audit this page", "score this URL", "check GEO for", "is this page AI-ready", "run a GEO audit", "LLM page check", "how would AI read this page", or "landing page score".

関連スキル