feat: redesign website with aggregator positioning#67
Conversation
…dscape - Add WhySkillKit section with competitor comparison table (Vercel skills, PRPM, Askill, Skild, Paks) - Show SkillKit as meta-package manager aggregating 31+ sources, not competing with them - Add source grid showing all curated repositories (Anthropic, Vercel, Expo, Supabase, Stripe, etc.) - Update Hero tagline: "One CLI. Every Source. Every Agent. Zero Telemetry." - Fix agent count from 32 to 44 in Features stats - Reframe comparison table: "Simple Installers" vs "SkillKit" instead of vague "Without" - Update CompatibilityMatrix with all 44 agents (was 16) - Add zero-telemetry, Apache 2.0, no-account trust signals - Update nav to include "Why SkillKit" link
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Caution Review failedThe pull request is closed. 📝 WalkthroughWalkthroughThis pull request restructures the SkillKit documentation site with expanded agent support (44 agents total), introduces a new WhySkillKit comparison component, reworks navigation and section anchors, and updates messaging across Hero, Features, and CompatibilityMatrix components to emphasize multi-source support and zero telemetry. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Show install from multiple sources (Anthropic, Vercel), auto-translation to 44 formats, security scanning, and cross-source recommendations.
Updated Remotion video to reflect SkillKit's meta-package manager identity: - Version bumped from v1.7.5 to v1.19.0 across all scenes - Install scene shows multi-source aggregation + security scan - Find scene searches 31+ sources (15K+ skills) - Translate scene shows cross-source bulk translation - Workflow scene replaced with security scanner (46 rules) - Recommend scene shows cross-source recommendations with source labels - TUI scene updated with source attribution and 44 agents - Manifest scene shows multi-source team sync - Logo scene: "One CLI. Every Source. Every Agent." + "Zero Telemetry" - Agent count updated from "17 agents" to "44 agents | 31+ sources | 15K+ skills"
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
| const TERMINAL_LINES: TerminalLine[] = [ | ||
| { type: 'cmd', text: 'skillkit install anthropics/skills --agent all' }, | ||
| { type: 'out', text: '→ Installed to 44 agents' }, | ||
| { type: 'cmd', text: 'skillkit install anthropics/skills' }, | ||
| { type: 'out', text: '→ Fetched from github.com/anthropics/skills' }, | ||
| { type: 'out', text: '→ Translated to 44 agent formats' }, | ||
| { type: 'out', text: '→ Scanned: 0 issues found' }, | ||
| { type: 'cmd', text: 'skillkit install vercel-labs/agent-skills' }, | ||
| { type: 'out', text: '→ Installed 12 skills from Vercel' }, | ||
| { type: 'cmd', text: 'skillkit translate --all --to cursor' }, | ||
| { type: 'out', text: '→ 26 skills → .cursor/skills/' }, | ||
| { type: 'cmd', text: 'skillkit recommend' }, | ||
| { type: 'out', text: ' 92% vercel-react-best-practices' }, | ||
| { type: 'out', text: ' 87% typescript-strict-mode' }, | ||
| { type: 'cmd', text: 'skillkit serve' }, | ||
| { type: 'out', text: '→ API server on http://0.0.0.0:3737' }, | ||
| { type: 'out', text: ' GET /search · /trending · /categories' }, | ||
| { type: 'cmd', text: 'curl localhost:3737/search?q=react' }, | ||
| { type: 'out', text: ' {"skills":[...],"total":42}' }, | ||
| { type: 'out', text: ' 92% react-best-practices (vercel)' }, | ||
| { type: 'out', text: ' 87% strict-typescript (anthropic)' }, | ||
| { type: 'out', text: ' 85% supabase-auth (supabase)' }, | ||
| ]; |
There was a problem hiding this comment.
🟡 Terminal animation content overflows and gets clipped after adding more lines
The TERMINAL_LINES array grew from 10 entries to 12 entries, but the terminal container's max-height constraints (max-h-[240px] md:max-h-[280px]) at docs/skillkit/components/Hero.tsx:219 were not updated. The parent div at docs/skillkit/components/Hero.tsx:212 has overflow-hidden, so the last lines of the animation will be silently clipped and invisible to users.
Detailed size estimation
Each terminal line renders a div with mb-1 (4px margin-bottom). At text-[10px] (mobile), line-height is ~15px, so each line is ~19px. With 12 completed lines + 1 cursor line = 13 items × 19px ≈ 247px, plus p-3 padding (24px) = ~271px — exceeding the mobile max-h-[240px] by ~31px. On md screens with text-xs (12px) and p-4 (32px), this grows to ~318px vs max-h-[280px], overflowing by ~38px.
The last 1-2 terminal output lines (the skillkit recommend results) will be invisible, making the animation appear broken as lines animate in but are never visible.
Impact: The hero terminal demo — the first thing users see — will have its final lines cut off on all viewport sizes.
Prompt for agents
In docs/skillkit/components/Hero.tsx, the TERMINAL_LINES array now has 12 entries (up from 10), but the terminal container at line 219 still uses max-h-[240px] md:max-h-[280px] which is too small to fit all lines plus the cursor. Either increase the max-height values (e.g. max-h-[320px] md:max-h-[360px]) or add overflow-y-auto to the content div at line 219 so lines can scroll into view, or reduce TERMINAL_LINES back to ~8-9 entries to fit the existing constraints.
Was this helpful? React with 👍 or 👎 to provide feedback.
| <h2 className="text-lg sm:text-xl font-bold text-white mb-1 font-mono">Compatibility Matrix</h2> | ||
| <p className="text-zinc-500 font-mono text-[10px] sm:text-xs"> | ||
| Skill support across {AGENTS.length} agents and {CATEGORIES.length} categories. | ||
| Skill support across all 44 agents and {CATEGORIES.length} categories. |
There was a problem hiding this comment.
🟡 Hardcoded '44' replaces dynamic AGENTS.length, creating a data-text inconsistency risk
The agent count description in the Compatibility Matrix was changed from the dynamic {AGENTS.length} to a hardcoded string "all 44 agents", while {CATEGORIES.length} remains dynamic on the same line.
Root Cause
At docs/skillkit/components/CompatibilityMatrix.tsx:249, the text reads:
Skill support across all 44 agents and {CATEGORIES.length} categories.
The previous version at the same location used {AGENTS.length} which automatically stayed in sync with the AGENTS array. Now if an agent is added to or removed from the AGENTS array, the displayed count will be wrong while CATEGORIES.length correctly auto-updates. This inconsistency within the same line makes future maintenance error-prone.
Impact: If any agent is added/removed from the AGENTS array, the description will display an incorrect count, misleading users.
| Skill support across all 44 agents and {CATEGORIES.length} categories. | |
| Skill support across all {AGENTS.length} agents and {CATEGORIES.length} categories. | |
Was this helpful? React with 👍 or 👎 to provide feedback.
1 participant
Summary
Key Changes
WhySkillKit.tsxHero.tsxFeatures.tsxCompatibilityMatrix.tsxApp.tsxTest plan
cd docs/skillkit && npx vite buildSummary by CodeRabbit
New Features
Updates