effective-weblisted
Diagnose, design, build, review, and improve user-facing web experiences: marketing sites, content pages, landing pages, web apps, dashboards, and React components. Covers UI/UX direction, layout, typography, color, components, forms, tables, accessibility, motion, internationalization (i18n) implementation, interface copy, loading and error states, auth UX, CSS architecture, frontend SEO and AI search, AI-assisted interface design, browser performance, frontend-only surprising behavior, frontend testing, React architecture and component APIs, SVG graphics (icons, paths, animation, textures), print stylesheets, paged media, and web-to-print output. Not for: backend-only work, infrastructure or deployment, general-purpose writing, print production unrelated to HTML and CSS, or locale-specific punctuation, quotation, spacing, and language-level typographic rules (locale-typography skill).
sebastian-software/skills.sebastian-software.com · ★ 0 · Web & Frontend · score 70
Install: claude install-skill sebastian-software/skills.sebastian-software.com
# Effective Web
Treat the web experience as one system. Route each request to the smallest
relevant guidance set, then check the result across design, implementation,
accessibility, performance, and verification boundaries.
## Workflow
1. Inspect the product goal, primary users and actions, accepted ADRs, existing
stack, local conventions, browser support, and available evidence.
2. Select one primary route from the table. Read that route before acting.
3. Load only the detailed references required by the route and current problem.
Add another route only when the work genuinely crosses concerns.
4. Implement or review against the existing product language and architecture.
Prefer measured evidence and repository conventions over generic defaults.
5. Verify the affected states, responsive behavior, keyboard and screen-reader
use, loading cost, and relevant project checks before declaring the work done.
For a broad redesign or cross-cutting review, start with Design and Review, then
add the focused routes revealed by the review. For a narrow request, skip the
broad design route and load the matching focused route directly.
## Route by Intent
| User intent | Read |
| --- | --- |
| Plan, critique, redesign, polish, or quality-gate a whole experience | [Design and Review](references/route-design.md) |
| Modernize an existing site or app without losing brand, content, routes, analytics, or accessibility contracts | [Design and Review](references/route-design.md) |