// Use for distinctive production-grade websites, landing pages, and interactive web experiences with strong design and QA discipline.
| name | website-building |
| description | Use for distinctive production-grade websites, landing pages, and interactive web experiences with strong design and QA discipline. |
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/GENERAL-KNOWLEDGE-WORKER/website-building/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/GENERAL-KNOWLEDGE-WORKER/website-building/shared/01-design-tokens.md
Step 1: Identify project type and load domain-specific guidance:
| Project Type | Action | Examples |
|---|---|---|
| Informational sites | read skills/GENERAL-KNOWLEDGE-WORKER/website-building/informational/informational.md | Personal sites, portfolios, editorial/blogs, small business, landing pages |
| Web applications | read skills/GENERAL-KNOWLEDGE-WORKER/website-building/webapp/SKILL.md | SaaS products, dashboards, admin panels, e-commerce, brand experiences |
| Browser games | read skills/GENERAL-KNOWLEDGE-WORKER/website-building/game/game.md + skills/GENERAL-KNOWLEDGE-WORKER/website-building/game/game-testing.md | 2D Canvas games, Three.js/WebGL, HTML5 games, interactive 3D experiences |
Step 2: Read shared files — read skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/01-design-tokens.md and skills/GENERAL-KNOWLEDGE-WORKER/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.
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 reference | When site uses AI APIs |
All paths are relative to skills/GENERAL-KNOWLEDGE-WORKER/website-building/.
† Skip for webapp and dashboards — implementation details pre-configured in the fullstack template. Design-tokens and typography are NOT skipped — they provide the authoritative design system defaults and font selection guidance for all project types.
| File | When to load |
|---|---|
read skills/GENERAL-KNOWLEDGE-WORKER/website-building/webapp/SKILL.md | SaaS, dashboard, admin, e-commerce, brand experience (child skill with fullstack template) |
webapp/dashboards.md | Dashboard or data-dense interface (companion to webapp) |
informational/informational.md | Personal site, portfolio, editorial, small business, landing |
game/game.md | Browser game, Three.js, WebGL, interactive 3D |
game/2d-canvas.md | 2D Canvas game (companion to game.md) |
game/game-testing.md | Any browser game — load alongside game.md |
Interactive QA: Read skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/12-playwright-interactive.md for persistent browser automation with Playwright (screenshots, functional testing, visual QA). Required for game testing, useful for any complex site.
Read ALL of these in one batch — they are mandatory for every project:
read("skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/01-design-tokens.md")
read("skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/02-typography.md")
read("skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/04-layout.md")
read("skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/05-taste.md")
read("skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/08-standards.md")
Then load the domain-specific file (informational, webapp, or game) from Step 1 below.
Run the palette generator with keywords describing the subject:
bun run skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/generate-palette.ts "subject keywords here"
Pick the best harmony, customize if needed.
Build the site with the generated palette, following all the loaded design guidance.
Show via static server: show(type: "url", url: "http://localhost:3211/open?path=/workspace/project/index.html")
skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/12-playwright-interactive.md to screenshot at desktop (1280px+) and mobile (375px). Compare against references. This is mandatory, not optional. See Visual QA below.Every project gets a custom inline SVG logo. Never substitute a styled text heading.
currentColor for dark/light mode.aria-label, viewBox, fill="none", currentColor strokesFor SVG animation (DrawSVG, MorphSVG), see shared/03-motion.md. For SVG patterns/filters, see shared/07-toolkit.md.
Every deployment must pass visual QA. Screenshots are quality gates.
Read skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/12-playwright-interactive.md for all visual QA. Playwright provides a persistent browser session for screenshots, interaction testing, and viewport verification.
Cycle: Build → Playwright QA → Evaluate → Fix → Repeat → Deploy when ready
After building each page:
QA failures: text overflow, inconsistent spacing, off-token colors, missing dark mode, squished mobile, generic AI look, placeholder content, missing logo.
Every site should have a visual identity derived from its content. Do not skip to the Kortix fallback palette. The Kortix palette is a last resort for when both inference and asking have failed — not a convenient default.
informational.md, webapp/SKILL.md, game/game.md) has an Art Direction table mapping site/product types to concept-driven directions and token starting points. Use these as a springboard.When inference yielded no clear direction AND the user was asked but gave no style guidance, use defaults from skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/01-design-tokens.md with:
--text-3xl/--text-hero are for informational site heroes only.See skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/08-standards.md for the full anti-patterns list.
Use real local preview commands first and only publish with the target project's actual deployment workflow. See skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/09-technical.md for the recommended preview and delivery flow.
pty_spawn for the preview or dev server.Discover, compare, and run AI models using Replicate's API. Use this skill whenever the task involves AI-generated media — images (text-to-image, style transfer, editing, upscaling, background removal), video, audio, or any other ML model output. Requires a REPLICATE_API_TOKEN — ask the user for it if not already set.
Transcribe any audio or video file to text using Whisper (Groq or OpenAI). Use when the agent receives voice messages, audio files, video messages, or any media with speech. Triggers on: 'transcribe', 'what does this say', 'voice message', 'speech to text', 'audio', any file path ending in .ogg .mp3 .mp4 .wav .webm .m4a .flac .oga .oga
Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction.
Control desktop applications on the user's machine using agent-click. Use when you need to click buttons, type text, read screens, scroll, drag files, move/resize windows, open/quit apps, interact with UI elements, or automate desktop workflows. Triggers: 'click on', 'open app', 'type into', 'scroll down', 'drag file', 'take screenshot', 'read the screen', 'interact with UI', 'desktop automation', 'computer use', 'agent-click'. Built on agent-click (https://github.com/kortix-ai/agent-click, https://www.agent-click.dev/) — an open-source computer use CLI by Kortix. Right now only works on macOS.
Create, manage, validate, preview, and export HTML presentation slides (1920x1080). Load this skill when you need to build a slide deck, export to PDF/PPTX, or preview slides in a browser.
Interact with the user's local machine via Agent Tunnel. Use when you need to read/write files on their computer, run shell commands locally, take screenshots, click, type, control the mouse/keyboard, manage windows and apps, read/write the clipboard, or use the accessibility tree to interact with UI elements. Triggers: 'access my machine', 'local file', 'on my computer', 'my desktop', 'take a screenshot of my screen', 'run this on my machine', 'click on', 'open an app', 'accessibility tree'.