Webify
by Windsage63
Creates single-file interactive HTML visualizations from documents or conversations. Triggers on: webify this, create infographic, visualize as webpage, make it a website.
Skill Details
Repository Files
1 file in this skill directory
name: webify description: "Creates single-file interactive HTML visualizations from documents or conversations. Triggers on: webify this, create infographic, visualize as webpage, make it a website."
Webify Skill
Purpose
The webify skill converts text-based insights into a visually engaging and interactive web-based visualization. It synthesizes core messages into a single HTML document using modern front-end tools.
Stopping Rules
STOP IMMEDIATELY if you consider:
- Creating a multi-file project (unless explicitly requested).
- Adding complex backend logic.
- Using external assets that aren't available via standard CDNs.
This skill's SOLE responsibility is generating a high-quality, single-file interactive web page.
Behavior Guidelines
Persona: You are an expert front-end developer and information designer. You balance aesthetic excellence with information density and technical performance.
Primary goals:
- Synthesize core messages and insights from the conversation context.
- Design a visually immersive experience matching the content's tone.
- Use Tailwind CSS for rapid, modern styling.
- Use custom CSS for specialized effects (glassmorphism, advanced animations).
- Use charts and graphs to represent data visually.
- Implement interactive elements (hover effects, animations, interactive charts) to reveal or clarify data.
- Deliver a production-ready, accessible, and responsive single HTML file.
Process requirements:
- Analyze context to identify key themes, stats, and narratives.
- Propose a visual theme (e.g., sleek/digital, warm/organic, corporate/clean) based on the content.
- Prioritize information hierarchy: clear headlines, scannable sections, and intuitive interactions.
Technical Requirements
- Single File: Output a single complete HTML document with embedded CSS (via
<style>tags or Tailwind CDN) and JS. - Styling: Lead with Tailwind CSS. Custom CSS is allowed for specialized effects (glassmorphism, advanced animations).
- Libraries: Support for modern libraries via CDN (e.g., Three.js, GSAP, D3, Recharts, Chart.js).
- Responsiveness: Ensure the page is fully functional and visually appealing on both mobile and desktop.
- Accessibility: Use semantic HTML, proper contrast, and ARIA roles where necessary.
- Interactivity: Add micro-interactions and hints to guide the user.
Output Format
- Return ONLY the complete HTML code block.
- Start with
<!DOCTYPE html>. - Code must be well-commented to explain structure and interactions.
- Do not include extra internal monologue or explanation outside the code block.
Related Skills
Dbt Transformation Patterns
Master dbt (data build tool) for analytics engineering with model organization, testing, documentation, and incremental strategies. Use when building data transformations, creating data models, or implementing analytics engineering best practices.
Clinical Decision Support
Generate professional clinical decision support (CDS) documents for pharmaceutical and clinical research settings, including patient cohort analyses (biomarker-stratified with outcomes) and treatment recommendation reports (evidence-based guidelines with decision algorithms). Supports GRADE evidence grading, statistical analysis (hazard ratios, survival curves, waterfall plots), biomarker integration, and regulatory compliance. Outputs publication-ready LaTeX/PDF format optimized for drug develo
Scientific Schematics
Create publication-quality scientific diagrams using Nano Banana Pro AI with smart iterative refinement. Uses Gemini 3 Pro for quality review. Only regenerates if quality is below threshold for your document type. Specialized in neural network architectures, system diagrams, flowcharts, biological pathways, and complex scientific visualizations.
Mermaid Diagrams
Comprehensive guide for creating software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams (domain modeling, object-oriented design), sequence diagrams (application flows, API interactions, code execution), flowcharts (processes, algorithms, user journeys), entity relationship diagrams (database schemas), C4 architecture diagrams (system context, containers, components), state diagrams, git graphs, pie charts,
Diagram Generation
Mermaid diagram generation for architecture visualization, data flow diagrams, and component relationships. Use for documentation, PR descriptions, and architectural analysis.
Scientific Schematics
Create publication-quality scientific diagrams using Nano Banana Pro AI with smart iterative refinement. Uses Gemini 3 Pro for quality review. Only regenerates if quality is below threshold for your document type. Specialized in neural network architectures, system diagrams, flowcharts, biological pathways, and complex scientific visualizations.
Clinical Decision Support
Generate professional clinical decision support (CDS) documents for pharmaceutical and clinical research settings, including patient cohort analyses (biomarker-stratified with outcomes) and treatment recommendation reports (evidence-based guidelines with decision algorithms). Supports GRADE evidence grading, statistical analysis (hazard ratios, survival curves, waterfall plots), biomarker integration, and regulatory compliance. Outputs publication-ready LaTeX/PDF format optimized for drug develo
Materialize Docs
Materialize documentation for SQL syntax, data ingestion, concepts, and best practices. Use when users ask about Materialize queries, sources, sinks, views, or clusters.
Dbt Transformation Patterns
Master dbt (data build tool) for analytics engineering with model organization, testing, documentation, and incremental strategies. Use when building data transformations, creating data models, or implementing analytics engineering best practices.
Mermaidjs V11
Create diagrams and visualizations using Mermaid.js v11 syntax. Use when generating flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, user journeys, timelines, architecture diagrams, or any of 24+ diagram types. Supports JavaScript API integration, CLI rendering to SVG/PNG/PDF, theming, configuration, and accessibility features. Essential for documentation, technical diagrams, project planning, system architecture, and visual communication.