# Ryoppippi Com Content

> Guides content changes in the ryoppippi.com repository, including blog Markdown, post-local Svelte islands, Tweet embeds, and curated OSS metadata.

- Skill: `ryoppippi/ryoppippi-com-content` (Agent Skill)
- Install (CLI): `npx skillmds@latest add ryoppippi/ryoppippi-com-content`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ryoppippi/ryoppippi-com-content/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ryoppippi (https://skillmd.com/u/ryoppippi)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/ryoppippi/ryoppippi-com-content

---


Use this skill for `ryoppippi/ryoppippi.com`. Treat the implementation and tests as the source of truth.

For discovering and updating external articles, podcasts, or YouTube appearances, use `ryoppippi-com-media` first.

## Blog posts

- Blog posts live under `src/content/blog/<slug>/index.md`.
- Read a nearby existing post for the supported Markdown extensions and frontmatter shape.
- Tweet embeds are explicit: `<Tweet id="1234567890" />`. Keep the original URL in an HTML comment; a URL alone does not create an embed.
- Treat Ox Content's fetched Tweet records and self-hosted media as generated artifacts. Do not hand-edit them; run `direnv exec . pnpm build` after changing an embed and commit the generated evidence it requires.

## Translation and spelling

- Preserve the source's meaning and voice. Keep frontmatter structure, code, links, HTML comments, and custom components intact; translate only human-facing text.
- Write English in British English. For a bilingual pair, update `lang`, `permalink`, and `alternates` consistently; read an existing `-ja` and `-en` pair for the current shape.
- Run `direnv exec . pnpm typos` after editing prose. Fix real errors in the source; add a term to `typos.toml` only when it is an intentional name or technical term.

## Post-local islands

- Put Svelte components beside the post inside the blog tree. A supported island import is a capitalised default import from a relative `.svelte` path, such as `import Chart from './Chart.svelte'`, outside fenced code.
- The shared upstream HTML-host registry discovers article imports using the publication filter in `vite.config.ts`. Do not maintain a manual browser module map or include draft components in production.
- Page/layout components use scoped `<style>` blocks. Post-local islands may use scoped styles and `<svelte:head>`; the upstream HTML-host renderer returns their head contributions. The current GTV chart retains ordinary CSS imports. Page/layout CSS uses upstream SSR stylesheet discovery in development and production, including path mappings inherited through tsconfig `extends`. Do not restore injected CSS or manual article CSS build inputs. Format with `pnpm format` (Oxfmt through Vite+); do not add a separate Prettier configuration.
- Use the import binding as the component tag, such as `<Chart />`. Props use Ox Content syntax: quoted strings, JSON in braces, or bare boolean attributes.
- Resolved imports are removed from rendered Markdown; missing imports and unknown tags remain visible, so fix the path instead of hiding the error.
- When the accepted syntax, path resolution, or SSR boundary is unclear, inspect the current blog rendering implementation and its tests instead of relying on fixed internal paths.
- Run `direnv exec . pnpm new` to create a post; content rendering is part of the root Vite build.

## Portfolio data

- Edit `src/content/works/oss/list.json` for portfolio curation and follow `src/content/works/oss/README.md`.
- Do not hand-edit `src/content/works/oss/stars.json`; refresh it with `pnpm update:oss-stars` when requested.