본문으로 건너뛰기
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).

tech-leads-club/agent-skills
설치 방법 보기

이럴 때 유용합니다

  • 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(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

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 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

accessibility

무료

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-skills7.1천2026년 10월 22일 업데이트

ai-cold-outreach

무료

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-skills7.1천2026년 10월 22일 업데이트

ai-pricing

무료

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-skills7.1천2026년 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-skills7.1천2026년 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-skills7.1천2026년 10월 22일 업데이트

ai-ugc-ads

무료

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-skills7.1천2026년 10월 22일 업데이트

tech-leads-club의 스킬 모두 보기

이 스킬의 문제 신고