本文へ移動
cccskills
無料GitHub で公開

quality-performance

Speed, accessibility, and testing bars every delivered app must clear — Core Web Vitals, WCAG 2.2 AA, TDD real-browser E2E, and the build-fail gates.

インストール方法を見る

含まれるファイル(1)

  • SKILL.md2.2 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Quality & Performance — every app must clear these bars

Core Web Vitals (per route)

  • LCP ≤ 2.0s · CLS ≤ 0.05 · INP ≤ 100ms (cinematic target; ≤ 200ms hard ceiling). Per-route asset budget enforced.
  • Lighthouse: Performance ≥ 75 · Accessibility ≥ 95, run in CI (Lighthouse CI).

Accessibility (WCAG 2.2 AA)

  • axe-core 0 violations at all 6 breakpoints (375 · 390 · 768 · 1024 · 1280 · 1920). ADA Title II ready.
  • Everything keyboard-operable; visible focus; honors prefers-reduced-motion. (Contrast/target-size specifics live in visual-experience.)

Testing (TDD-first, real flows)

  • Failing Playwright E2E spec BEFORE implementation — watch RED → GREEN. Bug fix = failing regression test FIRST. No feature without ≥1 E2E; no fix without ≥1 regression.
  • E2E runs against the PROD URL in a real browser: goto('/') then navigate by clicks/keyboard only (no page.goto after load). Deterministic (locator waits, no sleeps), parallel-safe, hermetic.
  • Every clickable element · form field · nav link · API endpoint · modal · keyboard shortcut · error/empty/loading state has ≥1 E2E asserting it against prod.
  • Coverage matrix: fullyParallel × 6 viewports × 3 browsers, sharded. Units via Vitest.
  • Simulate realistic full user journeys (homepage → discover → convert) via Cloudflare Browser Rendering or Browserbase (whichever is configured). Drive HIGH % code coverage from these end-to-end journey runs, not just units.

Build-fail gates (any one = fail)

  • Console errors · CSP violations · 4xx/5xx · axe violations · broken hyperlinks — in ANY test — fail the build.
  • AI-vision QA ≥ 8/10 on every new/changed route (random snapshot sampling per run). Visual regression via Percy / pixelmatch.

Mocked ≠ green

  • A mocked/stubbed render is NOT a pass. "Deploy succeeded" ≠ "works" — only a real-browser prod run with 0 console errors and asserted content counts as green.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Every delivered app — the non-inferable business requirements + exact stack/brand choices every build must satisfy. Loads on every app/site build.

日本語の概要は準備中です。原文の説明を表示しています。

heymegabyte/agent-skills232026年10月11日 更新

Cloudflare-first platform selection. Decision trees for Workers, D1, R2, KV, DO, Queues, Vectorize, Containers, Sandboxes, Flagship, Agent Memory, Workflows v2. Default stack, override conditions, auth, data patterns, reliability.

日本語の概要は準備中です。原文の説明を表示しています。

heymegabyte/agent-skills232026年10月11日 更新

Extract real brands (Wayback for rebuilds). Copy system, headline/CTA rules, trust surfaces, legal pages, SEO+structured data, anti-AI-slop, microcopy, DESIGN.md, W3C DTCG tokens, pSEO 5 types, GEO/AI search.

日本語の概要は準備中です。原文の説明を表示しています。

heymegabyte/agent-skills232026年10月11日 更新

Implements features in vertical slices, always starting with homepage. Enforces anti-placeholder rules — no lorem ipsum, no TODO stubs, no gray boxes. Real content, real images, real interactions. TypeScript strict mode, Zod validation, and structured file organization.

日本語の概要は準備中です。原文の説明を表示しています。

heymegabyte/agent-skills232026年10月11日 更新

The consolidated, world-class Cloudflare + integrations reference — CF platform/data/AI-edge patterns, media pipeline, observability/growth, payments, and the site-generation pipeline. The non-inferable choices that build the greatest web apps.

日本語の概要は準備中です。原文の説明を表示しています。

heymegabyte/agent-skills232026年10月11日 更新

One-line-prompt → cinematic, gorgeous, functional, well-tested, deployed website. Pre-hydrated SPA + full PWA kit + JSON-LD rich snippets + third-party integrations. React 19+Vite default (Angular optional). 100 concrete improvements grouped into 10 categories that EVERY single-prompt site build must satisfy before being marked done. Trigger whenever the user says 'make a website for X', 'build a site for X', 'rebuild X.com', or any equivalent one-liner.

日本語の概要は準備中です。原文の説明を表示しています。

heymegabyte/agent-skills232026年10月11日 更新

heymegabyte のスキルをすべて見る

このスキルの問題を報告する