Skill detail

website-building

Comprehensive guidance for building production-grade websites and web experiences.

MatchDirectReviewed for building websites

Sourcekortix-ai/sunaExternal source

Reported installs4Popularity signal only

Inspect before use

Automated review checks relevance, not safety or endorsement. Read the source instructions before using this skill.

View on skills.sh (opens external page)Read SKILL.md on GitHub (opens external page)

Saved source preview

SKILL.md

The saved excerpt is a snapshot from review. The external source remains the complete and most current version.

---
name: website-building
description: "Use for distinctive production-grade websites, landing pages, and interactive web experiences with strong design and QA discipline."
defaultProjectInstall: true
defaultProjectInstallOrder: 80
---

# Website Building

Build distinctive, production-grade websites where every site looks DIFFERENT. Every choice — type, color, motion, layout — must be derived from the subject matter. Run the palette generator (`bun run shared/generate-palette.ts "keywords"`) to create a unique color scheme for each project. NEVER reuse the same palette across sites.

**This skill covers everything for web projects.** Read the sub-files in this directory as needed based on your project type. For web applications, also read `skills/webapp/SKILL.md`.

**Universal design principles** (color philosophy, default palette, font selection) are shared with other skills via `design-foundations`. This skill's shared files extend those foundations with web-specific implementation (CSS variables, responsive tokens, base stylesheets). You don't need to load `design-foundations` separately — the web-specific versions in `shared/` are comprehensive.

Use `read` with the full path, e.g. `skills/website-building/shared/01-design-tokens.md`

---

## Project Type Routing

**Step 1: Identify project type and load domain-specific guidance:**

| Project Type | Action | Examples |
|---|---|---|
| Informational sites | `read` `skills/website-building/informational/informational.md` | Personal sites, portfolios, editorial/blogs, small business, landing pages |
| Web applications | `read skills/webapp/SKILL.md` | SaaS products, dashboards, admin panels, e-commerce, brand experiences |
| Browser games | `read` `skills/website-building/game/game.md` + `skills/website-building/game/game-testing.md` | 2D Canvas games, Three.js/WebGL, HTML5 games, interactive 3D experiences |

**Step 2: Read shared files** — read `skills/website-building/shared/01-design-tokens.md` and `skills/website-building/shared/02-typography.md` first (mandatory for ALL project types, including webapp). These establish the Kortix design system defaults and typography rules that apply universally. For web applications and dashboards, skip files marked with `†` below — those contain implementation details pre-configured in the fullstack template.

If the user says just "website" or "site" with no detail, ask what type or default to informational.

---

## Sub-File Reference

### Shared (`shared/`) — Every project

| File | Covers | Load |
|---|---|---|
| `shared/01-design-tokens.md` | Type scale, spacing, Kortix palette, base.css | **Always** |
| `shared/02-typography.md` | Font selection, pairing, loading, blacklist | **Always** |
| `shared/04-layout.md` | Spatial composition, responsive, mobile-first | **Always** † |
| `shared/05-taste.md` | Skeleton loaders, empty/error states, polish | **Always** |
| `shared/08-standards.md` | Accessibility, performance, anti-patterns | **Always** |
| `shared/09-technical.md` | Project structure, sandbox, deploy, checklist | **Always** † |
| `shared/head-defaults.html` | Attribution block for `<head>` | **Always** † |
| `shared/03-motion.md` | Scroll animations, Motion library, GSAP SVG plugins, hover/cursor | When animated |
| `shared/06-css-and-tailwind.md` | Tailwind CSS v3, shadcn/ui, modern CSS | When using Tailwind |
| `shared/07-toolkit.md` | CDN libraries, React, Three.js, icons, maps, SVG patterns/filters, esm.sh | When choosing libs |
| `shared/10-charts-and-dataviz.md` | Chart.js, Recharts, D3, KPIs, sparklines | When data viz needed |
| `shared/11-web-technologies.md` | Framework versions, browser compatibility | When checking compat |
| `shared/12-playwright-interactive.md` | Persistent Playwright browser QA, screenshots, visual testing | When testing |
| `shared/19-backend.md` | FastAPI/Express/Flask servers, WebSocket, SSE, port forwarding | When backend needed |
| `shared/20-llm-api.md` | LLM/AI API integration refer

Read the full source on GitHub

Context