القائمة
Technical SEO for web apps — title/meta, OG, semantics, indexable content, CWV overlap. Use for landing pages, marketing routes, "SEO", "meta tags", "Open Graph", or making app routes discoverable.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Chat-first frontend UI quality suite — 22 skills across UI Quality, Responsive, Ship FE, and Depth pillars. Token decision tree, compliance gates, anti-AI-slop, motion vocabulary (12 families), marketing landing recipes, and quality loop. Auto-loads on any UI/build/audit/polish request — no slash commands needed.
Enforce WCAG 2.1 AA (keyboard, ARIA, focus, contrast, semantic HTML). Use for accessibility work, pre-ship UI checks, and as a light pass on every UI build or design review — including "a11y", "keyboard", "screen reader", or shipping user-facing changes, without requiring a slash command.
Name a design or UI concept from a loose description. Reverse-lookup for design terms — user describes something vaguely ("card floating over blur", "zig-zag layout"), skill returns the proper name + brief definition. Use when the user uses informal language for a UI concept, or when you need the correct term to search references or communicate precisely.
Name a frontend engineering concept from a loose description. Reverse-lookup for FE technical terms — user describes a pattern informally ("supaya gak fetch ulang", "render cuma yang keliatan"), skill returns the proper name + brief definition. Use when the user uses informal language for a technical concept, or when you need the correct term to pick the right implementation.
Optimize frontend Core Web Vitals (LCP, INP, CLS) and loading/rendering/network. Use when the UI feels slow, images/fonts/bundles need work, or during design audits that touch performance — phrases like "lemot", "optimize", "LCP", or "Core Web Vitals" without requiring a slash command.
Write new skill files for the Frontend Expert pack following conventions. Use when the user wants to add a new skill, extend the pack, or says "make this a skill", "buat skill baru", or "tambah skill". Documents the pack's SKILL.md structure, frontmatter format, checklist pattern, and integration points (AGENTS.md, plugin.json, compliance-gates).
| name | fe-seo |
| description | Technical SEO for web apps — title/meta, OG, semantics, indexable content, CWV overlap. Use for landing pages, marketing routes, "SEO", "meta tags", "Open Graph", or making app routes discoverable. |
Ship indexable, shareable pages. Don’t duplicate full LCP guides — pair with web-performance for CWV.
noindex| Item | Rule |
|---|---|
| Title | Unique per route; aligns with visible H1 theme |
| Description | Meta description present and useful |
| H1 | One primary heading; sequential ladder (frontend-judgment) |
| OG | og:title, og:description, og:image (valid URL) on shareable pages |
| Indexability | SSR/SSG/prerender for marketing; avoid empty client-only shells |
Private app routes: prefer noindex rather than fake marketing meta.
web-performance / fe-devtools for measured LCP/CLSsummary vs summary_large_image<title> / metadata API equivalentnoindex on private app chrome when appropriatereferences/fe-seo.md. Perf: references/performance.md. Type: frontend-judgment Typography ladder.