Communitygithub.com

웹 인터페이스 가이드라인 검토

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

웹 인터페이스 가이드라인 검토란 무엇인가요?

이 스킬은 웹 인터페이스 가이드라인을 기준으로 UI 코드의 규정 준수 여부를 자동으로 검토합니다. 'UI를 검토해줘', '접근성을 확인해줘', '디자인을 감사해줘'와 같은 요청 시 즉시 사용할 수 있습니다. Claude Code, Cursor, Codex와 같은 AI 에이전트 플랫폼에서 활용 가능하며, 작업 순서는 다음과 같습니다: 1) 지정된 URL에서 최신 가이드라인을 가져오고, 2) 사용자가 제공한 파일(또는 패턴)을 읽은 후, 3) 가져온 모든 규칙을 적용하여 검토하고, 4) `file:line` 형식으로 간결하게 결과를 출력합니다. 이 스킬은 디자인 검토 워크플로우에서 '코드 작성 후 최종 감사(AUDIT)' 단계에 해당하여, 프론트엔드 디자인 원칙 학습(전용 스킬)과 함께 사용하면 디자인-코드-감사-수정의 완전한 사이클을 구성할 수 있습니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/majiayu000/claude-skill-registry/tree/HEAD/skills/design/web-design-guidelines-congdon1207-agents-md

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

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

문서

웹 인터페이스 가이드라인

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

작동 방식

  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. 가이드라인에 명시된 형식을 사용하여 결과를 출력합니다.

파일이 지정되지 않은 경우, 검토할 파일을 사용자에게 문의하세요.


관련 스킬

스킬사용 시점
프론트엔드 디자인코딩 전 - 디자인 원칙(색상, 타이포그래피, UX 심리학) 학습 시
웹 디자인 가이드라인(현재)코딩 후 - 접근성, 성능, 모범 사례 감사 시

디자인 워크플로우

1. 디자인(DESIGN)   → 프론트엔드 디자인 원칙 읽기
2. 코딩(CODE)       → 디자인 구현하기
3. 감사(AUDIT)      → 웹 디자인 가이드라인 검토 실행 ← 현재 위치
4. 수정(FIX)        → 감사 결과에 따른 문제 해결

Individual skills in this repo

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

majiayu000/claude-skill-registry

Builds, edit or validate Agent Skill through conversational discovery. Use when the user requests to "Create an Agent", "Optimize an Agent" or "Edit an Agent".

majiayu000/claude-skill-registry

Edit existing BMAD agents while maintaining compliance

majiayu000/claude-skill-registry

Edit existing BMAD agents while maintaining compliance

majiayu000/claude-skill-registry

Edit existing BMAD modules while maintaining coherence

majiayu000/claude-skill-registry

Edit existing BMAD modules while maintaining coherence

majiayu000/claude-skill-registry

Analyzes current state and user query to answer BMad questions or recommend the next workflow or agent. Use when user says what should I do next, what do I do now, or asks a question about BMad

majiayu000/claude-skill-registry

Build AI agents with Google ADK Python (Agent Development Kit). Use for multi-agent systems, workflow agents (sequential/parallel/loop), Vertex AI deployment, tool integration, human-in-the-loop.

majiayu000/claude-skill-registry

Build AI agents with Google ADK Python (Agent Development Kit). Use for multi-agent systems, workflow agents (sequential/parallel/loop), Vertex AI deployment, tool integration, human-in-the-loop.

majiayu000/claude-skill-registry

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.

majiayu000/claude-skill-registry

Create a hilarious and ultra-realistic video of an anthropomorphic animal acting like a human vlogger in a real-world setting.

majiayu000/claude-skill-registry

Speech-to-text transcription and translation via OpenAI Audio API -- models, response formats, timestamps, prompting, streaming, chunking, and diarization

majiayu000/claude-skill-registry

BlockRun works with Claude Code and Google Antigravity.

majiayu000/claude-skill-registry

This skill should be used when the user asks about libraries, frameworks, API references, or needs code examples. Activates for setup questions, code generation involving libraries, or mentions of specific frameworks like React, Vue, Next.js, Prisma, Supabase, etc.

majiayu000/claude-skill-registry

小省导购员数字人带货版即梦视频提示词生成系统,基于四大智能体协同(提示词生成师、质量管控师、知识库运维师、跨环节适配师),按照"主体+运动+场景+(镜头语言+光影+氛围)"公式输出中英文双版提示词,适配5s短视频。确保人物一致性、视觉连贯性、情绪连贯性,支持知识库智能复用和跨工具适配(Suno音乐、AI绘画),为数字人带货视频提供高质量提示词生成服务。

majiayu000/claude-skill-registry

Upload and manage files using Google Gemini File API via scripts/. Use for uploading images, audio, video, PDFs, and other files for use with Gemini models. Supports file upload, status checking, and file management. Triggers on "upload file", "file API", "upload image", "upload PDF", "upload video", "file management".

majiayu000/claude-skill-registry

CRITICAL: Use for MolyKit AI chat toolkit. Triggers on: BotClient, OpenAI, SSE streaming, AI chat, molykit, PlatformSend, spawn(), ThreadToken, cross-platform async, Chat widget, Messages, PromptInput, Avatar, LLM

majiayu000/claude-skill-registry

AI and machine learning workflow covering LLM application development, RAG implementation, agent architecture, ML pipelines, and AI-powered features.

majiayu000/claude-skill-registry

Analyze images/audio/video with Gemini API (better vision than Claude). Generate images (Imagen 4), videos (Veo 3). Use for vision analysis, transcription, OCR, design extraction, multimodal AI.

majiayu000/claude-skill-registry

Analyze images/audio/video with Gemini API (better vision than Claude). Generate images (Imagen 4), videos (Veo 3). Use for vision analysis, transcription, OCR, design extraction, multimodal AI.

majiayu000/claude-skill-registry

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

관련 스킬