feat(website): add stack builder, trending, attribution sections #26
Conversation
- Add StackBuilder component for composing skill stacks visually - Add TrendingSkills component with category browsing - Add Attribution section crediting 24 skill sources - Add issue template for submitting new skill repositories - Update README with full attribution table - Improve mobile responsiveness across all new components - Simplify terminal demo (remove primer, focus on core workflow) - Reorganize Commands section (Start, Manage, Team, Advanced) - Update install commands to use npx skillkit@latest format - Add navigation links and badge row to navbar
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Caution Review failedThe pull request is closed. 📝 WalkthroughWalkthroughAdds three new docs UI components (StackBuilder, TrendingSkills, Attribution), integrates them into the docs App with top navigation and a banner, updates Commands and Hero displays, changes installation snippets and agentskills.io → agenstskills.com links, and adds a new GitHub issue template for skill sources and README reorganization. Changes
Sequence Diagram(s)sequenceDiagram
participant User as User
participant UI as StackBuilder UI
participant Index as SKILLS_INDEX
participant Clipboard as Clipboard
User->>UI: Type search query / click preset
UI->>Index: fetch/search skills
Index-->>UI: return matching skills
UI->>User: render results
User->>UI: Add skill to stack
UI-->>UI: dedupe and append StackItem
User->>UI: Click "Generate / Copy" command
UI->>Clipboard: writeInstallCommand(command)
Clipboard-->>User: copied confirmation
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Fix all issues with AI agents
In `@docs/skillkit/App.tsx`:
- Around line 182-189: Anchor sections like the ones wrapping StackBuilder and
TrendingSkills can get hidden under the fixed navbar when scrolled to; add a top
scroll offset by applying CSS scroll-margin-top (or an inline style) to those
section elements (e.g., the <section id="stack"> and <section id="trending">)
and to the other anchor sections referenced around the 206-208 region so that
scrollIntoView places content below the fixed header; use a value matching the
navbar height (or a reusable CSS class) to ensure consistent offset.
- Around line 30-36: The scrollToSection function currently uses
e.preventDefault() which prevents the URL hash from updating; after locating the
element and calling element.scrollIntoView({ behavior: 'smooth' }) call
history.replaceState(null, '',
`${location.pathname}${location.search}#${sectionId}`) (or equivalent) to update
the address bar without adding a new history entry so deep-links and
back/refresh restore position; keep e.preventDefault() to prevent default jump
but ensure you update the hash via history.replaceState in scrollToSection.
In `@docs/skillkit/components/StackBuilder.tsx`:
- Around line 155-182: The remove-button is icon-only and hidden by hover
(opacity-0) so it lacks an accessible name and is invisible to keyboard users;
update the button rendered in the stack.map loop to include an accessible label
(e.g. aria-label={`Remove ${skill.name}`} or a visually-hidden <span> with the
skill name) and make it visible when focused by replacing/augmenting the CSS
utility classes on that button: keep the hover behavior but add
focus:opacity-100 (or focus-visible:opacity-100) and keyboard focus styles like
focus-visible:ring-2 focus-visible:ring-red-400 (and/or focus:outline-none) so
tabbing shows a visible focus ring; adjust the button that calls
removeFromStack(skill.id) accordingly for each skill in the StackBuilder
mapping.
- Around line 81-88: The copyCommand function currently calls
navigator.clipboard.writeText(cmd) without awaiting or handling rejections; wrap
the clipboard call in an async try/catch (make copyCommand async) and await
generateInstallCommand()/navigator.clipboard.writeText(cmd), call
setCopied(true) only on success, and in the catch branch handle/log the error
and optionally show a user-visible fallback (e.g., console.error or UI error
state) so unhandled promise rejections are avoided and failures are surfaced.
In `@docs/skillkit/components/TrendingSkills.tsx`:
- Around line 26-31: getTrendingSkills currently uses the last path segment and
.includes() which overmatches; replace that logic so each TRENDING_SKILLS entry
is matched exactly against SKILLS_INDEX entries. In getTrendingSkills, change
the map callback from id => SKILLS_INDEX.find(s =>
s.id.includes(id.split('/').pop() || '')) to id => SKILLS_INDEX.find(s => s.id
=== id) (keep the existing filter type-guard and .slice(0, 8)).
🧹 Nitpick comments (4)
docs/skillkit/components/Attribution.tsx (2)
3-10: Consider makinglicenserequired in the interface.All sources in
SKILL_SOURCEShave alicenseproperty defined, yet it's marked as optional. Making it required would enforce consistency and catch missing licenses at compile time.♻️ Suggested change
interface SkillSource { name: string; repo: string; description: string; official?: boolean; - license?: string; + license: string; skillCount?: string; }
12-172: Consider extracting skill sources data to a shared module.The same data appears in both this component and
README.md. Extracting to a shared data file (e.g.,data/skill-sources.ts) would establish a single source of truth and simplify maintenance when sources are added or updated.docs/skillkit/components/Commands.tsx (1)
3-6: Interface allows emptycmdbut lacks documentation.The
cmdfield is typed asstring, which permits empty strings. Line 12 usescmd: ''for the TUI launcher. While this works, the intent isn't obvious from the interface alone. A comment or explicit type would clarify this pattern.📝 Optional: Add documentation
interface CommandGroup { name: string; - commands: Array<{ cmd: string; desc: string }>; + /** Commands in this group. Use cmd: '' for the base TUI launcher. */ + commands: Array<{ cmd: string; desc: string }>; }docs/skillkit/components/StackBuilder.tsx (1)
90-92: Consider clearing search state when clearing the stack.Keeping the search text/results after “Clear All” can feel inconsistent.
🔧 Suggested tweak
function clearStack(): void { setStack([]); + setSearchQuery(''); + setSearchResults([]); }
Replace all incorrect agentskills.io references with the correct domain agenstskills.com throughout the codebase. Files updated: - src/commands/validate.ts - schemas/skill.schema.json - docs/skillkit/components/Footer.tsx - .github/ISSUE_TEMPLATE/add-source.md - .github/ISSUE_TEMPLATE/skill-submission.yml - CONTRIBUTING.md - README.md
There was a problem hiding this comment.
Actionable comments posted: 8
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
README.md (1)
14-15:⚠️ Potential issue | 🔴 CriticalMultiple domain typo occurrences in badges
The badge URLs use
agenstskills.comwhich appears to have the same typo. These badges link to the website and docs.Proposed fix
-[](https://agenstskills.com) -[](https://agenstskills.com/docs) +[](https://agentskills.com) +[](https://agentskills.com/docs)
🤖 Fix all issues with AI agents
In @.github/ISSUE_TEMPLATE/add-source.md:
- Line 38: The checklist entry containing the URL "https://agenstskills.com" has
a typo; update the broken link (the string "https://agenstskills.com" in the
checklist line) to the correct Agent Skills specification URL (e.g.,
"https://agentskills.com" or the authoritative spec URL) so contributors are
directed to the proper documentation; ensure the visible checklist text remains
unchanged except for the corrected URL.
In @.github/ISSUE_TEMPLATE/skill-submission.yml:
- Line 86: Fix the typo in the checklist label by updating the label string
"SKILL.md follows the agenstskills.com standard format" to the correct domain
"SKILL.md follows the agentskills.com standard format" wherever that label is
defined (search for the exact label text to locate it).
In `@docs/skillkit/components/Footer.tsx`:
- Line 21: The footer's anchor tag has a typo in its href
("https://agenstskills.com"); update the href attribute in Footer.tsx (the JSX
anchor element that currently sets href="https://agenstskills.com") to the
correct domain (e.g., "https://agentskills.com") so the clickable footer link
directs users to the intended site.
In `@README.md`:
- Line 423: Fix the domain typo in the README line that reads "Create a
`SKILL.md` file following the [Agent Skills
specification](https://agenstskills.com):" by correcting the link to the proper
domain (replace "https://agenstskills.com" with "https://agentskills.com") so
the "Agent Skills specification" link points to the correct site.
- Around line 580-582: The footer Links section contains a domain typo: URLs use
"agenstskills.com" instead of the correct domain; update the three links shown
(the Documentation, Website, and Agent Skills Specification entries) to use the
correct domain (replace "agenstskills.com" with the proper domain) so all three
hrefs point to the intended site.
In `@schemas/skill.schema.json`:
- Line 5: Update the description string in the JSON schema (the "description"
field in schemas/skill.schema.json) to fix the typo in the referenced URL:
replace "https://agenstskills.com" with the correct "https://agentskills.com" so
the user-facing schema documentation points to the proper Agent Skills spec.
In `@src/commands/validate.ts`:
- Line 11: Fix the typo in the CLI command description string in
src/commands/validate.ts: update the description property (the description field
used for the "validate" command) to reference the correct domain
"agentskills.com" (or the intended URL) instead of "agenstskills.com" so the
help output shows the correct domain.
- Line 80: There's a typo in the guidance URL string
("https://agenstskills.com") printed via console.log(chalk.dim(...)); update the
string to the correct domain "https://agentskills.com" in both occurrences where
console.log(chalk.dim('See https://agenstskills.com for the complete format'))
appears so the validation failure message points to the correct site.
| - [ ] Repository is public | ||
| - [ ] Repository contains valid SKILL.md files | ||
| - [ ] Repository has a clear license | ||
| - [ ] Skills follow the [Agent Skills specification](https://agenstskills.com) |
There was a problem hiding this comment.
Same domain typo in specification link
The Agent Skills specification link uses https://agenstskills.com. If this is a typo, contributors following this link won't reach the actual specification.
Proposed fix
-- [ ] Skills follow the [Agent Skills specification](https://agenstskills.com)
+- [ ] Skills follow the [Agent Skills specification](https://agentskills.com)📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| - [ ] Skills follow the [Agent Skills specification](https://agenstskills.com) | |
| - [ ] Skills follow the [Agent Skills specification](https://agentskills.com) |
🤖 Prompt for AI Agents
In @.github/ISSUE_TEMPLATE/add-source.md at line 38, The checklist entry
containing the URL "https://agenstskills.com" has a typo; update the broken link
(the string "https://agenstskills.com" in the checklist line) to the correct
Agent Skills specification URL (e.g., "https://agentskills.com" or the
authoritative spec URL) so contributors are directed to the proper
documentation; ensure the visible checklist text remains unchanged except for
the corrected URL.
| - label: Repository is public | ||
| required: true | ||
| - label: SKILL.md follows the agentskills.io standard format | ||
| - label: SKILL.md follows the agenstskills.com standard format |
There was a problem hiding this comment.
Same domain typo in checklist label
The label references agenstskills.com standard format. If the domain is indeed a typo, this should be corrected to maintain consistency with the actual specification URL.
Proposed fix
- - label: SKILL.md follows the agenstskills.com standard format
+ - label: SKILL.md follows the agentskills.com standard format📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| - label: SKILL.md follows the agenstskills.com standard format | |
| - label: SKILL.md follows the agentskills.com standard format |
🤖 Prompt for AI Agents
In @.github/ISSUE_TEMPLATE/skill-submission.yml at line 86, Fix the typo in the
checklist label by updating the label string "SKILL.md follows the
agenstskills.com standard format" to the correct domain "SKILL.md follows the
agentskills.com standard format" wherever that label is defined (search for the
exact label text to locate it).
| <span className="hidden sm:inline text-zinc-700">•</span> | ||
| <a | ||
| href="https://agentskills.io" | ||
| href="https://agenstskills.com" |
There was a problem hiding this comment.
Same domain typo in href
The link points to https://agenstskills.com which appears to have the "agenst" typo. This is a clickable link in the footer that users will interact with.
Proposed fix
- href="https://agenstskills.com"
+ href="https://agentskills.com"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| href="https://agenstskills.com" | |
| href="https://agentskills.com" |
🤖 Prompt for AI Agents
In `@docs/skillkit/components/Footer.tsx` at line 21, The footer's anchor tag has
a typo in its href ("https://agenstskills.com"); update the href attribute in
Footer.tsx (the JSX anchor element that currently sets
href="https://agenstskills.com") to the correct domain (e.g.,
"https://agentskills.com") so the clickable footer link directs users to the
intended site.
| ### Manual Creation | ||
|
|
||
| Create a `SKILL.md` file following the [Agent Skills specification](https://agentskills.io/specification): | ||
| Create a `SKILL.md` file following the [Agent Skills specification](https://agenstskills.com): |
There was a problem hiding this comment.
Domain typo in Manual Creation section
Same typo in the Agent Skills specification link.
🤖 Prompt for AI Agents
In `@README.md` at line 423, Fix the domain typo in the README line that reads
"Create a `SKILL.md` file following the [Agent Skills
specification](https://agenstskills.com):" by correcting the link to the proper
domain (replace "https://agenstskills.com" with "https://agentskills.com") so
the "Agent Skills specification" link points to the correct site.
| - [Documentation](https://agenstskills.com/docs) | ||
| - [Website](https://agenstskills.com) | ||
| - [Agent Skills Specification](https://agentskills.io/specification) | ||
| - [Agent Skills Specification](https://agenstskills.com) |
There was a problem hiding this comment.
Domain typo in Links section
Multiple links in the footer Links section use agenstskills.com.
Proposed fix
-- [Documentation](https://agenstskills.com/docs)
-- [Website](https://agenstskills.com)
-- [Agent Skills Specification](https://agenstskills.com)
+- [Documentation](https://agentskills.com/docs)
+- [Website](https://agentskills.com)
+- [Agent Skills Specification](https://agentskills.com)📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| - [Documentation](https://agenstskills.com/docs) | |
| - [Website](https://agenstskills.com) | |
| - [Agent Skills Specification](https://agentskills.io/specification) | |
| - [Agent Skills Specification](https://agenstskills.com) | |
| - [Documentation](https://agentskills.com/docs) | |
| - [Website](https://agentskills.com) | |
| - [Agent Skills Specification](https://agentskills.com) |
🤖 Prompt for AI Agents
In `@README.md` around lines 580 - 582, The footer Links section contains a domain
typo: URLs use "agenstskills.com" instead of the correct domain; update the
three links shown (the Documentation, Website, and Agent Skills Specification
entries) to use the correct domain (replace "agenstskills.com" with the proper
domain) so all three hrefs point to the intended site.
| "$id": "https://skillkit.dev/schemas/skill.schema.json", | ||
| "title": "Skill Frontmatter", | ||
| "description": "Schema for SKILL.md frontmatter validation (follows Agent Skills spec: https://agentskills.io/specification)", | ||
| "description": "Schema for SKILL.md frontmatter validation (follows Agent Skills spec: https://agenstskills.com)", |
There was a problem hiding this comment.
Same domain typo: agenstskills.com
The description references https://agenstskills.com which appears to contain the same typo ("agenst" vs "agent"). This URL appears in user-facing schema documentation.
Proposed fix
- "description": "Schema for SKILL.md frontmatter validation (follows Agent Skills spec: https://agenstskills.com)",
+ "description": "Schema for SKILL.md frontmatter validation (follows Agent Skills spec: https://agentskills.com)",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "description": "Schema for SKILL.md frontmatter validation (follows Agent Skills spec: https://agenstskills.com)", | |
| "description": "Schema for SKILL.md frontmatter validation (follows Agent Skills spec: https://agentskills.com)", |
🤖 Prompt for AI Agents
In `@schemas/skill.schema.json` at line 5, Update the description string in the
JSON schema (the "description" field in schemas/skill.schema.json) to fix the
typo in the referenced URL: replace "https://agenstskills.com" with the correct
"https://agentskills.com" so the user-facing schema documentation points to the
proper Agent Skills spec.
|
|
||
| static override usage = Command.Usage({ | ||
| description: 'Validate skill(s) against the Agent Skills specification (agentskills.io)', | ||
| description: 'Validate skill(s) against the Agent Skills specification (agenstskills.com)', |
There was a problem hiding this comment.
Domain typo in command description
The usage description references agenstskills.com. This appears in CLI help output when users run skillkit validate --help.
🤖 Prompt for AI Agents
In `@src/commands/validate.ts` at line 11, Fix the typo in the CLI command
description string in src/commands/validate.ts: update the description property
(the description field used for the "validate" command) to reference the correct
domain "agentskills.com" (or the intended URL) instead of "agenstskills.com" so
the help output shows the correct domain.
| if (hasErrors) { | ||
| console.log(chalk.red('Validation failed')); | ||
| console.log(chalk.dim('See https://agentskills.io/specification for the complete format')); | ||
| console.log(chalk.dim('See https://agenstskills.com for the complete format')); |
There was a problem hiding this comment.
Domain typo in error message URL
The URL https://agenstskills.com in the validation failure message will direct users to a potentially incorrect domain. This is particularly impactful as users seeing validation errors will want to reference the specification.
Proposed fix for both occurrences
- description: 'Validate skill(s) against the Agent Skills specification (agenstskills.com)',
+ description: 'Validate skill(s) against the Agent Skills specification (agentskills.com)',- console.log(chalk.dim('See https://agenstskills.com for the complete format'));
+ console.log(chalk.dim('See https://agentskills.com for the complete format'));📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| console.log(chalk.dim('See https://agenstskills.com for the complete format')); | |
| console.log(chalk.dim('See https://agentskills.com for the complete format')); |
🤖 Prompt for AI Agents
In `@src/commands/validate.ts` at line 80, There's a typo in the guidance URL
string ("https://agenstskills.com") printed via console.log(chalk.dim(...));
update the string to the correct domain "https://agentskills.com" in both
occurrences where console.log(chalk.dim('See https://agenstskills.com for the
complete format')) appears so the validation failure message points to the
correct site.
- TrendingSkills: use exact ID matching instead of substring match - StackBuilder: prevent duplicate skills in preset stack - StackBuilder: deduplicate repo references in install command - StackBuilder: make copyCommand async with proper error handling - StackBuilder: add accessibility labels and focus visibility to remove button - App: update URL hash on scroll for deep linking - App: add scrollMarginTop to sections for fixed navbar offset
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
| const TRENDING_SKILLS = [ | ||
| 'anthropics/skills/claude-code-guide', | ||
| 'anthropics/skills/claude-code-setup', | ||
| 'obra/superpowers/tdd', | ||
| 'vercel-labs/agent-skills/nextjs', | ||
| 'trailofbits/skills/security-review', | ||
| 'expo/skills/react-native', | ||
| 'remotion-dev/skills/video', | ||
| 'supabase/agent-skills/database', | ||
| ]; |
There was a problem hiding this comment.
🔴 TRENDING_SKILLS array contains non-existent skill IDs causing empty trending section
The TRENDING_SKILLS array in TrendingSkills.tsx contains skill IDs that don't exist in the marketplace/skills.json data source, causing the trending skills section to display fewer items than intended or be completely empty.
Click to expand
Issue Details
The getTrendingSkills() function at line 26-31 attempts to find skills by their exact ID:
function getTrendingSkills(): IndexedSkill[] {
return TRENDING_SKILLS
.map(id => SKILLS_INDEX.find(s => s.id === id))
.filter((s): s is IndexedSkill => s !== undefined)
.slice(0, 8);
}However, the TRENDING_SKILLS array (lines 15-24) contains IDs that don't match any entries in marketplace/skills.json:
anthropics/skills/claude-code-guide- doesn't existanthropics/skills/claude-code-setup- doesn't existobra/superpowers/tdd- should beobra/superpowers/test-driven-developmentvercel-labs/agent-skills/nextjs- doesn't existtrailofbits/skills/security-review- doesn't existexpo/skills/react-native- doesn't exist (actual:expo/skills/building-native-ui)remotion-dev/skills/video- doesn't exist (actual:remotion-dev/skills/remotion-best-practices)supabase/agent-skills/database- doesn't exist (actual:supabase/agent-skills/supabase-postgres-best-practices)
Impact
The trending skills section will show 0 items instead of the intended 8 trending skills, resulting in an empty UI section that misleads users about popular skills.
Recommendation: Update the TRENDING_SKILLS array to use actual skill IDs from marketplace/skills.json. For example:
const TRENDING_SKILLS = [
'anthropics/skills/collection',
'anthropics/skills/frontend-design',
'obra/superpowers/test-driven-development',
'vercel-labs/agent-skills/vercel-react-best-practices',
'trailofbits/skills/collection',
'expo/skills/building-native-ui',
'remotion-dev/skills/remotion-best-practices',
'supabase/agent-skills/supabase-postgres-best-practices',
];
Was this helpful? React with 👍 or 👎 to provide feedback.
Summary by CodeRabbit
New Features
Documentation
✏️ Tip: You can customize this high-level summary in your review settings.