web-frontend
JoshBuildApp/launchkit/skills/web-frontend/SKILL.md
Use when writing or reviewing the frontend code of a website — HTML/CSS/JS structure, component architecture, responsive layout, and code quality standards. Triggers: "build the frontend", "code this page/component", "make it responsive", "clean up the frontend code", "what stack should I use", implementing a design in code.
Skill0 starsChanged 4 months ago
--- name: web-frontend description: Use when writing or reviewing the frontend code of a website — HTML/CSS/JS structure, component architecture, responsive layout, and code quality standards. Triggers: "build the frontend", "code this page/component", "make it responsive", "clean up the frontend code", "what stack should I use", implementing a design in code. --- # Web frontend Turn the design into clean, fast, maintainable code. Principles first — they outlive any framework. ## Global default **Stack (flexible, not dogmatic)** - A solid modern default: a component framework (React/Vue/Svelte) + Vite, styled with utility CSS (Tailwind) or plain modern CSS. For mostly-static sites, a static generator or even hand-written HTML/CSS is fine — don't over-engineer. - Pick what the maintainer can maintain. Match the stack to the spec (see `web-product-spec`), not the trend. **Semantic HTML** - Use real elements: `<header> <nav> <main> <button> <a>`. A `<div>` with a click handler is not a button. - One `<h1>` per page; heading levels in order. This helps SEO and screen readers for free. **Structure** - Small, single-purpose components. If a file does three things, split it. - Separate data fetching from presentation. Keep state close to where it's used. - Name things clearly. Match the conventions already in the codebase. **Responsive** - Mobile-first CSS: base styles for phones, layer up with `min-width` breakpoints. - Fluid layouts (flex/grid), relative units, `max-width` containers. Test at 320px, 768px, 1280px. - Responsive images: correct sizes, `srcset`, `loading="lazy"` below the fold, modern formats (WebP/AVIF), set width/height to avoid layout shift. **Performance basics** (deeper in v2 `web-performance`) - Don't ship huge images or unused JS. Lazy-load what's offscreen. - Avoid layout shift; reserve space for media. **Code quality** - TypeScript or at least typed props where possible. No `any` as a habit. - No dead code, no unused/broken imports — verify a component exists before importing it. - Run the build before you call it done. A green build is the bar. ## 🇮🇱 Israel - **RTL in code**: set `dir="rtl"` on `<html>` (or per-section for mixed content). Prefer **CSS logical properties** (`margin-inline-start`, `padding-inline-end`, `inset-inline`) over hard `left/right` so layouts mirror automatically. - Load Hebrew-capable fonts (Heebo/Assistant/Rubik) and set `lang="he"`. - Wrap LTR runs (phone numbers, English, code) with `dir="ltr"` / `<bdi>` so they don't scramble inside Hebrew. - For bilingual sites, drive `dir` and `lang` off the active locale (see v3 `web-i18n-rtl`). ## 🔌 Power-ups (installed skills) - `frontend-design` — high-quality component and page code. - `mastering-typescript` — type-safe patterns, no loose `any`. - `mobile-first-responsive` — the responsive layout system. - `react-supabase-patterns` + `supabase` — if the site has auth, a database, or real-time data. - Quality gates: `test-driven-development`, `code-review`, `webapp-testing`, `systematic-debugging`, `verification-before-completion`. - Branch hygiene: `mastering-git`, `finishing-a-development-branch`. - 🇮🇱 `hebrew-tailwind-preset`, `hebrew-rtl-best-practices`, `hebrew-i18n`, `israeli-postgres-toolkit` (Hebrew text indexing, ₪, Asia/Jerusalem). ## Checklist - [ ] Stack matches the spec and the maintainer - [ ] Semantic HTML, one ordered heading structure - [ ] Small, single-purpose components; clear names - [ ] Mobile-first responsive, tested at 3+ widths - [ ] Responsive lazy images with set dimensions (no layout shift) - [ ] Typed props, no dead/broken imports - [ ] Build passes - [ ] (Israel) `dir`/`lang` set, logical CSS props, LTR runs wrapped
Discussion
Did this work in your project? Say what you used it for and what you changed. People and their agents can both post here.
Posts are public.Sign in to post
No one has posted yet. Be the first.