Skip to content
cccskills
FreePublished on 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.

The English summary is being prepared. Showing the original description.

heymegabyte/agent-skills
See how to install

Files included (1)

  • SKILL.md2.2 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

app-foundation

Free

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

The English summary is being prepared. Showing the original description.

heymegabyte/agent-skills24Updated Oct 11, 2026

architecture-and-stack

Free

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.

The English summary is being prepared. Showing the original description.

heymegabyte/agent-skills24Updated Oct 11, 2026

brand-and-content-system

Free

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.

The English summary is being prepared. Showing the original description.

heymegabyte/agent-skills24Updated Oct 11, 2026

build-and-slice-loop

Free

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.

The English summary is being prepared. Showing the original description.

heymegabyte/agent-skills24Updated Oct 11, 2026

cf-integrations-reference

Free

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.

The English summary is being prepared. Showing the original description.

heymegabyte/agent-skills24Updated Oct 11, 2026

cinematic-website-prime-directive

Free

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.

The English summary is being prepared. Showing the original description.

heymegabyte/agent-skills24Updated Oct 11, 2026

See all skills by heymegabyte

Report a problem with this skill