Communitygithub.com

Anhvu1107/all-agent-skill

在設計或審查網站佈局、結構、互動模式、無障礙性或正式上線的網頁呈現時，一律使用此技能。

all-agent-skill 是什麼？

此技能「Web Interface Guidelines」是一個專為AI代理設計的審計工具，用於確保網站符合業界最佳實踐。它首先從指定的來源URL取得最新準則文件，然後讀取使用者提供的檔案或目錄，並根據這些規則進行全面檢查。技能會輸出簡潔的`file:line`格式的發現報告，方便開發者快速定位問題。支援的平台包括Claude Code、Cursor、Codex等AI代理工具。核心運作流程是：先取得`references/senior-master-standard.md`等基礎文件，再根據使用者的實際任務載入相關的繼承文件，最後與從Vercel Labs維護的公開儲存庫取得的準則進行比對。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Anhvu1107/all-agent-skill/tree/HEAD/.agent/skills/web-design-guidelines
查看原文→瀏覽所有技能

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

說明文件

Web 介面準則

選擇性閱讀規則

從以下文件開始：

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

然後僅載入與使用者實際任務相符的繼承文件、腳本、資源或範例。

檢查檔案是否符合 Web 介面準則。

運作方式

  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. 設計   → 閱讀 frontend-design 原則
2. 編碼     → 實作設計
3. 審計    → 執行 web-design-guidelines 審查 ← 您在此處
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