website-builder

# 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:

```bash
/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