Communitygithub.com

gabrielmoreira/agent-skills-mirror

審查 UI 程式碼是否符合 Web 介面指南。

agent-skills-mirror 是什麼？

此技能專用於審查網頁前端程式碼是否遵循 Web 介面指南。它會先從指定的來源 URL 擷取最新版本的指南規則，然後讀取使用者指定的檔案或目錄模式，並逐一比對所有規則。審查結果會以簡潔的「file:line」格式輸出，讓開發者能快速定位需要修正的地方。此技能支援任何能執行檔案讀取與 WebFetch 操作的 AI 代理平台（如 Claude Code、Cursor 等）。它與另一個名為「frontend-design」的技能形成互補的工作流程：前者在設計階段提供色彩、排版與 UX 心理學的原則，而此技能則在實作後進行可及性、效能與最佳實務的稽核。總之，此技能幫助開發者在程式碼層級確保產出的 UI 符合業界標準指南。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/gabrielmoreira/agent-skills-mirror/tree/HEAD/mirrors/repos/Dokhacgiakhoa@Agent-skills-setup-for-AntiGravity/.agent/skills/web-design-guidelines
查看原文→瀏覽所有技能

在你喜歡的 AI 中提問

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

說明文件

Web 介面指南

審查檔案是否符合 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 18 individual skills — each has its own dedicated page.

gabrielmoreira/agent-skills-mirror

Design exclusive bonus packages that make YOUR affiliate link the obvious choice. Triggers on: "create bonuses for", "bonus stack", "what bonuses should I offer", "bonus ideas for", "exclusive bonuses", "differentiate my affiliate link", "why buy through my link", "affiliate bonuses", "bonus package", "what can I offer as a bonus", "design bonuses", "build a bonus stack".

gabrielmoreira/agent-skills-mirror

Design irresistible affiliate offers using the Hormozi Grand Slam framework. Triggers on: "create an offer for", "design my offer", "grand slam offer", "make an irresistible offer", "why should someone buy through my link", "offer framework", "value proposition for", "Hormozi offer", "offer stack", "make my offer irresistible", "craft an offer", "what makes my offer different", "offer design", "increase perceived value".

gabrielmoreira/agent-skills-mirror

Create YOUR personal guarantee on top of the product's guarantee for risk reversal. Triggers on: "create a guarantee", "guarantee for my affiliate", "risk reversal", "money back guarantee", "what guarantee can I offer", "reduce buyer risk", "guarantee copy", "how to guarantee", "affiliate guarantee", "personal guarantee", "risk-free offer", "satisfaction guarantee", "results guarantee".

gabrielmoreira/agent-skills-mirror

Build high-converting affiliate landing pages as single self-contained HTML files. Triggers on: "create a landing page for", "build a landing page", "product landing page", "affiliate landing page", "comparison page for", "vs page", "single product page", "conversion page", "sales page for affiliate", "landing page HTML", "build me a page for", "create a page to promote [product]", "I need a landing page", "make a page for [product]".

gabrielmoreira/agent-skills-mirror

Build a single-product deep-dive showcase page as a self-contained HTML file. Triggers on: "build a product showcase page", "deep dive landing page for [product]", "create a product spotlight page", "product feature page", "single product page", "detailed page about [product]", "build a page showing everything about [product]", "create a long-form product page", "build a sales page for [product]", "product deep dive page", "make a feature breakdown page for [product]".

gabrielmoreira/agent-skills-mirror

Build email capture landing pages (squeeze pages) as single self-contained HTML files. Triggers on: "build a squeeze page", "email capture page", "lead magnet page", "create an opt-in page", "build an email list page", "lead capture landing page", "create a freebie page", "build a page to collect emails", "opt-in landing page", "email signup page for [product/niche]", "create a lead magnet landing page", "build a page that captures emails before sending to affiliate offer".

gabrielmoreira/agent-skills-mirror

Design the complete free-to-premium value ladder for affiliate promotions. Triggers on: "value ladder", "customer journey", "upsell path", "ascension model", "free to paid funnel", "tripwire offer", "upsell strategy", "downsell", "product ladder", "price ladder", "customer ascension", "funnel architecture", "map my funnel", "design my funnel stages", "monetization path".

gabrielmoreira/agent-skills-mirror

Build a webinar or live event registration page as a self-contained HTML file with countdown timer, speaker bio, agenda, and registration form. Triggers on: "build a webinar registration page", "create a webinar sign-up page", "event registration landing page", "live training registration page", "workshop sign-up page", "create a webinar page", "build an event page", "free webinar landing page", "live demo registration page", "online event page", "create a registration page for my webinar", "build a training event page".

gabrielmoreira/agent-skills-mirror

Audit paid-ad landing pages for message match, mobile experience, performance, accessibility, trust, forms, consent, tracking, security, and conversion friction. Use for landing-page audit, post-click experience, LP audit, conversion-rate optimization, form optimization, ad-to-page message match, redirects, blocked navigation, or requests involving private, loopback, link-local, or metadata IP destinations.

gabrielmoreira/agent-skills-mirror

Automate Klipfolio tasks via Rube MCP (Composio). Always search tools first for current schemas.

gabrielmoreira/agent-skills-mirror

Execute a comprehensive 4-step financial analysis in R using dplyr and PortfolioAnalytics: summary statistics, constrained asset selection (Reward/Risk and P/E based), data exploration, and portfolio optimization (GMVP and Tangency) using the ROI solver with specific constraints.

gabrielmoreira/agent-skills-mirror

Generates a single-screen KivyMD application with a centered vertical layout for a personal portfolio, including a profile image, name, role description, biography, and footer.

gabrielmoreira/agent-skills-mirror

Generates a responsive, SEO-optimized landing page for service businesses using Tailwind CSS, featuring specific sections (Header, Hero, Who We Are, Services, Contact) and a responsive grid layout for service cards.

gabrielmoreira/agent-skills-mirror

Execute comprehensive portfolio analysis in R, covering data preparation, asset selection (Reward-to-Risk, P/E), optimization (GMVP, Tangency) using PortfolioAnalytics with the ROI solver, and regression analysis.

gabrielmoreira/agent-skills-mirror

Generate and rewrite marketing content for software services and portfolios. Adapts tone from professional agency to customer-centric, handles style mimicry, formatting constraints, and strictly manages perspective (e.g., removing first-person pronouns for portfolio contexts).

gabrielmoreira/agent-skills-mirror

When the user wants to design, deploy, or measure Apple Custom Product Pages (CPP) — the alternate App Store product pages with different screenshots, preview videos, and promo text shown to users coming from specific URLs (typically ad campaigns or social posts). Use when the user mentions "Custom Product Page", "CPP", "alternate product page", "App Store URL variant", "ASA CPP", "campaign-specific landing page", "product page per audience", "App Store Connect CPP", "ppoUrl", "?cpp=" parameter, or "show different screenshots to different ad audiences". For App Store A/B tests on the default page, see ab-test-store-listing. For paid ad campaigns that route to CPPs, see apple-search-ads or ua-campaign.

gabrielmoreira/agent-skills-mirror

Generate complete, deploy-ready landing pages from any repository. Use when creating a homepage for an open-source project, building a project website, converting a README into a marketing page, or standardizing landing pages across multiple repos.

gabrielmoreira/agent-skills-mirror

Shapes job-seeking personal sites: thirty-second hero, outcome-led case studies, hybrid home-plus-project routes, and frictionless contact CTAs, with heavy motion that degrades on mobile. Use for developer, designer, or creative portfolio work. Not a SaaS marketing landing page and not a WebGL engine tutorial.

相關技能

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