Converts the learning Markdown into a standalone, split-screen interactive HTML page. Left pane for EN/CN text, right pane for deep linguistic analysis.
Scanned 9/9/2026
Install to Claude Code
Skills Directorynpx -y skills add Scoheart/agentskills --skill study-viewer --agent claude-codeInstalls into .claude/skills of the current project.
Are you the author of Study Viewer?
Add the live security badge to your README — it updates automatically with every re-scan.
[](https://www.skillsdirectory.com/skills/scoheart-study-viewer)More formats (shields.io, HTML) on the badges page.
---
name: study-viewer
description: Converts the learning Markdown into a standalone, split-screen interactive HTML page. Left pane for EN/CN text, right pane for deep linguistic analysis.
---
# Study Viewer
Transforms structured Markdown into a modern dual-pane web interface.
## Core Workflow
1. **Parsing**: Read the `index.md` from `wiki/synthesis`.
2. **Structuring**: Use regex or a Markdown parser to separate content into Paragraphs and Analysis blocks.
3. **HTML Generation**:
- Inject the content into a pre-defined HTML/CSS template.
- **Left Pane**: `<div class="content">` for original text and translation.
- **Right Pane**: `<div class="analysis">` for the 6-point analysis.
4. **Persistence**: Save the output as `interactive.html` in the same directory as the source.
## Guidelines
- Use CSS Flexbox/Grid for the split-screen layout.
- Ensure the font and spacing are optimized for long-form reading.
- (Optional) Add simple JS to highlight matching blocks on hover.
Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.
No comments yet. Be the first to comment!
Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior.
