Detalle del Skill
website-building
Comprehensive guidance for building production-grade websites and web experiences.
Revisar antes de usar
La revisión automática comprueba relevancia, no seguridad ni respaldo. Lee las instrucciones de la fuente antes de usar este Skill.
SKILL.md
Este extracto es una copia guardada durante la revisión. La fuente externa contiene la versión completa y actual.
--- 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 referLeer la fuente completa en GitHub (abre una página externa)