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 LP Seasoning — Flourishes for JP Landing Pages
A skill that chooses the flourishes for a Japanese landing page instead of pasting the same ones everywhere.
$15
Japanese LP Seasoning — Flourishes for JP Landing Pages
Example session with this skill installed
Add some energy to this Japanese villa landing page. Go for a busy feel, but only where it helps: a vertical catch phrase in the hero, the room cards as a carousel, a gentle scroll reveal on the section headings, and a full-bleed map. Respect reduced-motion, and don't break the layout on mobile.
- Read your context and instructions
- Compiled the japanese lp seasoning
- Generated the UI component
Questions the skill asked first (answers in brackets): density → busy; which flourishes → vertical text, carousel, scroll reveal, full-bleed (multi-select). Stack detected: Astro, so the carousel script went into the page's <script> block. No library was added. The run was on a copy of a sample villa site; the original was not touched.
| Flourish | What was done | Checked |
|---|---|---|
| Vertical text | One short catch phrase (珊瑚の島で、水辺とひとつに, "Together with the water, on an island of coral") in the hero, writing-mode: vertical-rl, shown from the large breakpoint up, hidden on mobile and aria-hidden. Not used for any body copy. | Renders at desktop; display: none at 390px. |
| Carousel | The three room cards became a scroll-snap track (native swipe) with dot indicators and 44px prev/next buttons. No marquee, no autoplay. | Desktop: 2 snap stops (two cards visible), 2 dots, prev disabled at start, next disabled at the end. Mobile: 3 stops, 3 dots, the next card peeks in by about 56px. |
| Scroll reveal | Section headings and blocks fade up with a CSS scroll-driven animation (animation-timeline: view()), wrapped in @supports and prefers-reduced-motion: no-preference. No script. | With reduced motion on: all four blocks fully visible, no animation. With the same rule forced on: blocks below the fold start at opacity 0 and reach 1 once scrolled into view. |
| Full-bleed | The map now runs to the right edge of the window using a negative margin equal to the section padding and flex-1 (no 100vw). | Map right edge = window width (1512px), no horizontal scroll. |
Two problems found while checking, and fixed:
- The carousel arrows did nothing at first: snap positions included the track's left padding, and with two cards visible the third card can't be a stop. Fixed with
scroll-paddingequal to the padding, and dots that follow the positions the track can actually stop at. - Narrowing the cards left a 2-character last line in a card caption (
ナ海) on mobile. A stranded-character scan after the fix finds none at 390px or on desktop (the only hit is the vertical text itself, which stacks one character per line by design). The fix wastext-balanceon the short captions; it breaks at least one caption mid-phrase (天然素材 / に満ちた…), which is acceptable for two-line supporting text but worth a look if the copy changes.
Not verified: Safari and Firefox (the scroll-driven reveal falls back to a static page there by design); the vertical phrase over other photos.
japanese-lp-seasoning-flourishes-for-jp-.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 skill that chooses the flourishes for a Japanese landing page instead of pasting the same ones everywhere. Before adding any decoration, the agent asks one question — busy or restrained? — then proposes only what fits the page: full-bleed sections, carousels, banner sliders, scroll-linked reveal animations, vertical text. It works on the decorative and functional layer, not on page structure.
About the language
The rules inside the skill are written in Japanese, on purpose. The reader is the AI agent, and the skill encodes conventions of Japanese commercial sites — vertical text, and carousels that are really card sliders with dot indicators and arrows rather than endless marquees. Translating them would blur 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); it translates its questions into your language.
How it works
- Detects your stack (Astro, React or plain HTML), so scripts go where that project expects them.
- Asks about density in one question: busy (dense, with motion) or restrained (generous whitespace, one deliberate accent).
- For "busy", you pick the flourishes (multi-select plus free text): full-bleed sections, carousel, banner slider, scroll fade/slide-in, vertical text, or something else you describe.
- For "restrained", it skips decoration and pushes whitespace and a single accent instead.
- Implements your picks with native CSS and small scripts first, and a light library only when real drag or autoplay-pause behavior is needed.
Built-in safeguards
prefers-reduced-motionis honored: reveal animations start visible and carousel autoplay stops- Scroll-timeline effects are wrapped in
@supports, so unsupported browsers never leave content hidden - Full-bleed uses
100%-based breakouts to avoid the horizontal-scrollbar bug of100vw - Vertical text is limited to short headings and catch phrases, never body copy
- The flourish list is a set of common examples, not a checklist: it never adds a carousel just because carousels are popular
Works with
It sits on a different axis from Escape AI Slop (cognitive-ui-design), which decides page structure and eye flow. Use either one alone, or both together.
Requirements
A Claude Code agent. No dependencies, no MCP server, no network calls. Examples use Tailwind CSS class names; the techniques 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