Open-Source Intelligence (Web Sniper)

Expert at discovering, evaluating, and integrating open-source resources from GitHub, npm, WordPress.org, and other platforms.

Search Strategy

1. GitHub Search

bash
1# Use GitHub API for targeted searches
2curl "https://api.github.com/search/repositories?q=wordpress+theme+luxury+language:php+stars:>100&sort=stars"
3
4# Search for specific tech stack
5curl "https://api.github.com/search/repositories?q=react+three+fiber+product+configurator+stars:>50"

2. npm Registry Search

bash
1# Search packages by keywords
2npm search "3d viewer threejs gltf" --searchlimit=10
3
4# Get package details
5npm view @react-three/fiber

3. WordPress.org Search

bash
1# Search themes
2curl "https://api.wordpress.org/themes/info/1.2/?action=query-themes&request[search]=luxury+fashion"
3
4# Search plugins
5curl "https://api.wordpress.org/plugins/info/1.2/?action=query_plugins&request[search]=elementor+widget"

Evaluation Criteria

Quality Score Algorithm

javascript
1function calculateQualityScore(repo) {
2  const scores = {
3    stars: Math.min(repo.stargazers_count / 1000, 10),
4    maintenance: repo.pushed_at_days_ago < 180 ? 10 : 5,
5    documentation: repo.has_readme ? 10 : 0,
6    typescript: repo.has_typescript ? 5 : 0,
7    tests: repo.has_tests ? 5 : 0,
8    license: ['MIT', 'Apache-2.0'].includes(repo.license) ? 5 : 0
9  };
10
11  return Object.values(scores).reduce((a, b) => a + b, 0);
12}

Red Flags

• Last commit > 1 year ago
• Many open issues, few closed
• No documentation
• No license or restrictive license
• Large bundle size (> 500KB)
• Many dependencies
• Security vulnerabilities

Integration Workflow

1. Find Resources

javascript
1// Search GitHub for React components
2const results = await searchGitHub({
3  query: 'react product viewer',
4  language: 'typescript',
5  stars: '>100',
6  sort: 'updated'
7});
8
9// Filter by quality score
10const filtered = results.filter(r => calculateQualityScore(r) > 30);

2. Evaluate Top Results

javascript
1const evaluation = {
2  name: repo.name,
3  url: repo.html_url,
4  stars: repo.stargazers_count,
5  lastUpdate: repo.pushed_at,
6  license: repo.license?.spdx_id,
7  bundleSize: await getBundleSize(repo),
8  typescript: hasTypeScript(repo),
9  qualityScore: calculateQualityScore(repo)
10};

3. Adapt to SkyyRose

javascript
1// Apply SkyyRose branding
2const branded = adaptComponent(component, {
3  primaryColor: '#B76E79', // Rose gold
4  fontFamily: 'Playfair Display',
5  spacing: 'luxury', // More whitespace
6  animations: 'smooth' // Elegant transitions
7});

4. Document Attribution

javascript
1// Add to package.json or README
2{
3  "dependencies": {
4    "original-package": "^1.0.0"
5  },
6  "attributions": [
7    {
8      "name": "original-package",
9      "license": "MIT",
10      "url": "https://github.com/author/original-package"
11    }
12  ]
13}

Resource Types

WordPress Themes

Sources:

• WordPress.org theme directory
• ThemeForest (premium)
• GitHub (open-source)

Search for:

• Luxury fashion themes
• E-commerce themes with 3D support
• Elementor-compatible themes

React/Vue Components

Sources:

• GitHub
• npm registry
• Component libraries (shadcn/ui, Radix UI)

Search for:

• Product configurators
• 3D viewers
• Gallery components
• Interactive carousels

Three.js Examples

Sources:

• threejs.org/examples
• CodeSandbox
• GitHub showcases

Search for:

• Product visualization
• Material effects
• Lighting setups
• Performance optimization examples

Elementor Widgets

Sources:

• GitHub
• WordPress.org plugins
• Elementor addon packs

Search for:

• Custom widgets
• 3D integration
• Product display widgets

Best Practices

License Compliance

javascript
1const COMPATIBLE_LICENSES = [
2  'MIT',
3  'Apache-2.0',
4  'BSD-2-Clause',
5  'BSD-3-Clause',
6  'GPL-2.0',
7  'GPL-3.0'
8];
9
10function isLicenseCompatible(license) {
11  return COMPATIBLE_LICENSES.includes(license);
12}

Security Check

bash
1# Check for vulnerabilities
2npm audit
3
4# Scan with Snyk
5npx snyk test

Bundle Size Impact

bash
1# Check package size
2npm view <package-name> dist.unpackedSize
3
4# Analyze bundle impact
5npx bundle-phobia <package-name>

SkyyRose Adaptation

Branding Rules

1. Replace colors with #B76E79 (rose gold)
2. Use Playfair Display for headings
3. Add elegant animations (0.3s ease-in-out)
4. Increase whitespace for luxury feel
5. Add SkyyRose attribution

Code Modifications

javascript
1// Before (generic)
2<Component color="blue" />
3
4// After (SkyyRose branded)
5<Component
6  color="#B76E79"
7  className="skyyrose-luxury-component"
8  animationDuration={300}
9/>

References

See references/ for:

• github-search-guide.md
• npm-discovery.md
• wordpress-org-search.md
• evaluation-criteria.md
• license-compatibility.md

Scripts

See scripts/ for:

• github-search.sh
• npm-search.sh
• evaluate-quality.js
• check-license.sh
• bundle-size-check.js