Communitygithub.com

Infrasity-Labs/dev-gtm-claude-skills

审查 UI 代码是否符合 Web 界面指南。当用户要求“审查我的 UI”、“检查可访问性”、“审计设计”、“审查 UX”或“对照最佳实践检查我的网站”时使用。

dev-gtm-claude-skills 是什么？

该技能用于自动化审查用户界面（UI）代码，确保其符合最新的 Web 界面指南和最佳实践。它通过从指定的 GitHub 源 URL 动态获取最新规则，然后读取目标文件或由用户指定的文件，并逐条应用这些规则进行检查。技能的输出格式非常简练，采用 `file:line` 的形式，方便开发者快速定位问题。它支持多种平台和 IDE，如 Claude Code、Cursor 等，通过简单的自然语言触发，例如“检查可访问性”或“审计设计”。此外，对于发现的每个问题，该技能还能提供后续的补救指导，通过集成 `ui-ux-pro-max` 技能，针对可访问性、表单 UX、动画、导航和性能等不同类别提供更深入的修复建议。

兼容平台✓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