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

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

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

같은 저장소의 스킬

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

heymegabyte/agent-skills242026년 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-skills242026년 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-skills242026년 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-skills242026년 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-skills242026년 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-skills242026년 10월 11일 업데이트

heymegabyte의 스킬 모두 보기

이 스킬의 문제 신고