More screenshots
Works with the AI tools you already use
Claude Code
Cursor
Codex CLI
Muse
Dots+22 moreClaude CodeCursorCodex CLIMuseDots
OpenClaw
Manus
Grok
Grok Bot+18 agentsJapanese Web Guideline — Fix AI Defaults for JP Sites
A guideline for AI agents that build or review Japanese-language websites.
$15
Japanese Web Guideline — Fix AI Defaults for JP Sites
Example session with this skill installed
Audit two builds of the same Japanese villa site against the Japanese web guideline: "coral-terrace" (earlier build) and "coral-terrace-optimized". Measure at 390px and on desktop: stranded characters on a last line (1–2 characters), centered multi-line text, and where manual line breaks leave the second half too wide. Measure after the web fonts have loaded, because wraps shift before that. Report only, don't edit anything.
- Read your context and instructions
- Compiled the japanese web guideline
- Generated the UI component
Earlier build (coral-terrace), measured:
| Where | Finding |
|---|---|
| Hero heading, 390px | Wraps 6 / 12 / 1 characters. One character sits alone on the last line. The source is 海とプール、<br />ふたつの水辺を独り占めする ("The sea and the pool: both waterfronts, all to yourself"): the second half of the break is too wide for a phone. |
| Booking lead paragraph, 390px | text-justify, wraps 22 / 22 / 2. A 2-character last line. |
| Booking notes, 390px | Both are text-center. One wraps 29 / 17 (centered multi-line text); the other wraps 28 / 2 (centered, with a 2-character last line). |
| Booking lead paragraph, desktop | sm:text-center, wraps 40 / 6. Centered multi-line text with a short dangling last line. |
| Location note, desktop | text-justify, wraps 33 / 2. A 2-character last line. |
| Other checks | Headings are left-aligned on mobile, no horizontal scroll. |
Optimized build (coral-terrace-optimized), measured:
| Where | Result |
|---|---|
| Hero heading, 390px | Wraps 6 / 7 / 6: broken at phrase boundaries. The copy is split into inline-block phrases (ふたつの水辺を / 独り占めする), so the second half of the break fits its width. |
| Stranded characters | None at 390px or on desktop (by the 1–2 character definition). |
| Centered multi-line text at 390px | None. |
| Booking lead paragraph, desktop | Centered, wraps 13 / 33. This is one sentence per line (a <br class="hidden sm:inline"> on a sentence boundary), and each sentence fits on its own line at desktop width, so it follows the guideline's sentence-break rule. Pass, not a finding. |
| Borderline | On mobile the booking lead's last line is 3 characters. It is outside the 1–2 character definition, but it is short; worth a look if the copy changes. |
Verdict: the earlier build has three stranded-character cases and two centered multi-line notes at 390px, plus two more on desktop. The optimized build clears all of them at both widths, with one borderline 3-character last line on mobile. The measurement waits for the web fonts to finish loading; a first pass taken before that gave different wraps, so the fonts-ready wait matters.
Suggested fixes for the earlier build (not applied): split the hero heading into two inline-block phrases instead of a bare <br />; break the booking lead one sentence per line on desktop and keep text-justify on mobile; left-align the notes and let them wrap naturally.
japanese-web-guideline-fix-ai-defaults-f.tsx
TSX · React component
Example file from a real run - the skill writes it into your workspace.
Connects securely to your tools. The creator never sees your data.
What you get
About this skill
A guideline for AI agents that build or review Japanese-language websites. It corrects the defaults an agent reaches for by habit — fine for English, wrong for Japanese: a single character stranded on the last line of a heading, centered multi-line text, italics, "small but OK" text that is unreadable in real pixels, hover states that get darker, and more. It works as a judgment standard for the whole implementation, not as a linter.
About the language
The rules and sample copy inside the skill are written in Japanese, on purpose. The reader is the AI agent, and the rules are about how Japanese text breaks, aligns and reads — translating them would blur exactly those nuances. An English note at the top of the file explains this. You do not need to read Japanese to use it: install it, then ask your agent in English (or any language) for a Japanese site or page.
What it covers
- Typography: no italics, the visual size gap between Japanese and Latin text, fonts for mixed-script lines
- Headings: weight versus brand tone, why centered headings strand characters, and a simple "characters × 16px" width check to decide between center, left and justify
- Manual line breaks and orphaned characters, plus optional
text-wrap/word-breakstyles and why they are off by default - Line height for headings, body text and short supporting text
- Body text alignment: why multi-line Japanese paragraphs default to
text-justify, and why balance plus justify opens up letter-spacing - Mobile: minimum text size judged in real pixels, not class names (a custom type scale can turn
text-sminto 12.8px), mobile-first sizing, left-aligned headings on small screens - Color: contrast, colors rooted in Japanese culture, the purple tone trap, and cultural meaning of colors
- Cards: equal-height text areas and fixed image ratios
- Overused AI patterns: heading decorations, gradients, heavy shadows, alternating section backgrounds, darkening hovers, ghost buttons on photos
- A 21-item post-implementation checklist
Two ways to use it
- Building: ask for a Japanese site or page. The skill triggers on requests like "Japanese site" or "Japanese page" and shapes the implementation.
- Auditing: point it at an existing Japanese page and ask for a review. It measures real font sizes and line breaks and reports what passes and what does not.
Requirements
A Claude Code agent. No dependencies, no MCP server, no network calls, no file writes of its own. Examples use Tailwind CSS class names; the principles apply to any CSS.
More from KMRVID
The full Claude Code skill bundle for Figma, Tailwind and Astro workflows is available on Gumroad: https://gaspanik.gumroad.com/l/kmrvid-claudeskills
How to install
Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.
- 1
Download the ZIP
Free skills download straight away. Paid skills unlock right after purchase.
- 2
Unzip into your skills folder
Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.
- 3
Ask your agent to use it
Restart the agent if it was already running. It picks the skill up automatically - no config needed.
Skills folder by agent
Click the path to copy it. Create the folder if it does not exist yet.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
30-day refund
Not a fit? Get your money back
Trust & safety
Security scanned
Verified clean 4 days ago
- Passed all security checks, Safe to install