SKILL.md

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.

Score

Total Score

50/100

Based on repository quality metrics

✓SKILL.md

SKILL.mdファイルが含まれている

+20

○LICENSE

ライセンスが設定されている

0/10

○説明文

100文字以上の説明がある

0/10

○人気

GitHub Stars 100以上

0/15

○最近の活動

3ヶ月以内に更新がある

0/10

○フォーク

10回以上フォークされている

0/5

✓Issue管理

オープンIssueが50未満

+5

✓言語

プログラミング言語が設定されている

+5

○タグ

1つ以上のタグが設定されている

0/5

Reviews

💬

Reviews coming soon