Senior Frontend
Ship SEO-critical marketing, docs, or blog sites with Astro-style islands, minimal JS, and Lighthouse-gated performance constraints.
Overview
Senior-frontend is an agent skill for the Build phase that applies an astro-or-static architecture profile for SEO-critical, read-heavy sites with islands hydration and minimal client JavaScript.
Install
npx skills add https://github.com/alirezarezvani/claude-skills --skill senior-frontendWhat is this skill?
- astro-or-static profile: content-first sites with near-zero client JS by default
- Framework options ranked: Astro, 11ty, Hugo, Next static export
- Explicit anti-recommendations: SPA marketing sites, React-on-every-page, third-party tag soup
- Stack covers MDX/headless CMS, edge forms, Plausible/Fathom analytics, Playwright + Lighthouse CI
- Constraints include SEO-dependent rendering, read/write ratio ≥100, team size 1–5
- read_write_ratio_min: 100
- team_size_max: 5
- framework_options_ranked: 4
Adoption & trust: 1k installs on skills.sh; 17.5k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your agent keeps proposing SPA or heavy React stacks for a marketing or docs site, wrecking SEO, LCP, and the read-heavy traffic pattern you actually have.
Who is it for?
One- to five-person teams shipping blogs, docs, pricing, or landing surfaces where SEO and Core Web Vitals are non-negotiable.
Skip if: Authenticated SaaS dashboards, write-heavy apps, or products that need a default client-side SPA with complex in-app state.
When should I use this skill?
Scaffolding or reviewing a content-first, SEO-dependent marketing, docs, or blog frontend before accepting SPA defaults.
What do I get? / Deliverables
You get stack choices, anti-patterns, and tooling guardrails aligned to static generation and measured performance—so implementation stays islands-first and Lighthouse-aware.
- Stack and anti-pattern decisions
- Testing and analytics recommendations aligned to the profile
Recommended Skills
Journey fit
Static and islands-first frontends are decided and implemented in the build phase when architecture choices lock CWV and SEO for years. Frontend subphase covers framework selection, hydration boundaries, image pipelines, and anti-patterns that dominate read-heavy sites.
How it compares
Architecture constraint profile for static/marketing frontends—not a component library generator or backend API skill.
Common Questions / FAQ
Who is senior-frontend for?
Solo and indie frontend builders choosing Astro, 11ty, Hugo, or static Next for content sites with agent-assisted scaffolding.
When should I use senior-frontend?
During Build frontend when picking frameworks, image pipelines, analytics, and test gates for a new marketing or documentation site.
Is senior-frontend safe to install?
Check the Security Audits panel on this Prism page; the skill is guidance-only JSON with no inherent shell or secret requirements.
SKILL.md
READMESKILL.md - Senior Frontend
{ "$schema": "https://json-schema.org/draft-07/schema#", "profile_name": "astro-or-static", "description": "Content-first marketing / docs / blog / pricing site. Heavy read, near-zero write. SEO-critical. Islands Architecture (Astro) or pure SSG (11ty, Hugo, Next.js static export). Every JS byte must justify itself.", "version": "1.0.0", "constraints": { "primary_device": ["mobile-4g", "desktop-fiber"], "rendering": "static-generation-with-island-hydration", "seo_dependent": true, "auth_walled_only": false, "team_size_min": 1, "team_size_max": 5, "read_write_ratio_min": 100 }, "stack": { "framework_options_ranked": ["astro", "11ty", "hugo", "next-static-export"], "language": "typescript-or-markdown-first", "styling": "tailwind-or-css-modules", "content": "mdx-in-repo or headless-cms (sanity, contentful, payload)", "client_js": "islands-only-default-zero", "image_pipeline": "framework-native (astro:assets, next/image, hugo image processing)", "forms": "edge-function-to-webhook or formspree", "analytics": "plausible-or-fathom-or-self-host-umami", "testing": "playwright-e2e + lighthouse-ci" }, "anti_recommendations": { "spa-for-marketing": "kill — SEO catastrophe in 2026 search/AI-search algorithms", "react-app-on-every-page": "kill — defeats Islands Architecture", "third-party-tag-soup": "kill — every script adds LCP + INP", "google-tag-manager-on-marketing": "warn — measure CWV regression before adding", "custom-cms-build": "kill — use headless CMS or MDX, not a build project", "next-app-router-for-static-marketing": "warn — RSC complexity tax with no payoff on near-zero-write surface" }, "success_thresholds": { "lcp_ms_mobile_4g_p75": 1200, "inp_ms_p75": 100, "cls_p75": 0.05, "ttfb_ms_p75": 250, "page_weight_kb_total_max": 250, "js_kb_per_page_gzip_max": 30, "lighthouse_perf_min": 95, "lighthouse_a11y_min": 95, "lighthouse_seo_min": 98, "lighthouse_best_practices_min": 95 }, "ci_gates": [ "lighthouse-ci-all-four-categories", "no-broken-links", "image-budget-per-page", "axe-a11y-checks" ], "canon_references": [ "Astro team, Islands Architecture (Eisenberg, 2021) — partial hydration", "Web Almanac (HTTP Archive, 2025) on marketing-site weight distribution", "Patrick Stox, JS and SEO (Ahrefs, 2023)", "Addy Osmani, Web Performance for the Modern Web (2024)", "Brad Frost, Atomic Design (2016) — content-first layering" ] } { "$schema": "https://json-schema.org/draft-07/schema#", "profile_name": "next-app-router", "description": "Next.js 14+ App Router with React Server Components default. Customer-facing SaaS, content-heavy with some personalization, SEO matters. Hybrid SSR/RSC/SSG per route.", "version": "1.0.0", "constraints": { "primary_device": ["mobile-4g", "desktop-fiber"], "rendering": "rsc-default", "seo_dependent": true, "auth_walled_only": false, "team_size_min": 3, "team_size_max": 50 }, "stack": { "framework": "next.js-14+", "language": "typescript", "styling": "tailwind-with-design-tokens", "component_library_options": ["shadcn-ui", "radix-primitives", "ark-ui"], "state_client": "zustand-or-jotai-for-client-state", "state_server": "rsc-with-server-actions", "data_fetching": "rsc-async-components + react-query-for-client-only", "forms": "react-hook-form + zod", "testing": "vitest + react-testing-library + playwright-e2e", "icons": "lucide-react", "fonts": "next-font-google-or-self-hosted" }, "anti_recommendations": { "use-client-everywhere": "kill — defeats the RSC value; reserve 'use client' for actual interactivity", "global-state-in-context-everywhere": "kill — props down + server state up; Context is for tree-scoped state only", "csr-only-on-seo-routes": "kill — RSC or SSR on routes that matter for SEO", "redux-without-jus