Communitygithub.com

Infrasity-Labs/dev-gtm-claude-skills

審查 UI 程式碼是否符合 Web 介面指南。當被要求「審查我的 UI」、「檢查無障礙性」、「稽核設計」、「審查 UX」或「檢查我的網站是否符合最佳實務」時使用。

dev-gtm-claude-skills 是什麼？

這項技能旨在自動化審查網頁 UI 程式碼是否符合一套可動態擷取的 Web 介面指南。它會從外部來源擷取最新規則，然後根據這些規則分析使用者指定的檔案，並以簡潔的 `file:line` 格式輸出結果，方便開發者快速定位問題。此技能支援 Vercel Labs 維護的指南，並可整合 `ui-ux-pro-max` 技能提供更深入的修正建議。其運作流程包括：擷取指南、讀取檔案、套用規則、輸出結果，若未指定檔案則會提示使用者。

相容平台✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/Infrasity-Labs/dev-gtm-claude-skills/tree/HEAD/.claude/skills/web-design-guidelines
查看原文→瀏覽所有技能

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

說明文件

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

相關技能

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community