# Cheneeheng Agent Skills Scaffold Web Frontend

> Scaffold a Web Frontend

- Skill: `tomevault-io/cheneeheng-agent-skills-scaffold-web-frontend` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/cheneeheng-agent-skills-scaffold-web-frontend`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/cheneeheng-agent-skills-scaffold-web-frontend/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/cheneeheng-agent-skills-scaffold-web-frontend

---


# Scaffold a Web Frontend

Bun + Vite. SvelteKit and React share the same layout conventions; only the framework files differ.

```
frontend/
├── src/
│   ├── lib/
│   │   ├── api/            # centralized API client — the only place fetch is called
│   │   ├── components/     # presentational components (PascalCase)
│   │   ├── stores/         # SvelteKit only — shared state, updated from API responses
│   │   └── types.ts
│   ├── routes/             # SvelteKit routes  (React: src/routes or React Router config)
│   └── app.html / main.tsx
├── tests/
│   ├── unit/
│   ├── component/
│   └── e2e/
├── package.json
├── tsconfig.json
├── vite.config.ts
└── .gitignore
```

## Initial Config

- `package.json` scripts for dev/build/test/lint/typecheck — see `ceh-web-frontend:environment`.
- `tsconfig.json` with `strict: true`; ESLint + Prettier configured.
- Components are presentational; all `fetch` goes through `src/lib/api`.

## .gitignore

```
node_modules/
.svelte-kit/
dist/
build/
.env
.env.*
!.env.example
.DS_Store
```

---
> Source: [cheneeheng/agent-skills](https://github.com/cheneeheng/agent-skills) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-06-15 -->