Claude Artifacts Repository

A secure, extensible platform for loading, analyzing, and displaying Claude AI-generated React components with comprehensive security validation and dependency management.

🚀 Features

• Security-First Architecture: Comprehensive validation system prevents XSS, injection attacks, and unsafe imports
• Real-time Dependency Analysis: Automatically detects and validates component dependencies
• Error Boundaries: Robust error handling prevents single component failures from crashing the app
• Performance Optimized: Uses React best practices including memoization and code splitting
• Interactive UI: Visual indicators for security status and validation results
• Extensible Design: Plugin-ready architecture for custom artifact processors

🔒 Security Features

• ✅ Shell Injection Prevention: Secure command execution without shell access
• ✅ XSS Protection: Input sanitization and safe DOM manipulation
• ✅ CDN Security: Local dependencies instead of external script loading
• ✅ Artifact Validation: Pre-execution security and compliance checking
• ✅ Path Traversal Protection: Validated file system access
• ✅ Dependency Whitelisting: Only approved packages allowed

📁 Project Structure

Claude-Artifacts/
├── app-analyzer/                    # Main application directory
│   ├── artifact_manager.py         # Python artifact management script
│   ├── src/                        # React application source
│   │   ├── components/             # React components
│   │   │   ├── ArtifactLoader.jsx  # Main artifact loading component
│   │   │   ├── DependencyAnalyzer.jsx # Dependency analysis UI
│   │   │   ├── ErrorBoundary.jsx   # Error handling component
│   │   │   └── ui/                 # UI component library
│   │   ├── claude_artifacts/       # Sample artifacts
│   │   │   ├── color-picker.jsx    # Secure color picker component
│   │   │   ├── expense-tracker.jsx # Expense tracking app
│   │   │   └── sample-dashboard.jsx # Dashboard example
│   │   └── services/               # Business logic services
│   │       ├── artifactAnalyzer.js # Server-side analysis
│   │       └── artifactValidator.js # Security validation system
│   └── jsconfig.json              # JavaScript configuration
├── AUDIT_REPORT.md                # Comprehensive security audit report
├── SECURITY_CONFIG.md             # Security policies and guidelines
└── README.md                      # This file

🚀 Quick Start

Prerequisites

• Python 3.8+
• Node.js 16+
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/CrazyDubya/Claude-Artifacts.git
   cd Claude-Artifacts

2. Set up the environment

   cd app-analyzer
   python3 artifact_manager.py

3. Install additional dependencies (if needed)

   npm install

Adding New Artifacts

1. Create a new React component in app-analyzer/src/claude_artifacts/

   // my-component.jsx
   import React from 'react';
   import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
   
   const MyComponent = () => {
     return (
       <Card>
         <CardHeader>
           <CardTitle>My Artifact</CardTitle>
         </CardHeader>
         <CardContent>
           <p>Hello from Claude Artifacts!</p>
         </CardContent>
       </Card>
     );
   };
   
   export default MyComponent;

2. Follow security guidelines (see SECURITY_CONFIG.md)

   • Use only approved dependencies
   • Avoid dangerous patterns (eval, innerHTML, etc.)
   • Sanitize user inputs
   • Include proper error handling

3. The artifact will be automatically detected and validated when you refresh the application

🛠️ Development

Security Validation

All artifacts are automatically validated against security policies:

import { ArtifactValidator } from './services/artifactValidator';

const result = ArtifactValidator.validate(artifactCode, filename);
if (!result.isValid) {
  console.log('Security issues:', result.securityIssues);
}

Error Handling

Components are wrapped in error boundaries for stability:

<ErrorBoundary title="Component Error" onReport={handleErrorReport}>
  <YourComponent />
</ErrorBoundary>

Performance Optimization

The application uses React best practices:

• useCallback for event handlers
• useMemo for expensive computations
• Code splitting for dynamic imports
• Memoized validation results

📊 Security Audit Results

Category	Before	After	Improvement
Security Score	3/10	8.5/10	+183%
Code Quality	4/10	8/10	+100%
Performance	4/10	8/10	+100%
Maintainability	3/10	8/10	+167%

Critical Issues Fixed

• ❌ Shell Injection: shell=True → Secure array commands
• ❌ CDN Loading: External scripts → Local dependencies
• ❌ XSS Vulnerabilities: innerHTML → Safe DOM methods
• ❌ Path Injection: Hardcoded paths → Validated paths
• ❌ Missing Validation: None → Comprehensive security system

🔧 Configuration

Allowed Dependencies

The security system only allows these pre-approved packages:

• @radix-ui/* - UI components
• lucide-react - Icons
• clsx - Class utilities
• tailwind-merge - Tailwind utilities
• date-fns - Date utilities
• lodash - General utilities

Security Policies

See SECURITY_CONFIG.md for detailed security policies and validation rules.

🧪 Testing

Run the artifact manager to test the setup:

cd app-analyzer
python3 artifact_manager.py

Expected output:

Setting up project...
New dependencies installation completed!
Scanning for artifacts...
Found 3 artifacts:
- Color Picker (react)
- Expense Tracker (react)
- Sample Dashboard (react)

🐛 Troubleshooting

Common Issues

1. Import errors: Ensure all paths use the @/ alias for components
2. Security validation fails: Check SECURITY_CONFIG.md for allowed patterns
3. Component not loading: Verify the component exports a default React component
4. npm errors: Try running with --force flag for component installs

Error Reporting

The application includes comprehensive error reporting:

• Component-level error boundaries
• Validation error details
• Security issue descriptions
• Performance warnings

🤝 Contributing

1. Security First: All contributions must pass security validation
2. Code Quality: Follow React best practices and ESLint rules
3. Documentation: Update relevant documentation for new features
4. Testing: Ensure changes don't break existing functionality

Submitting Artifacts

1. Create your component following security guidelines
2. Test with the validation system
3. Submit with proper documentation
4. Include security review checklist

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🔮 Future Roadmap

• TypeScript Migration: Full type safety
• Hot Reloading: Development mode improvements
• Plugin System: Extensible architecture
• CLI Tools: Command-line artifact management
• Cloud Integration: Artifact sharing and storage
• Advanced Analytics: Usage metrics and insights

📞 Support

For issues, questions, or contributions:

1. Check the AUDIT_REPORT.md for known issues
2. Review SECURITY_CONFIG.md for security guidelines
3. Open an issue with detailed reproduction steps
4. Follow the security reporting guidelines for vulnerabilities

---

Built with security, performance, and developer experience in mind.

Original Screenshots