agentsclimarketplace

Web frontend

Skill JoshBuildApp/launchkit/skills/web-frontend

LaunchKit — build & launch a complete website with Claude Code. A bundle of skills (planning, design, UI/UX, frontend, SEO, accessibility, legal) that works worldwide with first-class Israel support (Hebrew/RTL, IS 5568, Israeli privacy law).

Install
npx -y skills add JoshBuildApp/launchkit --skill web-frontend

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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.

SKILL.md

3.7 KB, as published. Nobody here has run it

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

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.