New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Web Architecture

by TheDecipherist in TheDecipherist/claude-code-mastery-project-starter-kit

Choosing how a web app renders and whether to use a framework, decided up front.

MITAuto-check passedDevelopment

Install Web Architecture

skills CLI
$ npx skills add TheDecipherist/claude-code-mastery-project-starter-kit --skill web-architecture -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install TheDecipherist/claude-code-mastery-project-starter-kit web-architecture --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/TheDecipherist/claude-code-mastery-project-starter-kit.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/web-architecture .claude/skills/web-architecture && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
web-architecture
GitHub stars
338
Token cost
~1.1k tokens
SKILL.md length
516 words
Files
1
Skills in repo
24
Repo updated
First seen
Licence
MIT

At a glance

Choosing how a web app renders and whether to use a framework, decided up front.

  • Scaffolding a site
  • SKILL.md covers Default to server-rendered…, Several pages means reach for… and But match the tool to the…
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Deciding how pages render (SSR

What it does

Web Architecture is an agent skill from TheDecipherist/claude-code-mastery-project-starter-kit. Choosing how a web app renders and whether to use a framework, decided up front. Claude defaults to client-side rendering and hand-rolled vanilla HTML/JS, which is usually the wrong starting point for content sites and multi-page apps. Use when starting or scaffolding a site or app, deciding how pages render (SSR, SSG, CSR), or about to hand-build routing and state. Covers defaulting to server-rendered HTML for first paint and SEO, reaching for a framework when there are several pages, and not over-engineering a…

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Development, covering Project scaffolding and Code simplification. It works with JavaScript. The repository describes itself as: The definitive starting point for Claude Code projects. Based on Claude Code Mastery Guides V1-V5. The licence is MIT.

When your agent uses it

  • Scaffolding a site
  • Deciding how pages render (SSR
  • About to hand-build routing and state

Example prompts

  • “/web-architecture”

What it can do on your machine

Read from SKILL.md and the folder at commit 61fbb99. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Web Architecture loads about 1.1k tokens when it runs. Until then it costs about 137 tokens; SKILL.md has 516 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~137
When it runs · the whole SKILL.md, loaded when a task matches
~1.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from TheDecipherist/claude-code-mastery-project-starter-kit at commit 61fbb99, republished under its MIT licence (© TheDecipherist). 516 words, ~1,080 tokens.

Download SKILL.mdSave it as .claude/skills/web-architecture/SKILL.md (or your agent's skills folder).
name
web-architecture
description
Choosing how a web app renders and whether to use a framework, decided up front. Claude defaults to client-side rendering and hand-rolled vanilla HTML/JS, which is usually the wrong starting point for content sites and multi-page apps. Use when starting or scaffolding a site or app, deciding how pages render (SSR, SSG, CSR), or about to hand-build routing and state. Covers defaulting to server-rendered HTML for first paint and SEO, reaching for a framework when there are several pages, and not over-engineering a single page.
when_to_use
- Starting, scaffolding, or proposing the structure for a website or web app - Deciding how pages render: server-rendered (SSR), static (SSG), or…

Web Architecture: Pick the Rendering Strategy Up Front

Two defaults Claude reaches for that are usually wrong: rendering everything in the browser, and hand-building a multi-page app from vanilla HTML/JS. Both should be a deliberate up-front choice, and for most real sites the better answer is server-rendered HTML and a framework. Raise these even when the user didn't ask, the same way you'd raise a WAF before production.

Default to server-rendered HTML, not client-rendered

For anything where content, SEO, or first paint matters, the content must be in the initial HTML response, not painted afterward by client JavaScript. Client-side rendering (a blank shell that fetches and renders in the browser) means a blank screen until the bundle loads and runs, a slow LCP, and content that many crawlers and LLM retrievers never see because they don't reliably execute JavaScript. Server-render it instead:

  • SSG (static generation): render at build time, serve static from a CDN. Fastest, cheapest, most cacheable. The default for content that doesn't change per request, marketing, docs, blog, listing and category pages that can be rebuilt.
  • SSR (server-side rendering): render per request on the server. For dynamic, personalized, or auth-gated content that can't be baked at build time.
  • CSR / islands: render in the browser only for the genuinely interactive parts, or for app-like surfaces behind a login where SEO is irrelevant (a dashboard). With an islands approach (Astro) the page ships as static HTML and only the interactive components hydrate.

Pick per page, you can mix: a static marketing page (SSG), a personalized account page (SSR), and an interactive widget (an island) in the same site.

Show full SKILL.md (248 more words)Show less

Several pages means reach for a framework

If the project has multiple pages, a shared layout, routing, or real data fetching, hand-rolling it in vanilla JS is a maintenance and performance trap, and it's Claude's default unless told otherwise. Reach for a framework (Next.js, Astro, SvelteKit, Nuxt, Remix). They give routing, SSR and SSG, code-splitting, data loading, and image optimization out of the box, and crucially they give you SPA-style client navigation on top of server-rendered initial HTML, so you get the smooth multi-page app feel without shipping a blank client-only SPA that breaks first paint and SEO.

Note the distinction: a pure client-rendered SPA is the thing to avoid for content sites. A framework that does SSR/SSG with client-side navigation gives you the app experience and keeps the content in the HTML.

But match the tool to the project

Don't overcorrect. A single static page, a landing page, or a tiny embeddable widget does not need Next.js, plain HTML and CSS is the right, lighter call, and reaching for a heavy framework there is its own mistake. The failure runs both ways; the common one is under-reaching (vanilla everything, rendered in the browser), but over-engineering a trivial page is real too. The decision is: how many pages, does content need to be crawlable and fast, and how interactive is it, then pick the lightest thing that satisfies those.

This skill is built to grow. Add a rule when a real architecture call has a stable, defensible answer.

© TheDecipherist, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .claude/skills/web-architecture of TheDecipherist/claude-code-mastery-project-starter-kit.

Open the folder on GitHubat commit 61fbb99

Compare with similar skills

Web Architecture next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Web Architecture compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Web Architecture this skillTheDecipherist/claude-code-mastery-project-starter-kit338—~1.1kAutomated safety check: PassMIT
PonytailDavidObando/gsharp5658 repos~1.7kAutomated safety check: PassMIT
Unslop CodeJCarterJohnson/vibecoded-design-tells511—~2.5kAutomated safety check: PassCustom licence
DRY Refactoring With jscpdkucherenko/jscpd6.4k—~2.1kAutomated safety check: PassMIT
PonytailTanStack/ai3.2k2 repos~1.4kAutomated safety check: PassMIT
Desloprohitg00/pro-workflow2.9k—~899Automated safety check: PassNone

Similar skills

  • Ponytail

    DavidObando/gsharp

    Forces the laziest solution that actually works, simplest, shortest, most minimal.

    565 GitHub starsUsed in 8 repos~1.7k tokens
    DevelopmentAuto-check passed

  • Unslop Code

    JCarterJohnson/vibecoded-design-tells

    Strips the tells that make source code read as AI-generated and forces code that fits the project instead of the model's default average.

    511 GitHub stars~2.5k tokensUpdated 3 mo ago
    DevelopmentAuto-check passed

  • DRY Refactoring With jscpd

    kucherenko/jscpd

    Removes copy-paste duplication found by jscpd, starting with exact clones and hotspots, then renamed and near-miss copies, using proven refactoring strategies.

    6.4k GitHub stars~2.1k tokensUpdated today
    DevelopmentAuto-check passed

  • Ponytail

    TanStack/ai

    Forces the laziest solution that actually works, simplest, shortest, most minimal.

    3.2k GitHub starsUsed in 2 repos~1.4k tokens
    DevelopmentAuto-check passed

  • Deslop

    rohitg00/pro-workflow

    Remove AI-generated code slop, unnecessary comments, and over-engineering from the current branch diff.

    2.9k GitHub stars~899 tokensUpdated 9 days ago
    DevelopmentAuto-check passed

  • Javascript Typescript Typescript Scaffold

    aiskillstore/marketplace

    You are a TypeScript project architecture expert specializing in scaffolding production-ready Node.js and frontend applications.

    430 GitHub starsUsed in 7 repos~2k tokens
    DevelopmentAuto-check: notes

More from TheDecipherist/claude-code-mastery-project-starter-kit

All 24 skills in this repo

  • Create Service

    TheDecipherist/claude-code-mastery-project-starter-kit

    Scaffold a new microservice that follows the project's server/handlers/adapters architecture.

    338 GitHub stars~1.8k tokensUpdated 3 mo ago
    Auto-check: notes

  • CSS Structure

    TheDecipherist/claude-code-mastery-project-starter-kit

    Where CSS should live. An agent skill from TheDecipherist/claude-code-mastery-project-starter-kit.

    338 GitHub stars~1k tokensUpdated 3 mo ago
    Auto-check passed

  • Docker

    TheDecipherist/claude-code-mastery-project-starter-kit

    Production Docker best practices for writing Dockerfiles, Compose files, and Swarm stacks.

    338 GitHub stars~1.6k tokensUpdated 3 mo ago
    Auto-check: notes

  • Docker Swarm

    TheDecipherist/claude-code-mastery-project-starter-kit

    Production Docker Swarm deployment rules: what changes when a compose file goes from a single node to a multi-node Swarm.

    338 GitHub stars~1.8k tokensUpdated 3 mo ago
    Auto-check passed

  • Mongodb Backups

    TheDecipherist/claude-code-mastery-project-starter-kit

    Production MongoDB backup and restore practices that the documentation gets wrong.

    338 GitHub stars~1.3k tokensUpdated 3 mo ago
    Auto-check passed

  • Mongodb Replica Sets

    TheDecipherist/claude-code-mastery-project-starter-kit

    Production MongoDB replica-set operation: topology, durability, host tuning, and the container-specific gotchas Claude gets wrong.

    338 GitHub stars~1.6k tokensUpdated 3 mo ago
    Auto-check passed

Works with

Categories

Questions about Web Architecture

What does Web Architecture do?

Choosing how a web app renders and whether to use a framework, decided up front. Web Architecture is an agent skill from TheDecipherist/claude-code-mastery-project-starter-kit. Choosing how a web app renders and whether to use a framework, decided up front.

When should I use Web Architecture?

Web Architecture fits situations like: scaffolding a site; deciding how pages render (SSR; about to hand-build routing and state.

How do I install Web Architecture in Claude Code?

Run `npx skills add TheDecipherist/claude-code-mastery-project-starter-kit --skill web-architecture -a claude-code`. Or copy the skill folder (.claude/skills/web-architecture in TheDecipherist/claude-code-mastery-project-starter-kit) into .claude/skills/web-architecture in your project. Claude Code loads it when a task matches its description.

How do I install Web Architecture in Codex?

Run `npx skills add TheDecipherist/claude-code-mastery-project-starter-kit --skill web-architecture -a codex`. Or copy the skill folder (.claude/skills/web-architecture in TheDecipherist/claude-code-mastery-project-starter-kit) into .agents/skills/web-architecture in your project. Codex loads it when a task matches its description.

Can I use Web Architecture in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add TheDecipherist/claude-code-mastery-project-starter-kit --skill web-architecture -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/web-architecture, .gemini/skills/web-architecture, .github/skills/web-architecture and .opencode/skills/web-architecture in your project.

What does Web Architecture need to run?

SKILL.md names no scripts, command-line tools or credentials: Web Architecture is instructions for the agent only.

Does Web Architecture access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Web Architecture safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Web Architecture use?

Web Architecture is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Web Architecture use?

About 1.1k tokens (SKILL.md is roughly 4.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Web Architecture?

Skills that share tags, products or a category with Web Architecture: Ponytail (DavidObando/gsharp, 565 stars), Unslop Code (JCarterJohnson/vibecoded-design-tells, 511 stars), DRY Refactoring With jscpd (kucherenko/jscpd, 6.4k stars) and Ponytail (TanStack/ai, 3.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Web Architecture?

TheDecipherist (a GitHub user) maintains it in TheDecipherist/claude-code-mastery-project-starter-kit, which has 338 GitHub stars. The repository holds 24 skills in this directory. The repository was last updated on June 29, 2026.

Source: TheDecipherist/claude-code-mastery-project-starter-kit on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.