Website Builder Skill
Build beautiful, modern websites from your codebase or from scratch.
Capabilities
Website Types
- Documentation - Auto-generated API docs, guides, and references
- Admin Dashboard - CRUD interfaces, analytics, and management UIs
- Marketing/Landing - Product showcases, features, and conversion pages
- Portfolio/Showcase - Project galleries, case studies, and demos
Framework Support
- Next.js - Best for SEO, performance, and React ecosystem
- Nuxt - Vue.js meta-framework with excellent DX
- SvelteKit - High performance with small bundles
Key Features
- Smart codebase analysis
- Framework detection and recommendation
- Beautiful shadcn/ui components
- Tailwind CSS styling
- Deployment configuration
- Synchronization support
Invocation
The website builder skill is invoked through the /siftcoder:website command:
/siftcoder:website <type> # Build specific type
/siftcoder:website docs # Build documentation site
/siftcoder:website admin # Build admin dashboard
/siftcoder:website marketing # Build marketing site
/siftcoder:website portfolio # Build portfolio site
Process
1. Codebase Analysis
The skill analyzes the codebase to understand:
Analyzing codebase...
├── Framework Detection
│ ├── package.json dependencies
│ ├── Config files (next.config.js, nuxt.config.js, etc.)
│ └── File structure patterns
│
├── Component Detection
│ ├── React/Vue/Svelte components
│ ├── Component props and interfaces
│ └── Component relationships
│
├── API Detection
│ ├── REST endpoints (Express, Fastify, etc.)
│ ├── GraphQL schemas
│ └── API route patterns
│
├── Data Model Detection
│ ├── TypeScript interfaces/types
│ ├── Database schemas
│ ├── ORM models (Prisma, TypeORM, etc.)
│ └── DTOs and validation schemas
│
└── Documentation Detection
├── README.md
├── docs/ folders
├── JSDoc/TSDoc comments
└── Markdown files
2. Type Recommendation
Based on the analysis, the skill recommends the most suitable website type:
Documentation Site - Recommended when:
- README.md or docs/ folder found
- TypeScript interfaces/types detected
- API endpoints present
- Library/component library detected
Admin Dashboard - Recommended when:
- Multiple data models detected
- REST/GraphQL APIs found
- CRUD operations needed
- SaaS or internal tool patterns
Marketing Site - Recommended when:
- Product/project description found
- General project structure
- No specific patterns indicating other types
- Startup or product context
Portfolio Site - Recommended when:
- Multiple components or projects
- GitHub repositories
- Developer/agency context
- Showcase patterns detected
3. Framework Selection
The skill selects the optimal framework:
Existing Framework - Always match if detected:
Found Next.js → Use Next.js template
Found Nuxt → Use Nuxt template
Found SvelteKit → Use SvelteKit template
No Framework - Recommend based on use case:
Documentation → Next.js (best SEO)
Admin Dashboard → Next.js or Nuxt
Marketing → Next.js (SSR for SEO)
Portfolio → Next.js or SvelteKit
4. Website Generation
The skill generates the website using templates:
Load Template
- Framework-specific template
- Website-type-specific content
- shadcn/ui component library
Customize Template
- Apply codebase analysis
- Inject project metadata
- Generate API documentation
- Create components from data models
Configure Build
- Set up package.json
- Configure TypeScript
- Add ESLint/Prettier
- Configure Tailwind CSS
- Set up testing
Generate Deployment Config
- Vercel (vercel.json)
- Netlify (netlify.toml)
- Cloudflare Pages (wrangler.toml)
- GitHub Pages (workflow)
5. Synchronization Setup
The skill sets up ongoing synchronization:
Sync Mode Selection
- Auto - Documentation, certain admin updates
- Semi-Auto - Marketing content, new features
- Manual - Breaking changes, major updates
Sync Configuration
- Change detection hooks
- Trigger configuration (git, webhook, scheduled)
- Sync strategies per content type
- Rollback capabilities
Output Format
Analysis Output
{
"success": true,
"analysis": {
"framework": "nextjs",
"language": "TypeScript",
"components": 15,
"apis": 8,
"dataModels": 5,
"documentation": true,
"features": ["REST API", "Data models", "Pages/Routes"],
"recommendedType": "documentation",
"recommendedFramework": "nextjs"
}
}
Recommendation Output
{
"recommended": "documentation",
"confidence": 0.9,
"reasoning": "Found README.md and docs/ folder with TypeScript types - ideal for documentation site",
"alternatives": [
{"type": "portfolio", "reason": "Can showcase project alongside docs"}
]
}
Build Output
{
"success": true,
"message": "Website built successfully!",
"websitePath": "./docs-website",
"steps": [
"✓ Options validated",
"✓ Template loaded",
"✓ Website generated",
"✓ Build configured",
"✓ Dependencies installed",
"✓ Deployment configured"
],
"nextSteps": [
"cd docs-website",
"npm run dev",
"# Open http://localhost:3000"
]
}
Component Generation Output
{
"success": true,
"components": [
"Sidebar navigation",
"Search bar",
"API documentation pages",
"Code syntax highlighting",
"Table of contents",
"MDX support",
"Version selector"
],
"message": "Generated 7 components for documentation website"
}
Integration with Other Skills
pattern-detector
The website-builder skill integrates with pattern-detector to:
- Detect coding patterns in the codebase
- Match website style to codebase conventions
- Maintain consistency between code and website
// Pattern detection informs:
// - Component structure
// - Naming conventions
// - Code style in examples
// - Documentation patterns
spec-analyzer
Integration with spec-analyzer to:
- Extract features from specifications
- Generate website content from specs
- Create documentation from requirements
bridge-analyzer
Integration with bridge-analyzer to:
- Detect gaps between codebase and website
- Create integration specifications
- Ensure complete synchronization
documenter
Integration with documenter to:
- Auto-generate documentation content
- Create API reference docs
- Generate guides and tutorials
Website Type Details
Documentation Site
Generated Components:
- Sidebar navigation
- Search bar (Fuse.js or Algolia)
- API documentation pages
- Code syntax highlighting
- Table of contents
- Previous/next navigation
- Version selector
- MDX support
- Edit on GitHub links
Content Generation:
- API docs from TypeScript types/interfaces
- Getting started from README.md
- Component docs from props and JSDoc
- Usage examples from code comments
Sync Strategy:
- Auto: Code changes → API docs update
- Auto: Type changes → Reference docs update
- Manual: Guide content changes
Admin Dashboard
Generated Components:
- Dashboard layout
- Data tables (sorting, filtering, pagination)
- Charts and graphs
- CRUD forms
- Validation UI
- Authentication pages
- User management
- Settings pages
- Notifications
- Activity feeds
Content Generation:
- CRUD UIs from data models
- Dashboard widgets from API endpoints
- Forms from validation schemas
- Analytics from data patterns
Sync Strategy:
- Auto: Model changes → Form updates
- Auto: API changes → Dashboard updates
- Semi-auto: New features → Review required
Marketing Site
Generated Components:
- Hero section
- Features grid
- Testimonials
- Pricing tables
- FAQ accordion
- Blog/news section
- Newsletter signup
- Contact form
- Social sharing
Content Generation:
- Hero from project description
- Features from capabilities
- Pricing from plans (if detected)
- About from README/team info
Sync Strategy:
- Manual: Most content changes
- Auto: Version numbers, pricing
- Semi-auto: Feature updates
Portfolio Site
Generated Components:
- Project showcase
- Project detail pages
- About section
- Skills grid
- Experience timeline
- Education section
- Contact form
- Blog section
- Resume download
- Social links
Content Generation:
- Projects from codebase/repos
- Skills from package.json dependencies
- Experience from commit history
- About from bio/description
Sync Strategy:
- Auto: New projects → Showcase
- Auto: Commits → Timeline
- Manual: About, bio content
Usage Examples
Example 1: Documentation for TypeScript Project
/siftcoder:website docs
# Analyzes codebase
# Detects TypeScript, APIs
# Generates API documentation
# Creates navigation and search
# Outputs: ./docs-website
Example 2: Admin Dashboard for SaaS
/siftcoder:website admin
# Analyzes data models
# Creates CRUD UIs
# Builds dashboard
# Adds authentication
# Outputs: ./admin-dashboard
Example 3: Marketing Site
/siftcoder:website marketing
# Extracts product info
# Creates landing page
# Adds features, pricing
# SEO optimization
# Outputs: ./marketing-site
Example 4: Portfolio for Developer
/siftcoder:website portfolio
# Scans repositories
# Creates project showcase
# Builds experience timeline
# Adds skills, education
# Outputs: ./portfolio
Best Practices
Before Building
- Ensure project has a good README.md
- Add JSDoc/TSDoc comments to APIs
- Use TypeScript for better auto-generated docs
- Organize code with clear structure
During Build
- Choose framework wisely (Next.js for SEO, Nuxt for Vue, SvelteKit for performance)
- Enable sync for documentation sites
- Consider multi-type combinations (docs + portfolio)
- Review recommendations before accepting
After Building
- Test locally:
npm run dev - Check all pages and routes
- Test responsive design
- Run Lighthouse for performance
- Customize styling and branding
Troubleshooting
Framework Not Detected
- Ensure package.json exists
- Check framework dependencies
- Manually specify framework with options
Missing Components
- Verify codebase structure
- Check for components/ folder
- Ensure proper file naming
Sync Issues
- Check sync configuration
- Verify webhook setup
- Review change detection rules
Build Errors
- Check dependencies:
npm install - Verify TypeScript configuration
- Review build logs
Future Enhancements
- Additional framework support (Astro, Remix)
- More component libraries (MUI, Chakra)
- CMS integration (Sanity, Contentful)
- Advanced analytics (Google Analytics, Plausible)
- Authentication providers (Auth.js, Clerk)
- More deployment platforms (Railway, Fly.io)
- A/B testing integration
- Internationalization (i18n)
- Theme customization UI
Converted and distributed by TomeVault — claim your Tome and manage your conversions.