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

# Use GitHub API for targeted searches
curl "https://api.github.com/search/repositories?q=wordpress+theme+luxury+language:php+stars:>100&sort=stars"

# Search for specific tech stack
curl "https://api.github.com/search/repositories?q=react+three+fiber+product+configurator+stars:>50"

2. npm Registry Search

# Search packages by keywords
npm search "3d viewer threejs gltf" --searchlimit=10

# Get package details
npm view @react-three/fiber

3. WordPress.org Search

# Search themes
curl "https://api.wordpress.org/themes/info/1.2/?action=query-themes&request[search]=luxury+fashion"

# Search plugins
curl "https://api.wordpress.org/plugins/info/1.2/?action=query_plugins&request[search]=elementor+widget"

Evaluation Criteria

Quality Score Algorithm

function calculateQualityScore(repo) {
  const scores = {
    stars: Math.min(repo.stargazers_count / 1000, 10),
    maintenance: repo.pushed_at_days_ago < 180 ? 10 : 5,
    documentation: repo.has_readme ? 10 : 0,
    typescript: repo.has_typescript ? 5 : 0,
    tests: repo.has_tests ? 5 : 0,
    license: ['MIT', 'Apache-2.0'].includes(repo.license) ? 5 : 0
  };

  return Object.values(scores).reduce((a, b) => a + b, 0);
}

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

// Search GitHub for React components
const results = await searchGitHub({
  query: 'react product viewer',
  language: 'typescript',
  stars: '>100',
  sort: 'updated'
});

// Filter by quality score
const filtered = results.filter(r => calculateQualityScore(r) > 30);

2. Evaluate Top Results

const evaluation = {
  name: repo.name,
  url: repo.html_url,
  stars: repo.stargazers_count,
  lastUpdate: repo.pushed_at,
  license: repo.license?.spdx_id,
  bundleSize: await getBundleSize(repo),
  typescript: hasTypeScript(repo),
  qualityScore: calculateQualityScore(repo)
};

3. Adapt to SkyyRose

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

4. Document Attribution

// Add to package.json or README
{
  "dependencies": {
    "original-package": "^1.0.0"
  },
  "attributions": [
    {
      "name": "original-package",
      "license": "MIT",
      "url": "https://github.com/author/original-package"
    }
  ]
}

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

const COMPATIBLE_LICENSES = [
  'MIT',
  'Apache-2.0',
  'BSD-2-Clause',
  'BSD-3-Clause',
  'GPL-2.0',
  'GPL-3.0'
];

function isLicenseCompatible(license) {
  return COMPATIBLE_LICENSES.includes(license);
}

Security Check

# Check for vulnerabilities
npm audit

# Scan with Snyk
npx snyk test

Bundle Size Impact

# Check package size
npm view <package-name> dist.unpackedSize

# Analyze bundle impact
npx 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

// Before (generic)
<Component color="blue" />

// After (SkyyRose branded)
<Component
  color="#B76E79"
  className="skyyrose-luxury-component"
  animationDuration={300}
/>

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