Build beautiful, modern websites from your codebase or from scratch
Builds beautiful, modern websites from your codebase or from scratch with automatic synchronization.
/plugin marketplace add ialameh/sift-coder/plugin install ialameh-siftcoder@ialameh/sift-coder<website-type> [options]Building website: $ARGUMENTS
The website builder creates beautiful, modern websites that stay synchronized with your codebase. Choose from four website types:
/siftcoder:website <type> # Build with interactive setup
/siftcoder:website docs # Build documentation site
/siftcoder:website admin # Build admin dashboard
/siftcoder:website marketing # Build marketing site
/siftcoder:website portfolio # Build portfolio site
If no arguments provided, guide user through:
Website Type Selection
Framework Selection
Styling Preferences
Feature Selection
Deployment Options
Analyze the codebase to inform website generation:
Analyzing codebase...
├── Project Structure
│ ├── Framework detected: [Next.js/Vue/Svelte/None]
│ ├── Components found: [count]
│ ├── Services/APIs found: [count]
│ └── Documentation found: [README, docs/, comments]
│
├── API Detection
│ ├── REST endpoints: [count]
│ ├── GraphQL schemas: [count]
│ └── WebSocket endpoints: [count]
│
├── Data Models
│ ├── TypeScript interfaces: [count]
│ ├── Database schemas: [count]
│ └── DTOs/types: [count]
│
└── Content Assets
├── Images: [count]
├── Markdown files: [count]
└── Example code: [count]
Use the website-builder skill to analyze:
Generate website using templates and analysis:
Select Template
Generate Content
Customize Components
Configure Build
Set up ongoing synchronization between codebase and website:
Initial Sync
Sync Configuration
Bridge Integration
Allow user to preview and refine before final build:
Start Preview
cd <generated-website>
npm install
npm run dev
Refinement Loop
Approval
Deploy website based on selected platform:
Vercel
vercel link
vercel --prod
Netlify
netlify init
netlify deploy --prod
Cloudflare Pages
wrangler pages publish <dist-dir>
GitHub Pages
Best for: Open source projects, API references, technical guides
Features:
Generated Content:
Sync Strategy:
Example:
/siftcoder:website docs
→ Generates docs.yourproject.com
→ Auto-updates API docs when types change
→ Searchable, navigable documentation
Best for: SaaS apps, internal tools, data management
Features:
Generated Content:
Sync Strategy:
Example:
/siftcoder:website admin
→ Generates admin.yourapp.com
→ Auto-generates CRUD interfaces
→ Real-time dashboard from APIs
Best for: Products, startups, campaigns
Features:
Generated Content:
Sync Strategy:
Example:
/siftcoder:website marketing
→ Generates yourproduct.com
→ Beautiful landing page
→ SEO optimized
Best for: Developers, agencies, project showcases
Features:
Generated Content:
Sync Strategy:
Example:
/siftcoder:website portfolio
→ Generates yourname.dev
→ Showcases your projects
→ Auto-updates with new work
Best for:
Features:
Template Locations:
sift-coder/templates/website/nextjs-docs/sift-coder/templates/website/nextjs-admin/sift-coder/templates/website/nextjs-marketing/sift-coder/templates/website/nextjs-portfolio/Best for:
Features:
Template Locations:
sift-coder/templates/website/nuxt-docs/sift-coder/templates/website/nuxt-admin/Best for:
Features:
Template Locations:
sift-coder/templates/website/sveltekit-docs/sift-coder/templates/website/sveltekit-admin/Auto
Semi-Auto
Manual
Git Commit
Manual Trigger
/siftcoder:website sync
Scheduled
Webhook
/siftcoder:website sync # Sync all changes
/siftcoder:website sync --docs # Sync documentation only
/siftcoder:website sync --admin # Sync admin dashboard only
/siftcoder:website sync status # Check sync status
bridge - Analyze gaps between codebase and website
/siftcoder:bridge <codebase> <website>
→ Identifies missing website features
→ Generates integration specs
document - Generate documentation for website
/siftcoder:document code
→ Auto-generates content for docs site
features - List features to showcase
/siftcoder:features
→ Provides feature list for marketing site
test - Test generated website
/siftcoder:test <website-path>
→ Runs E2E tests on website
All generated websites include:
Testing
Code Quality
Performance
SEO (for marketing/docs)
Website projects tracked in:
.claude/siftcoder-state/website-projects.json.claude/siftcoder-state/website-templates.jsonState includes:
Example 1: Documentation Site from TypeScript Project
/siftcoder:website docs
→ Analyzes codebase
→ Detects Next.js, uses Next.js template
→ Generates API docs from types
→ Creates guides from README
→ Deploys to Vercel
Example 2: Admin Dashboard for SaaS App
/siftcoder:website admin
→ Analyzes data models
→ Creates CRUD UIs
→ Builds dashboard from APIs
→ Adds authentication UI
→ Deploys to Netlify
Example 3: Marketing Site for Product
/siftcoder:website marketing
→ Extracts product info from README
→ Creates landing page with hero, features, pricing
→ Adds SEO optimization
→ Deploys to Vercel
Example 4: Portfolio for Developer
/siftcoder:website portfolio
→ Scans repositories for projects
→ Creates project showcase
→ Builds experience timeline from commits
→ Adds skills from tech stack
→ Deploys to GitHub Pages
Example 5: Sync Existing Website
/siftcoder:website sync
→ Detects codebase changes
→ Updates website accordingly
→ Runs tests
→ Deploys if tests pass
BEFORE BUILDING
New project?
→ Ensure you have a README.md
→ Add JSDoc comments to APIs
→ Use TypeScript types
Have an existing website?
→ /siftcoder:bridge <codebase> <website>
→ Analyze gaps first
→ Then build new or sync
DURING BUILD
Choose framework wisely:
→ Next.js for SEO/SSR (docs, marketing)
→ Nuxt for Vue projects
→ SvelteKit for performance
Enable sync for:
→ Documentation (keep API docs current)
→ Admin dashboards (sync with data models)
→ Portfolios (auto-add new projects)
AFTER BUILDING
Test locally:
→ npm run dev
→ Check all pages
→ Test responsive design
→ Run lighthouse
Deploy with confidence:
→ Tests run automatically
→ Quality gates passed
→ SEO optimized (if applicable)
Keep synchronized:
→ /siftcoder:website sync
→ Set up webhooks
→ Enable auto-sync for docs
CUSTOMIZATION
Want to customize?
→ Templates are fully editable
→ Add custom components
→ Modify layouts
→ Update styling
Need advanced features?
→ Add authentication (Auth.js, Clerk)
→ Add analytics (Vercel Analytics, Plausible)
→ Add CMS (Sanity, Contentful)
→ Add search (Algolia, Orama)
If website type provided, begin analysis and generation. If no arguments, start interactive setup.
Use AskUserQuestion for:
Proceed with website generation...