Official코딩 & 개발github.com

웹 인터페이스 가이드라인

UI 코드를 웹 인터페이스 가이드라인에 따라 검토합니다. 요청 시 사용하세요.

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

이 스킬은 제공된 UI 코드가 웹 인터페이스 가이드라인을 준수하는지 검토하는 데 사용됩니다. 개발자가 파일이나 패턴을 지정하면, 최신 가이드라인을 원격 URL에서 가져와 해당 규칙을 코드에 적용하고, 'file:line' 형식으로 간결하게 위반 사항을 출력합니다. Vercel Labs의 공식 가이드라인 레포지토리를 기반으로 하므로 항상 최신 표준을 반영합니다. 주로 Claude Code와 같은 AI 코딩 도우미에서 활용되어 프런트엔드 코드의 일관성과 접근성, 반응형 디자인 등의 규칙을 자동으로 검사할 수 있습니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/vercel-labs/agent-skills/tree/main/skills/web-design-guidelines

Installed? Explore more 코딩 & 개발 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

원본 보기→모든 스킬 둘러보기

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

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

웹 인터페이스 가이드라인은(는) 무엇을 하나요?

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

작동 방식

  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. 가이드라인에 지정된 형식으로 결과를 출력합니다.

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

Individual skills in this repo

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

deploy-to-vercel

Deploy applications and websites to Vercel. Use when the user requests deployment actions like "deploy my app", "deploy and give me the link", "push this live", or "create a preview deployment".

vercel-cli-with-tokens

Deploy and manage projects on Vercel using token-based authentication. Use when working with Vercel CLI using access tokens rather than interactive login — e.g.

vercel-composition-patterns

React composition patterns that scale. Use when refactoring components with

vercel-labs/vercel-composition-patterns

React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.

vercel-labs/vercel-react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

vercel-labs/vercel-react-native-skills

React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.

vercel-labs/vercel-react-view-transitions

Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.

vercel-optimize

Use for Vercel cost and performance optimization on deployed projects, especially Next.js, SvelteKit, Nuxt, and limited Astro apps. Collect Vercel metrics, usage, project config, and code scan results first; investigate only metric-backed candidates; produce ranked recommendations grounded in verified files and version-aware Vercel/framework docs. Trigger for Vercel bill reduction, slow or expensive routes, caching opportunities, Function Invocations, Build Minutes, Fast Data Transfer, Core Web Vitals, Bot Management, Fluid compute, or cost breakdown requests.

vercel-react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

vercel-react-native-skills

React Native and Expo best practices for building performant mobile apps. Use

writing-guidelines

Review docs/prose for Writing Guidelines compliance. Use when asked to

관련 스킬

steipete/bluebubbles

Send and manage iMessages via BlueBubbles, including attachments, tapbacks, edits, replies, and groups.

community

steipete/eightctl

Control Eight Sleep pods (status, temperature, alarms, schedules).

community

steipete/blucli

BluOS CLI (blu) for discovery, playback, grouping, and volume.

community

steipete/bear-notes

Create, search, and manage Bear notes via grizzly CLI.

community

steipete/camsnap

Capture frames or clips from RTSP/ONVIF cameras.

community

steipete/gifgrep

Search GIF providers with CLI/TUI, download results, and extract stills/sheets.

community
← More 코딩 & 개발 skills