Create single-page explainer websites with Mermaid diagrams and progressive disclosure.
npx skills add https://github.com/drpedapati/sciclaw --skill explainer-site
Please help me install this Agent Skill. Skill: explainer-site Source: https://github.com/drpedapati/sciclaw/tree/main/skills/explainer-site Command: npx skills add https://github.com/drpedapati/sciclaw --skill explainer-site
Create deep-dive, single-page explainer websites in the style of howkeyboardswork.com — technically rigorous but accessible, personal yet authoritative, with progressive disclosure from overview to implementation details.
Replace topic content and diagrams in the template to generate your own explainer site, then deploy to your preferred hosting.
High-intent search queries and answers about installing and using this skill.
Create deep-dive, single-page explainer websites by structuring content into pipeline sections from overview to implementation, embedding Mermaid diagrams to visually explain concepts, and using a personal yet authoritative voice.
Pipeline thinking structures educational content progressively, guiding readers from initial overview to deep implementation details. It ensures concepts are revealed logically, making complex technical topics accessible and rigorous.
You embed Mermaid diagrams into your Nuxt and Tailwind explainer site to visually explain concepts and relationships. The skill integrates these visual diagrams directly within the progressive content sections.
Yes, you can replace topic content and diagrams in the provided template to generate your own explainer site. The skill provides reference implementations and working demos as patterns to mimic or adapt for new topics.
Yes, the explainer site generator includes voice and tone guidelines that influence the writing. This ensures your educational exposition maintains a personal yet authoritative style throughout the deep-dive content.
This skill targets single-page, topic-specific explainers rather than multi-page documentation sites. It requires frontmatter with name and description in SKILL.md and focuses on progressive disclosure from overview to implementation details.
leonanpereirapintoConvert textual Mermaid definitions into class, sequence, flowchart, ERD, and C4 diagrams.
mdrashedmamunTransform raw dialogues into exam-style blanks with validated alternatives and IELTS insights.
sandalsoftGenerate self-contained HTML diagrams with Mermaid and CSS styling.
gajjalaashok75-UICreate step-by-step tutorials and educational content from code.
