القائمة
WCAG compliance checking and accessibility improvements. Use for auditing websites, fixing a11y issues, and implementing inclusive design.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Android development patterns for Kotlin/Java including MediaProjection, Accessibility Service, Socket.IO, and foreground services. Use when working on TitanMirror or other Android projects.
Design RESTful APIs with proper routes, validation, error handling, and documentation. Use when building backend services for PSI Engine or other server applications.
Automate browser interactions including form filling, clicking, typing, navigation, and screenshot capture. Use this skill when testing web apps, automating uploads, or validating UI on TikTok, YouTube, or other web platforms.
Build Chrome Extensions with Manifest V3, background service workers, content scripts, and message passing. Use when developing TikTok Uploader extension or any browser extensions.
Automated CI/CD pipeline setup with GitHub Actions, deployment strategies, and automation workflows. Use for build automation, testing, and deployment.
Cloud migration strategies for AWS, GCP, and Azure. Use for lift-and-shift, replatforming, and cloud-native architecture design.
| name | accessibility-audit |
| description | WCAG compliance checking and accessibility improvements. Use for auditing websites, fixing a11y issues, and implementing inclusive design. |
| Principle | Description |
|---|---|
| Perceivable | Content viewable by all users |
| Operable | Interface usable by all users |
| Understandable | Clear and predictable |
| Robust | Works with assistive tech |
<!-- Bad ❌ -->
<img src="logo.png">
<!-- Good ✅ -->
<img src="logo.png" alt="Company Logo">
<!-- Decorative (empty alt) -->
<img src="divider.png" alt="">
<!-- Bad ❌ -->
<input type="text" placeholder="Email">
<!-- Good ✅ -->
<label for="email">Email Address</label>
<input type="email" id="email" name="email" required>
<!-- Bad ❌ -->
<div onclick="submit()">Submit</div>
<!-- Good ✅ -->
<button type="submit">Submit</button>
<!-- Bad ❌ -->
<a href="#">Click here</a>
<!-- Good ✅ -->
<a href="/products">View all products</a>
| Level | Ratio | Use For |
|---|---|---|
| AA Normal | 4.5:1 | Regular text |
| AA Large | 3:1 | 18pt+ or 14pt bold |
| AAA Normal | 7:1 | Enhanced accessibility |
/* Good contrast */
.text {
color: #1e293b; /* Dark gray */
background: #ffffff; /* White */
/* Contrast ratio: 13.5:1 ✅ */
}
/* Bad contrast */
.text {
color: #94a3b8; /* Light gray */
background: #ffffff; /* White */
/* Contrast ratio: 2.8:1 ❌ */
}
// Focus management
element.focus();
element.blur();
// Focus trap for modals
const focusableElements = modal.querySelectorAll(
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
);
<!-- Live regions for dynamic content -->
<div aria-live="polite" aria-atomic="true">
Status: Loading...
</div>
<!-- Hidden visually but readable -->
<span class="sr-only">Opens in new tab</span>
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
# Lighthouse CLI
npx lighthouse https://example.com --view
# axe-core
npm install axe-core