Communitygithub.com

Anhvu1107/all-agent-skill

웹사이트 레이아웃, 구조, 상호작용 패턴, 접근성 및 프로덕션 웹 프레젠테이션을 설계하거나 검토할 때 항상 사용하세요.

all-agent-skill란 무엇인가요?

이 스킬은 AI 에이전트가 웹 인터페이스를 설계하거나 검토할 때 반드시 따라야 할 종합적인 가이드라인을 제공합니다. 핵심 파일(`senior-master-standard.md`, `usage-routing.md`, `quality-checklist.md`)을 먼저 읽고, 사용자 작업에 맞는 추가 문서를 선택적으로 로드하는 선택적 읽기 규칙을 적용합니다. Vercel Labs의 최신 웹 인터페이스 가이드라인을 원격으로 가져와(fetch) 규칙을 확인하고, `file:line` 형식으로 간결하게 결과를 출력합니다. 주로 코딩 완료 후 감사(audit) 단계에서 사용되며, 프론트엔드 디자인 원칙 학습 후 접근성, 성능, 모범 사례를 검토하는 데 최적화되어 있습니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Anhvu1107/all-agent-skill/tree/HEAD/.agent/skills/web-design-guidelines
원본 보기→모든 스킬 둘러보기

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

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

웹 인터페이스 가이드라인

선택적 읽기 규칙

다음 파일부터 시작하세요:

  • references/senior-master-standard.md
  • references/usage-routing.md
  • references/quality-checklist.md

그런 다음 사용자의 실제 작업과 일치하는 상속된 문서, 스크립트, 에셋 또는 예제만 로드하세요.

파일이 웹 인터페이스 가이드라인을 준수하는지 검토하세요.

작동 방식

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

파일이 지정되지 않은 경우, 사용자에게 검토할 파일을 물어보세요.

관련 스킬

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

디자인 워크플로우

1. 설계   → 프론트엔드 디자인 원칙 읽기
2. 코딩   → 디자인 구현
3. 감사   → 웹-디자인-가이드라인 검토 실행 ← 현재 위치
4. 수정   → 감사 결과 처리

Individual skills in this repo

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

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches 007: Security audit, hardening, threat modeling (STRIDE/PASTA), Red/Blue Team, OWASP checks, code review, incident response, and infrastructure security for any project.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Agentfolio: Skill for discovering and researching autonomous AI agents, tools, and ecosystems using the AgentFolio directory.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Animejs Animation: Advanced JavaScript animation library skill for creating complex, high-performance web animations.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Astropy: Astropy is the core Python package for astronomy, providing essential functionality for astronomical research and data analysis.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Astro: Build content-focused websites with Astro — zero JS by default, islands architecture, multi-framework components, and Markdown/MDX support.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Emotional ARC Designer: One sentence - what this skill does and when to invoke it

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Fixing Motion Performance: Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches I18n Localization: Internationalization and localization patterns.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Interactive Portfolio: Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches JQ: Expert jq usage for JSON querying, filtering, transformation, and pipeline integration.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Landing Page Generator: Generates high-converting Next.js/React landing pages with Tailwind CSS.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches LEX: Centralized ''Truth Engine'' for cross-jurisdictional legal context (US, EU, CA) and contract scaffolding.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Magic Animator: AI-powered animation tool for creating motion in logos, UI, icons, and social media assets.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Makepad Animation: CRITICAL: Use for Makepad animation system.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Nextjs APP Router Patterns: Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.

Anhvu1107/all-agent-skill

ALWAYS use this when the user mentions Nextjs Best Practices, asks to build, debug, review, document, automate, test, configure, migrate, or make decisions in this domain, or the task clearly depends on Nextjs Best Practices; scope: Next.js App Router principles. Apply the bundled workflow, references, scripts, Senior Master standard, and Codex strict review gate before final output.

Anhvu1107/all-agent-skill

description: ALWAYS use this when the work is specifically about modern Next.js or React architecture, data flow, rendering strategy, routing, or performance-sensitive frontend behavior.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Nextjs Supabase Auth: Expert integration of Supabase Auth with Next.js App Router

Anhvu1107/all-agent-skill

ALWAYS use this when the task involves reading, extracting, splitting, merging, rotating, creating, validating, OCR-ing, form-filling, or otherwise producing or modifying PDF files.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches React Nextjs Development: React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns.

관련 스킬

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