Agent skill
component-library
Conditionally installs GitHub Packages component library at latest version. Adds to package.json when user requests it.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/component-library
SKILL.md
Component Library Installation Skill
Purpose
Add and configure the component library dependency in package.json when user requests it.
Execution Context: This skill runs as a separate step (Phase 1, Step 4) after package.json is generated.
⚠️ CONDITIONAL SKILL - READ CAREFULLY
Execute this skill ONLY if: include_component_library: yes
If include_component_library: no:
- SKIP this skill entirely
- Move to next skill
Input Parameters
From configuration:
include_component_library- Boolean flag (yesorno)component_library- Name of the component library package (default:@RoyalAholdDelhaize/pdl-spectrum-component-library-web)component_library_version- Always fetch latest version from npm registry
Package.json Format
Important: The component library uses an npm alias format in package.json:
{
"dependencies": {
"@royalaholddelhaize/pdl-spectrum-component-library-web": "npm:@RoyalAholdDelhaize/pdl-spectrum-component-library-web@^{version}"
}
}
Why the alias?
- Key (lowercase):
@royalaholddelhaize/pdl-spectrum-component-library-web- npm convention for lowercase scopes - Value (original case):
npm:@RoyalAholdDelhaize/pdl-spectrum-component-library-web@^{version}- actual package name
Manual installation command:
npm install @RoyalAholdDelhaize/pdl-spectrum-component-library-web
npm automatically creates the alias format in package.json.
Key Rule
Component library dependency is added to package.json when: include_component_library: yes
If fetching latest version fails:
- Skip installation
- Inform user that GitHub token is missing
- Provide setup instructions
- Continue with project generation
Implementation Steps
⚠️ CRITICAL: Component library packages use npm show, NOT npm view
- Reason: GitHub Packages authentication works best with
npm show - All other packages use
npm view(see package-json skill)
Step 1: Conditional Check
// ONLY execute if user requested component library
if (userConfig.include_component_library !== 'yes') {
console.log('⏭️ Skipping component library - not requested');
return; // Exit this skill
}
Step 2: Read Existing package.json
const fs = require('fs');
const path = require('path');
// Read the generated package.json
const packageJsonPath = path.join(process.cwd(), 'package.json');
const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
Step 3: Fetch Latest Version and Add to Dependencies
if (userConfig.include_component_library === 'yes') {
const { execSync } = require('child_process');
try {
// Fetch latest version from npm registry
// IMPORTANT: Component library packages MUST use 'npm show', not 'npm view'
// This is the standard for GitHub Packages authentication
// Note: Uses npm show without --registry flag to respect ~/.npmrc authentication
const latestVersion = execSync(
'npm show @RoyalAholdDelhaize/pdl-spectrum-component-library-web version',
{ encoding: 'utf-8' }
).trim();
userConfig.component_library_version = `^${latestVersion}`;
// Add to dependencies using npm alias format
// Key: lowercase scope (npm convention)
// Value: npm:{original case package}@{version}
const aliasKey = '@royalaholddelhaize/pdl-spectrum-component-library-web';
const aliasValue = `npm:@RoyalAholdDelhaize/pdl-spectrum-component-library-web@${userConfig.component_library_version}`;
// Add to package.json dependencies
packageJson.dependencies[aliasKey] = aliasValue;
// Write updated package.json
fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n');
console.log(`✓ Component library configured: ${aliasKey} → ${aliasValue}`);
} catch (error) {
// If fetching version fails, inform user and skip installation
console.log('\n⚠️ GitHub token is missing. Skipping component library installation.');
console.log('📖 To install the component library later, configure a GitHub token:');
console.log(' https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry#authenticating-with-a-personal-access-token\n');
// Skip installation - do not add to dependencies
userConfig.include_component_library = 'no';
return;
}
}
Validation Checklist
- Verify
include_component_libraryflag checked before execution - Verify latest version fetched successfully before adding to package.json
- Verify user informed with setup instructions if fetch fails
- Verify component library added to package.json only when fetch succeeds
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?