Communitygithub.com

Web-Interface-Richtlinien

Überprüft UI-Code auf Einhaltung der Web-Interface-Richtlinien. Verwenden Sie diese Fähigkeit, wenn Sie aufgefordert werden, 'meine UI zu überprüfen', 'Barrierefreiheit zu prüfen', 'Design zu auditieren', 'UX zu überprüfen' oder 'meine Website auf Best Practices zu prüfen'.

Was ist Web-Interface-Richtlinien?

Diese Fähigkeit ermöglicht es einem KI-Agenten, UI-Codedateien automatisiert gegen die Web Interface Guidelines von Vercel Labs zu prüfen. Sie ruft vor jeder Überprüfung die aktuellsten Richtlinien von einer angegebenen URL ab, liest die vom Benutzer benannten Dateien oder fragt nach einem Dateimuster und wendet alle Regeln der Richtlinien an. Die Ergebnisse werden im knappen `Datei:Zeile`-Format ausgegeben, das eine schnelle Identifikation von Problemen ermöglicht. Die Fähigkeit ist besonders nützlich für Entwickler, die Barrierefreiheit (Accessibility), UX, Designkonsistenz und Best Practices für Web-Interfaces sicherstellen möchten. Nach der Identifizierung von Problemen kann die ergänzende Fähigkeit `ui-ux-pro-max` zur tiefergehenden Behebung in Kategorien wie Barrierefreiheit, Formular-UX, Animation, Navigation und Performance/Layout eingesetzt werden. Die Fähigkeit unterstützt eine effiziente, regelbasierte Code-Review und lässt sich nahtlos in KI-Agenten-Plattformen wie Claude Code, Cursor oder Codex integrieren.

Funktioniert mit✓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
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Was macht Web-Interface-Richtlinien?

Überprüft Dateien auf Einhaltung der Web-Interface-Richtlinien.

Funktionsweise

  1. Rufe die aktuellsten Richtlinien von der unten stehenden Quell-URL ab
  2. Lies die angegebenen Dateien (oder fordere den Benutzer zur Angabe von Dateien/Patterns auf)
  3. Prüfe gegen alle Regeln der abgerufenen Richtlinien
  4. Gib die Ergebnisse im knappen Datei:Zeile-Format aus

Quell-URL der Richtlinien

Rufe vor jeder Überprüfung frische Richtlinien ab:

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

Verwende WebFetch, um die aktuellsten Regeln abzurufen. Der abgerufene Inhalt enthält alle Regeln und Formatierungsanweisungen für die Ausgabe.

Verwendung

Wenn ein Benutzer ein Datei- oder Pattern-Argument angibt:

  1. Rufe Richtlinien von der obigen Quell-URL ab
  2. Lies die angegebenen Dateien
  3. Wende alle Regeln aus den abgerufenen Richtlinien an
  4. Gib die Ergebnisse im in den Richtlinien angegebenen Format aus

Wenn keine Dateien angegeben werden, frage den Benutzer, welche Dateien zu überprüfen sind.

Behebung von Befunden

Nach der Identifizierung von Problemen verwende ui-ux-pro-max, um tiefere Anleitungen zur Behebung pro Kategorie zu erhalten:

# Befunde zur Barrierefreiheit
python3 skills/ui-ux-pro-max/scripts/search.py "accessibility contrast aria keyboard" --domain ux

# Befunde zum Formular-UX
python3 skills/ui-ux-pro-max/scripts/search.py "forms validation error feedback" --domain ux

# Befunde zu Animation/Bewegung
python3 skills/ui-ux-pro-max/scripts/search.py "animation reduced-motion timing" --domain ux

# Befunde zur Navigation
python3 skills/ui-ux-pro-max/scripts/search.py "navigation breadcrumb back behavior" --domain ux

# Befunde zu Performance/Layout
python3 skills/ui-ux-pro-max/scripts/search.py "layout shift lazy loading performance" --domain ux

Ordne die Befunde aus dem Audit dem nächstgelegenen Domain-Schlüsselwort oben zu. Der ui-ux-pro-max-Schnellverweis (Abschnitte 1–9) deckt jede Kategorie ab, die der Richtlinienprüfer aufdeckt.

Verwandte Fähigkeiten

  • ui-ux-pro-max: Tiefgehende UX-Anleitung und Behebungsregeln für jede Befundkategorie
  • frontend-design: Designrichtung und Planung, bevor Code geschrieben wird
  • ui-styling: Komponentenimplementierung – shadcn/ui und Tailwind – wo Behebungen Änderungen auf Komponentenebene erfordern

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

Verwandte Skills

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