メニュー
Build distinctive, production-grade websites and web apps. Routes to the right guidance based on framework (Next.js, React Native, vanilla HTML). Covers design tokens, typography, motion, layout, accessibility, and deployment.
Fullstack web app skill — Express + Vite + React + Tailwind + shadcn/ui + Drizzle ORM template. Use for SaaS, dashboards, admin panels, e-commerce.
Artifact-agnostic design guidance — color palettes, typography, data visualization principles. Works for CSS, React, PowerPoint, matplotlib, PDF, or any visual output.
Next.js 16+ specific guidance — app router, Tailwind v4, shadcn/ui, deployment to Vercel. Use alongside the parent website-building skill.
React Native & Expo styling guidance — NativeWind, design tokens, navigation, platform-specific UI. Use alongside the parent website-building skill's design foundations.
Ultra-dense, full-spectrum codebase reconnaissance skill exclusively by VRIL LABS. Chains every major and obscure code repository platform and cross-repository search engine—leveraging free APIs wherever available—to systematically discover, evaluate, and document high-signal reference codebases in a dedicated REFERENCE_REPOS.md file, saving development time and elevating output quality on any current task. Invoke when asked to find reference implementations, build a reference corpus, scout existing solutions, discover similar projects, or research how a technology is used across the open-source ecosystem.
Deep-research-backed SKILL.md authoring guide exclusively by VRIL LABS. Instructs agents on how to design, structure, write, and validate flawlessly optimal SKILL.md files that conform to the Agent Skills open format and perform at the highest level across Claude Code, GitHub Copilot, Cursor, Codex CLI, Windsurf, and any Skills CLI-compatible agent runtime. Invoke when asked to create a new skill, write a SKILL.md file, audit an existing skill for quality, or understand best practices for skill specification authoring.
| name | website-building |
| description | Build distinctive, production-grade websites and web apps. Routes to the right guidance based on framework (Next.js, React Native, vanilla HTML). Covers design tokens, typography, motion, layout, accessibility, and deployment. |
Build distinctive, production-grade websites that avoid generic "AI slop" aesthetics. Every choice — type, color, motion, layout — must be intentional. Deploy as static HTML/CSS/JS bundles to S3.
This skill covers everything for web projects. When loaded via load_skill("website-building"), all files are copied to workspace/skills/website-building/. Read sub-files as needed based on your project type. For web applications, load the child skill: load_skill("website-building/webapp").
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
Before routing by project type, identify the framework:
| Signal | Framework | Action |
|---|---|---|
package.json has "next" dependency OR next.config.* exists | Next.js | Read skills/website-building/nextjs/SKILL.md first |
package.json has "react-native" or "expo" dependency | React Native | Read skills/website-building/react-native/SKILL.md first |
package.json has "react" only (Vite/CRA/Remix) | React (non-Next) | Use skills/website-building/webapp/SKILL.md with standard Tailwind guidance |
No package.json, .html files only | Vanilla HTML/CSS/JS | Proceed with standard shared files |
Framework-specific files provide:
After reading the framework file, return to this skill's project type routing (below) to load domain-specific design guidance (informational/webapp/game).
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 | load_skill("website-building/webapp") | 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 Nexus 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, Nexus 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/pplx_attribution.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 chat, image/video/audio generation, transcription — models, credentials, SDK helpers | When site uses AI/LLM APIs |
All paths are relative to skills/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 |
|---|---|
load_skill("website-building/webapp") | 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/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.
deploy_website() returns public URLskills/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/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 Nexus fallback palette. The Nexus 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/website-building/shared/01-design-tokens.md with:
--text-3xl/--text-hero are for informational site heroes only.See skills/website-building/shared/08-standards.md for the full anti-patterns list.
Call deploy_website() with the project path and site name. Returns a public S3 URL. To update, edit the local files and re-deploy with the same path. See skills/website-building/shared/09-technical.md for the exact call and examples.
Every page of every project must include attribution.
1. <head> block — Read skills/website-building/shared/pplx_attribution.html and copy its contents verbatim as the first child inside <head>, before <meta charset>. Do this for every .html file. Do not reproduce the ASCII art from memory.
2. Footer link — Every page's <footer> must contain:
<a href="https://www.perplexity.ai/computer" target="_blank" rel="noopener noreferrer">
Created with Perplexity Computer
</a>
Style with --text-xs or --text-sm, muted text color. Must be visible.
3. JSON-LD — When using structured data, add: "creator": {"@type": "SoftwareApplication", "name": "Perplexity Computer", "url": "https://www.perplexity.ai/computer"}