Menú
Guides writing weekly class script files (.svx) for the Coding the News syllabus. Use this when asked to write, draft, or create a new week's script content.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Captures browser screenshots and videos on request using Playwright for embedding in tutorials. Use this when asked to capture, document, screenshot, or record a web page or locally running development server.
Records short videos of web pages with smooth scrolling animation and browser chrome frame. Use this when asked to create promotional videos or demos that scroll through a web page for social media.
Captures VSCode window screenshots using a semi-automated workflow. Use this when asked to capture, document, or screenshot VSCode, terminal output, or other desktop application states.
Basado en la clasificación ocupacional SOC
| name | class-script-writing |
| description | Guides writing weekly class script files (.svx) for the Coding the News syllabus. Use this when asked to write, draft, or create a new week's script content. |
Write weekly class script files (.svx) that match the established patterns, tone, and formatting conventions of the "Coding the News" course at CUNY Craig Newmark Graduate School of Journalism.
Use this skill when asked to:
Before writing, consult:
src/content/OUTLINE.md - Topic outline for each weeksrc/content/scripts/week-1.svx - Example of foundational tools introductionsrc/content/scripts/week-2.svx - Example of framework/deployment topicsSave scripts to src/content/scripts/week-{N}.svx
---
title: "Descriptive Title"
summary: "Brief description of what students will learn"
date: "Mon. DD, YYYY"
week: N
locked: false
---
false for published content, true for future weeks<script>
import Screenshot from '$lib/components/Screenshot.svelte';
</script>
Always include this even if screenshots aren't used yet—they will be added later.
Use ## Part N: Title for major sections. Typically 3-4 parts per week.
## Part 1: Introduction to [Topic]
## Part 2: Setting Up [Tool]
## Part 3: Building [Thing]
## Part 4: Publishing and Sharing
Use ### Subtopic for steps within parts.
## Part 2: Introduction to Node.js
### Check if Node.js is already installed
### Install nvm
### Install Node.js with nvm
Always end with ## Homework Assignments containing 2-3 tasks following this pattern:
## Homework Assignments
### Task 1: Creating
[Hands-on practice creating something - repositories, projects, components, etc.]
### Task 2: Exploring
[Research or exploration with Copilot assistance - cloning repos, studying code, etc.]
### Task 3: Presenting
[Prepare to share findings with class - be ready to present, write a summary, etc.]
Use quotes, not bold, for UI elements:
Click the "Clone repository" buttonSelect "Create a new repository" from the dropdownGo to the "Settings" tabClick the **Clone repository** buttonInline code for file names, commands, and short code:
Open the `README.md` file and run `npm install`.
Fenced code blocks with language hints:
```bash
npm run dev
```
```js
let headline = 'Breaking News';
```
```svelte
<Screenshot src="/screenshots/week-1/example.png" alt="Example" />
```
Use standard Markdown link syntax:
See [GitHub's guide to Markdown](https://docs.github.com/...) for more options.
For external sites you want to highlight inline, you can use <a> tags with target="_blank":
Visit <a href="https://nodejs.org" target="_blank">nodejs.org</a> to learn more.
Since .svx files are processed by MDsveX (Markdown + Svelte), certain characters are interpreted as Svelte syntax rather than plain text.
Avoid < and > characters in prose. MDsveX interprets these as Svelte component tags, causing parsing errors like:
Error: < is not a valid component name
Instead of comparison operators, use words:
under 600px or less than 600pxover 900px or greater than 900px< 600px> 900pxThis applies everywhere in the content—paragraphs, lists, tables, and code comments outside of fenced code blocks.
Fenced code blocks are safe. Inside triple-backtick code blocks, < and > are treated as literal characters:
\`\`\`css
@media (max-width: 600px) { /* This is fine */ }
\`\`\`
Style blocks need special handling. When showing SCSS/CSS code with <style> tags, show the style content in a code block but don't wrap it in the actual <style> tag in your explanation—MDsveX will try to process it.
Use tables to summarize information:
| Files | Description |
|-------|-------------|
| `src/routes/+page.svelte` | Your homepage |
| `package.json` | Project dependencies |
Browser content (web pages, GitHub, documentation):
<Screenshot
src="/screenshots/week-1/github-homepage.png"
alt="GitHub homepage showing the sign up button"
chromeTitle="GitHub"
chromeUrl="https://github.com"
/>
Desktop applications (VS Code, terminals):
<Screenshot
src="/screenshots/week-1/vscode-explorer.png"
alt="Visual Studio Code Explorer showing project files"
showChrome={false}
/>
static/screenshots/week-{N}/vscode-source-control.png, github-new-repo.pngnpm-install-complete.png not step3.pngWrite descriptive alt text that explains what the screenshot shows:
"Visual Studio Code Source Control panel showing staged changes""GitHub repository page with the Actions tab highlighted""Screenshot""VS Code"Show the command, then show what students should see:
Type this command and press Enter:
\`\`\`bash
node --version
\`\`\`
You should see a version number like `v20.11.0` or similar.
Number steps implicitly through prose, not explicitly:
### Install the extension
Click on the Extensions icon in the left sidebar. It looks like four squares.
Then search for "GitHub Copilot" in the search bar. Select the extension by
GitHub from the list and click the "Install" button.
Anticipate common issues:
If you see an error message like `command not found: node`, that means Node.js
isn't installed yet. We'll fix that in the next section.
Include moments for students to experiment:
Try making a few more changes. Edit the byline and publication date. Get a feel
for how quickly you can see your changes reflected.
Scripts are substantial—typically 400-700 lines. Don't rush to condense. Students benefit from:
## headings### for steps within partsshowChrome settingHere's how a typical script begins:
---
title: "Svelte Components"
summary: "How to build reusable interface elements with Svelte"
date: "Feb. 9, 2026"
week: 3
locked: false
---
<script>
import Screenshot from '$lib/components/Screenshot.svelte';
</script>
## Part 1: Introduction to Components
What's a component? It's a reusable piece of your user interface—a button,
a card, a chart, a quote box—that you can define once and use anywhere.
Think of components like LEGO bricks. Each brick has a specific shape and
purpose, but you can combine them in endless ways to build something new.
In web development, components let you build complex interfaces from simple,
well-defined pieces.
[Content continues...]