VCC Vibe-Coding Center

An educator’s field guide to building with AI

Your classroom idea.
A more thoughtful website.

Turn an idea into a useful learning tool—with a design that fits, safer code, and student privacy in mind.

Explore the three guidesDownload the complete VCC
Three Checks Before You Share: a cartoon showing educators collecting less student data, inspecting an exposed API key, and fitting an exit ticket’s design to its learning task
Open the full-size cartoon · Read the cartoon as text

Choose the help you need

First time? Start here

Read an educator-friendly introduction, then take the full Markdown instruction file into your project. Markdown is a plain-text format your coding assistant can read.

Take the whole workbench

One download.
Room to keep building.

The complete VCC bundle contains this static website and every local component needed to use or host it. Unzip it and start with README.md.

Download complete VCC ZIPVerify file checksums

No account or installation is required to read the guides. Building refreshed HTML requires Python and the dependency listed in requirements.txt.

Inside the bundle

  • All three core Markdown instruction files
  • Readable guides and educator introductions
  • The SecureVCC reference and provenance files
  • Project brief, prompt pack, and launch record
  • AGENTS.md and CLAUDE.md pointer examples
  • Hero art and both supplied visual explainers
  • Resource review, site source, and rebuild scripts

Linked third-party repositories are references, not included software. Licenses and attribution are documented in CREDITS.md.

Helpful GitHubs, with context

Optional tools for purposeful design, accessible interfaces, and security testing. These links complement the three core instruction files; no tool is installed or activated by downloading VCC.

Blue-and-silver illustration of a laptop, website wireframe, magnifying glass, ruler, pencil, and testing checklist

unslop

heydamir/unslop · CC-BY-4.0

Not named in the three core instruction files; optional external resource.

Polish a website after its purpose and structure are clear.

A focused design-refinement skill; requires an agent and optional browser/image tools. Inspect scripts before use; generated images may incur service costs. Retain attribution.

UI UX Pro Max

nextlevelbuilder/ui-ux-pro-max-skill · MIT

Referenced in WEB_DESIGN.md.

Explore design systems, typography, and patterns that fit your users’ task.

Optional CLI and search scripts require developer setup. Treat generated suggestions as candidates to test, and review the rights of any fonts, icons, or other assets separately.

Design Bites

educlopez/design-bites · MIT

Referenced in WEB_DESIGN.md.

Read DESIGN.md examples to discuss visual principles with an assistant.

Use as reference, not a brand-cloning template. Its CLI documents an install telemetry ping and an opt-out; reading files directly avoids requiring that CLI. Site brands and images retain separate rights.

axe-core

dequelabs/axe-core · MPL-2.0

Referenced in WEB_DESIGN.md.

Find automated accessibility issues in the actual rendered page.

MPL-2.0. Automation detects a subset of barriers; incomplete results and keyboard, screen reader, content, and journey checks need human review.

Playwright

microsoft/playwright · Apache-2.0

Not named in the three core instruction files; optional external resource.

Make main-journey browser checks repeatable.

Requires developer setup and browser binaries. Use invented data, protect saved authentication state, and keep external email, payments, or destructive actions sandboxed.

Gitleaks

gitleaks/gitleaks · MIT

Not included in the three core instruction files; optional external resource.

Find possible exposed credentials in local files and Git history.

Use redacted output and keep reports private. Review matches and rotate confirmed leaked credentials. Upstream now limits future releases to security patches.

ZAP

zaproxy/zaproxy · Apache-2.0

Not included in the three core instruction files; optional external resource.

Inspect a running web application for potential security weaknesses.

Use only a disposable local or explicitly authorized staging target with invented data. Define scope carefully; active tests can change state. Validate alerts.

Accessibility Insights for Web

microsoft/accessibility-insights-web · MIT

Not included in the three core instruction files; optional external resource.

Follow guided keyboard and manual checks alongside automated accessibility tests.

Review extension permissions and telemetry settings before inspecting private pages. Its assessment overview targets WCAG 2.1 AA; check WCAG 2.2 additions separately.

Stay up to date

Follow Miguel Guhlin’s Vibe-Coded Apps ezine for vibe-coded apps, AI tools, and free resources. Open the ezine and choose Follow on Flipboard to subscribe to new additions.

Follow the ezine on Flipboard

A center that can grow

VCC starts with the foundations of a useful educational website. New guides can address classroom testing, local-first tools, hosting, and maintenance as those resources are developed. Additions belong in the library, with a clear audience, downloadable files, source notes, and honest testing limits.

Suggest a resource or report a problem · Browse the source repository

Does this center collect student information?

This site has no account, upload form, analytics script, remote font, or application database. Search and reminders run in your browser without saving their contents. GitHub Pages receives normal hosting requests; external sites receive requests when you follow their links. Do not put student information in public issues or AI prompts.

Does using these files make my site compliant?

No. The guides help you identify risks and gather evidence. Legal requirements, contracts, school authorization, and technical controls need separate review appropriate to your project. Use the official sources linked in the education guide.

Can I use VCC without a coding assistant?

Yes. The introductions, planning templates, and review questions also work as a checklist for conversations with a developer or school technology team.