Communitygithub.com

diegosouzapw/awesome-omni-skill

UI 코드를 웹 인터페이스 가이드라인에 따라 검토합니다. "UI 검토", "접근성 확인", "디자인 감사", "UX 검토", "사이트 모범 사례 확인"과 같은 요청에 사용하세요.

awesome-omni-skill란 무엇인가요?

이 스킬은 개발자가 웹 인터페이스 가이드라인에 따라 UI 코드를 자동으로 감사할 수 있게 해줍니다. 주요 목적은 접근성, 성능, 모범 사례를 검토하여 디자인 및 구현의 품질을 보장하는 것입니다. Claude Code, Cursor, Codex 등 AI 에이전트 플랫폼에서 작동하며, Context7, Tavily, BraveSearch, Serper.dev 같은 도구를 사용해 최신 가이드라인을 불러오고, 이들이 실패할 경우 WebSearch나 WebFetch로 대체합니다. 사용자가 파일이나 패턴을 지정하면 해당 파일을 읽고 모든 규칙을 적용한 후 `file:line` 형식으로 간결하게 결과를 출력합니다. 이 스킬은 "UI 검토", "접근성 확인", "디자인 감사" 등 자연어 요청을 처리하며, 프론트엔드 디자인 스킬과 함께 설계 워크플로우의 감사(AUDIT) 단계에서 사용됩니다.

지원 대상✓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
원본 보기→모든 스킬 둘러보기

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

웹 인터페이스 가이드라인

💡 MCP 도구 사용 가능: 먼저 Context7, Tavily, BraveSearch 또는 Serper.dev를 사용하세요. 이들이 실패할 경우에만 필요에 따라 WebSearch 또는 WebFetch를 사용하세요.

웹 인터페이스 가이드라인 준수 여부를 검토합니다.

작동 방식

  1. 필요할 때 Context7, Tavily, BraveSearch 또는 Serper.dev를 사용해 최신 웹 인터페이스 가이드라인을 불러옵니다. 이들이 실패할 경우에만 WebSearch 또는 WebFetch를 사용합니다.
  2. 지정된 파일을 읽습니다(또는 사용자에게 파일/패턴을 요청합니다).
  3. 가이드라인의 모든 규칙에 대해 확인합니다.
  4. 간결한 file:line 형식으로 결과를 출력합니다.

가이드라인 출처

Context7, Tavily, BraveSearch 또는 Serper.dev를 사용해 웹 인터페이스 가이드라인 문서를 조회합니다. 이들이 실패할 경우에만 WebSearch 또는 WebFetch를 사용합니다. 가이드라인에는 모든 규칙과 출력 형식 지침이 포함되어 있습니다.

사용법

사용자가 파일 또는 패턴 인수를 제공하는 경우:

  1. Context7, Tavily, BraveSearch 또는 Serper.dev(또는 IDE 내 문서)를 사용해 관련 가이드라인을 불러옵니다. 이들이 실패할 경우에만 WebSearch 또는 WebFetch를 사용합니다.
  2. 지정된 파일을 읽습니다.
  3. 가이드라인의 모든 규칙을 적용합니다.
  4. 가이드라인에 지정된 형식을 사용해 결과를 출력합니다.

파일이 지정되지 않은 경우, 검토할 파일을 사용자에게 요청합니다.

관련 스킬

스킬사용 시점
frontend-design코딩 전 - 디자인 원칙(색상, 타이포그래피, UX 심리학) 학습
web-design-guidelines (이것)코딩 후 - 접근성, 성능, 모범 사례 감사

디자인 워크플로우

1. DESIGN   → frontend-design 원칙 읽기
2. CODE     → 디자인 구현
3. AUDIT    → web-design-guidelines 검토 실행 ← 현재 위치
4. FIX      → 감사 결과 해결

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.

관련 스킬

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