メニュー
Automated quality auditing for generated tutorials. Covers accessibility checks, performance analysis, content validation, responsive testing, and auto-fix strategies.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Ingest a user-provided document (PDF, Markdown, TXT, DOCX, EPUB, HTML) and turn it into a clean, chunked source corpus that grounds the syllabus and lessons. Use when the learner wants a course built FROM their own material (a white paper, book chapter, spec, internal doc) instead of, or in addition to, web research.
Generate audio narration for tutorial lessons using Edge TTS. Covers script conversion from lesson JSON, voice selection, audio generation, manifest creation, section timestamping, and Web Speech API fallback.
Deploy generated tutorials to free hosting services. Covers Vercel, Netlify, Surge, GitHub Pages, and Cloudflare Pages with auth flows, SPA routing, troubleshooting, and QR code generation.
Ensure WCAG 2.1 AA compliance for all generated tutorials. Covers perceivable, operable, understandable, and robust criteria plus reduced motion support.
Visual design system and component library for Syllabus tutorials. Includes 4 theme presets with glassmorphism, gradient systems, micro-interactions, component specs, spacing scale, and icon conventions.
Write production React code with Vite, Tailwind, Framer Motion. Covers project setup, component patterns, data-driven rendering, progress persistence, visual effects, scroll animations, and performance optimization.
| name | audit-automation |
| description | Automated quality auditing for generated tutorials. Covers accessibility checks, performance analysis, content validation, responsive testing, and auto-fix strategies. |
After the React app builds successfully, run a multi-pass audit to catch and fix issues before delivery. The audit has 6 categories, each with check → diagnose → fix → verify cycles.
<img> and <svg> have descriptive alternativeslang attribute on <html>aria-liverole="progressbar" + aria-valuenow// Missing aria-label on icon button
// Before:
<button onClick={handleClick}><Menu size={20} /></button>
// Fix:
<button onClick={handleClick} aria-label="Open menu"><Menu size={20} /></button>
// Missing alt text
// Before:
<img src={diagram} />
// Fix:
<img src={diagram} alt={`Diagram illustrating ${section.title}`} />
// Missing progressbar role
// Before:
<div className="progress-bar" style={{ width: pct + '%' }} />
// Fix:
<div className="progress-bar" style={{ width: pct + '%' }}
role="progressbar" aria-valuenow={pct} aria-valuemin={0} aria-valuemax={100} />
// Glass contrast fallback
// Before:
<div className="glass"><p>Text content</p></div>
// Fix: Add solid background fallback
<div className="glass" style={{ background: 'var(--glass-bg, var(--surface))' }}><p>Text content</p></div>
After applying fixes, re-check:
<button> elements → each has text content or aria-label<img> elements → each has altrole="progressbar" → each has aria-valuenowReact.lazyfont-display: swap on all web fontslazy import where possible// Add lazy loading to route components
// Before:
import Lesson from './pages/Lesson'
// Fix:
const Lesson = React.lazy(() => import('./pages/Lesson'))
// Wrap lazy routes in Suspense
<Suspense fallback={<div className="p-6">Loading...</div>}>
<Route path="lesson/:lessonId" element={<Lesson />} />
</Suspense>
// Add loading="lazy" to images
// Before:
<img src={url} alt={alt} />
// Fix:
<img src={url} alt={alt} loading="lazy" width={width} height={height} />
npm run build and check dist/ sizesyllabus.json has a matching file in src/data/lessons/quiz in syllabus has a matching file in src/data/quizzes/type values in lesson JSON match known rendererslanguage and code fieldsbody or code// Missing lesson file → create stub
const stub = {
id: lessonId,
title: lessonTitle,
content: {
sections: [
{ type: "intro", body: "Content coming soon." }
]
}
};
// Missing quiz file → create from syllabus spec
const quizStub = {
moduleId: modId,
questions: mod.quiz.types.map((type, i) => ({
id: `q-${modId}-${i+1}`,
type,
question: "Question placeholder",
options: type === 'multiple-choice' ? [
{ id: 'a', text: 'Option A', correct: true },
{ id: 'b', text: 'Option B', correct: false },
] : undefined,
}))
};
// MCQ with no correct answer → mark first as correct
question.options[0].correct = true;
// Sidebar responsive
// Add useMediaQuery hook usage
const isMobile = useMediaQuery('(max-width: 767px)');
// On mobile: sidebar = drawer overlay, default closed
// Code block overflow
pre { overflow-x: auto; max-width: 100vw; }
// Touch target size
button { min-height: 44px; min-width: 44px; }
overflow-x: auto<Route> path renders without error// Missing 404 route
<Route path="*" element={<Navigate to="/" />} />
// Missing error boundary
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() { return { hasError: true }; }
render() {
if (this.state.hasError) return <div>Something went wrong. <a href="/">Go home</a></div>;
return this.props.children;
}
}
npm run build produces zero warnings// Missing dependency → add to package.json and install
// Unused import → remove the import line
// Hardcoded URL → replace with relative path
src/data/audio-manifest.json is valid JSONprovider: "edge-tts", all referenced MP3 files exist in public/audio/ and are > 1KBAudioMiniPlayer.jsx and AudioPlayer.jsx exist and import correctlyuseAudioPlayer.js exists with required exportsuseMediaSession.js sets up lock screen controls// Missing aria-label on audio controls
// Before:
<button onClick={onToggle}><Play size={20} /></button>
// Fix:
<button onClick={onToggle} aria-label={isPlaying ? 'Pause' : 'Play'}><Play size={20} /></button>
// Missing role on seek bar
// Before:
<input type="range" value={currentTime} onChange={handleSeek} />
// Fix:
<input type="range" value={currentTime} onChange={handleSeek}
role="slider" aria-label="Audio seek bar"
aria-valuemin={0} aria-valuemax={duration} aria-valuenow={currentTime} />
// Keyboard shortcut conflict with quiz
// Before:
case ' ': e.preventDefault(); toggle(); break;
// Fix:
case ' ':
if (!e.target.closest('[role="option"]') && e.target.tagName !== 'BUTTON') {
e.preventDefault(); toggle();
}
break;
// Missing bottom padding when player active
// Before:
<main className="flex-1">
// Fix:
<main className={`flex-1 ${audioActive ? 'pb-20' : ''}`}>
// Missing graceful fallback for no audio
// Before:
const audioSrc = manifest.lessons.find(l => l.lessonId === id).audioFile;
// Fix:
const lesson = manifest?.lessons?.find(l => l.lessonId === id);
const audioSrc = lesson?.audioFile || null;
if (!audioSrc && manifest?.provider !== 'web-speech') {
// Show "Audio not available" state
}
audio-manifest.json and cross-reference against lesson filese.target before interceptinguseMediaSession is called in the audio provider/contextFor each audit category:
1. Run checks → collect failures
2. For each failure:
a. Identify the file and line
b. Apply the known fix pattern
c. Re-run the specific failing check
d. If still failing, try alternative fix
3. Max 3 fix cycles per issue
4. If fix fails after 3 attempts, log as manual issue
Report format:
✅ Accessibility: 12/12 checks passed
✅ Performance: 8/8 checks passed
⚠️ Content: 11/12 checks passed (1 warning: lesson-03-02 has short intro)
✅ Responsive: 6/6 checks passed
✅ Routes: 5/5 checks passed
✅ Build: 4/4 checks passed
Score: 96/100 — 3 issues fixed automatically, 1 warning
When run via syllabus audit:
--fix flag enables auto-fix mode--report flag generates audit-report.json