Communitygithub.com

Web-Oberflächenrichtlinien

Überprüft UI-Code auf Einhaltung der Web-Oberflächenrichtlinien. Verwende dies bei Anfragen wie 'UI prüfen', 'Barrierefreiheit checken', 'Design auditieren', 'UX überprüfen' oder 'Seite auf Best Practices prüfen'.

Was ist Web-Oberflächenrichtlinien?

Dieser Skill (diegosouzapw/awesome-omni-skill) dient der automatisierten Prüfung von UI-Code auf Einhaltung aktueller Web-Oberflächenrichtlinien. Er ist besonders nützlich für Entwickler und Designer, die Barrierefreiheit, Performance und Best Practices nach der Implementierung sicherstellen möchten. Der Skill unterstützt Tools wie Context7, Tavily, BraveSearch oder Serper.dev, um die aktuellsten Richtlinien zu laden – nur bei Fehlschlag greift er auf WebSearch oder WebFetch zurück. Nach dem Laden der Richtlinien liest der Skill die angegebenen Dateien, wendet sämtliche Regeln an und gibt die Ergebnisse im präzisen Format 'Datei:Zeile' aus. So können Audit-Ergebnisse schnell in der IDE oder im Terminal nachvollzogen werden.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/diegosouzapw/awesome-omni-skill/tree/HEAD/skills/development/web-design-guidelines-darthlinuxer
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-Oberflächenrichtlinien?

💡 MCP-Tool verfügbar: Verwende Context7, Tavily, BraveSearch oder Serper.dev zuerst; nur falls diese fehlschlagen, verwende WebSearch oder WebFetch nach Bedarf.

Überprüfe Dateien auf Einhaltung der Web-Oberflächenrichtlinien.

Funktionsweise

  1. Verwende Context7, Tavily, BraveSearch oder Serper.dev, um bei Bedarf die neuesten Web-Oberflächenrichtlinien zu laden; nur falls diese fehlschlagen, verwende WebSearch oder WebFetch nach Bedarf.
  2. Lies die angegebenen Dateien (oder fordere den Benutzer nach Dateien/Muster auf)
  3. Überprüfe alle Regeln der Richtlinien
  4. Gib die Ergebnisse im knappen Format Datei:Zeile aus

Richtlinienquelle

Verwende Context7, Tavily, BraveSearch oder Serper.dev, um die Dokumentation der Web-Oberflächenrichtlinien abzufragen; nur falls diese fehlschlagen, verwende WebSearch oder WebFetch nach Bedarf. Die Richtlinien enthalten alle Regeln und Anweisungen zum Ausgabeformat.

Verwendung

Wenn ein Benutzer ein Datei- oder Musterargument angibt:

  1. Verwende Context7, Tavily, BraveSearch oder Serper.dev (oder IDE-interne Dokumente), um die relevanten Richtlinien zu laden; nur falls diese fehlschlagen, verwende WebSearch oder WebFetch nach Bedarf
  2. Lies die angegebenen Dateien
  3. Wende alle Regeln aus den Richtlinien an
  4. Gib die Ergebnisse mithilfe des in den Richtlinien angegebenen Formats aus

Wenn keine Dateien angegeben sind, frage den Benutzer, welche Dateien überprüft werden sollen.

Verwandte Skills

SkillWann verwenden
frontend-designVor dem Codieren – Designprinzipien lernen (Farbe, Typografie, UX-Psychologie)
web-design-guidelines (dieser Skill)Nach dem Codieren – Barrierefreiheit, Performance und Best Practices auditieren

Design-Workflow

1. DESIGN   → frontend-design Prinzipien lesen
2. CODE     → Design implementieren
3. AUDIT    → web-design-guidelines Überprüfung durchführen ← DU BIST HIER
4. FIX      → Ergebnisse aus dem Audit beheben

Individual skills in this repo

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

diegosouzapw/awesome-omni-skill

Build a GitHub portfolio that gets you hired — curate 3-5 polished projects, craft compelling READMEs, deploy live demos, tell a coherent story across your repos, and align everything to AI-native development roles. Use when preparing your GitHub for job searches, deciding what to pin, or auditing your public presence.

diegosouzapw/awesome-omni-skill

Skill for discovering and researching autonomous AI agents, tools, and ecosystems using the AgentFolio directory.

diegosouzapw/awesome-omni-skill

Factor modeling and portfolio construction (Markowitz, Black-Litterman, constraints, turnover).

diegosouzapw/awesome-omni-skill

Analyze the CustomGPT.ai Labs Innovation workbook and cost tracking data to surface portfolio-level insights, trends, and recommendations for where to focus Innovation efforts.

diegosouzapw/awesome-omni-skill

Optimize project portfolio selection under constraints using mathematical optimization

diegosouzapw/awesome-omni-skill

Rapidly build, prototype, and deploy full-stack software using AI "text-to-app" tools. Use this when you need to create a greenfield application, build a high-fidelity working prototype for user testing, or bypass traditional engineering bottlenecks for internal tools.

diegosouzapw/awesome-omni-skill

Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios,...

diegosouzapw/awesome-omni-skill

Minimalist, typography-focused portfolio design system inspired by neo-brutalist and Swiss design principles. Emphasizes bold typography, generous whitespace, monochromatic color schemes, and elegant simplicity for developer/designer portfolios.

diegosouzapw/awesome-omni-skill

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

diegosouzapw/awesome-omni-skill

High-converting landing pages. Copy + design + implementation. Triggers: landing page, conversion page.

diegosouzapw/awesome-omni-skill

Portfolio allocation and rebalancing optimizer. Manages asset allocation across stocks/cash/bonds, performs periodic rebalancing, and ensures diversification according to market regime and risk tolerance.

diegosouzapw/awesome-omni-skill

Detect and explain risk drift in lending portfolios over time using vintage analysis, migration matrices, and concentration metrics. Use when monitoring portfolio credit quality trends, preparing board risk reports, conducting stress testing, or when risk metrics deviate from appetite thresholds.

diegosouzapw/awesome-omni-skill

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

diegosouzapw/awesome-omni-skill

Index-based file discovery using ABOUTME headers. Use INSTEAD of grep or Explore agent when searching for files by purpose or feature. Faster and more accurate than scanning code. Invoke this skill when user asks "which files handle X", "where is Y implemented", or when you need to find files related to a feature or task.

diegosouzapw/awesome-omni-skill

Index-based file discovery using ABOUTME headers. Use INSTEAD of grep or Explore agent when searching for files by purpose or feature. Faster and more accurate than scanning code. Invoke this skill when user asks "which files handle X", "where is Y implemented", or when you need to find files related to a feature or task.

diegosouzapw/awesome-omni-skill

Automate Klipfolio tasks via Rube MCP (Composio). Always search tools first for current schemas.

diegosouzapw/service-website-generator

Orchestrates automated service-based website generation with local SEO optimization. Creates 200+ service+location pages using parallel agents, Unsplash images via Jina AI, NextJS with dynamic routing, and PostgreSQL database. Use when building service business websites (plumbers, electricians, pressure washing, HVAC, etc.) targeting multiple locations.

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