跳到正文
cccskills
免费在 GitHub 公开

web-design-guidelines

Review web interface code for accessibility, visual design, and interaction issues. This skill checks specified files against interface guidelines and returns concise findings grouped by file, with line numbers to help locate each issue.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices". Focuses on visual design and interaction patterns. Do NOT use for performance audits (use core-web-vitals), SEO (use seo), or comprehensive site audits (use web-quality-audit).

查看安装方法

适用场景

  • Reviewing interface code before release
  • Checking keyboard access and focus behavior
  • Inspecting form labels and validation
  • Reviewing dark mode and multilingual interface handling

包含的文件(2)

  • SKILL.md2.0 KB
  • references/guideline.md6.6 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

Web Interface Guidelines

Review files for compliance with Web Interface Guidelines.

How It Works

  1. Read the guidelines from #[[file:references/guideline.md]]
  2. Read the specified files (or prompt user for files/pattern)
  3. Check against all rules in the guidelines
  4. Output findings in the terse file:line format

Guidelines Reference

All rules and output format instructions are in:

#[[file:references/guideline.md]]

The guidelines cover:

  • Accessibility (ARIA, semantic HTML, keyboard navigation)
  • Focus states and keyboard interaction
  • Forms (autocomplete, validation, labels)
  • Animation (reduced motion, performance)
  • Typography (proper characters, number formatting)
  • Content handling (overflow, empty states)
  • Images (dimensions, lazy loading)
  • Performance (virtualization, DOM reads)
  • Navigation & state (URL sync, deep linking)
  • Touch & interaction (tap delays, safe areas)
  • Dark mode & theming
  • Locale & i18n
  • Hydration safety
  • Common anti-patterns to flag

Usage

When a user provides a file or pattern argument:

  1. Read the guidelines from references/guideline.md
  2. Read the specified files
  3. Apply all rules from the guidelines
  4. Output findings using the format specified in the guidelines

If no files specified, ask the user which files to review.

Output Format

Follow the format in the guidelines:

  • Group findings by file
  • Use file:line format (VS Code clickable)
  • Terse, high signal-to-noise
  • State issue + location
  • Skip explanation unless fix is non-obvious

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Audit and improve website accessibility using WCAG 2.1, guidelines for making web content usable by people with disabilities. Check image descriptions, contrast, forms, keyboard controls, and screen reader support with automated and manual testing.

中文简介正在准备中。当前显示英语简介。

  • Checking a site before launch
  • Fixing keyboard navigation and focus
  • Improving form labels and error messages
tech-leads-club/agent-skills70822026年10月22日 更新

Plan personalized sales emails to prospects you have not contacted before. This skill covers prospect selection, contact research, email drafts, follow-up sequences, inbox delivery, and reply handling, with guidance on tools and campaign improvements.

中文简介正在准备中。当前显示英语简介。

  • Drafting personalized sales emails for new prospects
  • Planning a sequence of emails and follow-ups
  • Investigating low reply rates or spam placement
tech-leads-club/agent-skills70822026年10月22日 更新

Plan pricing for AI products by comparing charges based on usage, tasks, or results. Use customer value and computing costs to shape pricing tiers, usage limits, hybrid plans, and margin improvement strategies.

中文简介正在准备中。当前显示英语简介。

  • Choosing how to charge for an AI product
  • Designing pricing tiers and usage limits
  • Reviewing low margins
tech-leads-club/agent-skills70822026年10月22日 更新

ai-sdr

免费

Plan AI sales development systems that qualify prospects, organize outreach, classify replies, and hand opportunities to people. Use customer criteria, budget, CRM setup, and sales goals to shape platform choices and a four-week rollout plan.

中文简介正在准备中。当前显示英语简介。

  • Planning an AI sales development rollout
  • Defining prospect scores and qualification criteria
  • Improving outreach with low reply or meeting conversion rates
tech-leads-club/agent-skills70822026年10月22日 更新

ai-seo

免费

Plan AI-assisted SEO, from keyword research and competitor comparison pages to content production using data and templates. It also guides content changes for AI search citations, tool selection, quality checks, and ongoing performance tracking.

中文简介正在准备中。当前显示英语简介。

  • Planning competitor alternative and comparison pages
  • Designing page production using data and templates
  • Reviewing content for citations in AI Overviews
tech-leads-club/agent-skills70822026年10月22日 更新

Plan UGC campaigns, ads built around user-style content, from creator recruitment and production briefs to AI video variations. Organize organic testing, paid promotion, and creative refreshes for TikTok, Meta, and YouTube Shorts.

中文简介正在准备中。当前显示英语简介。

  • Recruiting creators for product videos
  • Writing a short video production brief
  • Planning AI-generated ad variations
tech-leads-club/agent-skills70822026年10月22日 更新

查看 tech-leads-club 的全部技能

报告此技能的问题