Skill 详情

website-building

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

匹配类型直接匹配已针对搭建网站审核

来源kortix-ai/suna外部来源

报告安装量4仅表示受欢迎程度

使用前先检查

自动化审核只检查相关性，不代表安全审查或推荐。使用前请阅读来源中的说明。

在 skills.sh 查看（打开外部页面）在 GitHub 阅读 SKILL.md （打开外部页面）

已保存的来源预览

SKILL.md

这段内容是审核时保存的快照。外部来源才是完整且最新的版本。

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

在 GitHub 阅读完整来源