SuperAPI AI Directory

effective-web

Frontend & websites

View repository

Updated 10-16 05:51

About this skill

Effective Web

Choose the route for the browser outcome and load only the references needed for the affected behavior. Use Design Planning for a new direction and Design Review and Modernization for a broad redesign; add focused routes as needed.

Work within the product language, supported browsers, and existing contracts. Preserve accessibility, privacy, authentication, and user data. Add states, fallbacks, fixtures, and tests for reachable behavior with meaningful user consequences; avoid speculative combinations.

Verify what the change can affect. Use browser evidence when rendering or interaction matters, and reuse existing fixtures and checks where sufficient. Complete authorized implementation and verification before handing back the result; report material evidence gaps.

Route by Intent

User intent Read
Plan a new experience or AI-assisted feature: register, hierarchy, direction, and interaction model Design Planning
Critique, redesign, modernize, polish, or quality-gate an existing experience Design Review and Modernization
Fix hierarchy, grids, spacing, responsive layout, or safe areas Layout and Spacing
Improve type hierarchy, measure, rhythm, fallbacks, or font loading Typography
Build palettes, semantic tokens, contrast, dark mode, or themes Color and Theming
Design buttons, navigation, dialogs, menus, or reusable primitives Component Primitives
Build field layouts, validation, completion, or multi-step forms Forms UX
Design dense data, sorting, filtering, row actions, or responsive tables Data Tables
Review HTML semantics, accessible names, ARIA, focus, or keyboard use Accessibility and HTML
Add transitions, scrolling behavior, feedback, or reduced-motion support Motion and Interaction
Support localization, RTL, text expansion, or locale-aware formatting Internationalization UX
Write labels, microcopy, empty states, errors, or product language Interface Copy
Design loading, empty, success, failure, retry, or not-found states Error and Loading States
Build login, passkeys, recovery, sessions, permissions, or security UX Auth and Security UX
Organize cascade layers, tokens, scoping, browser support, or CSS tooling CSS Architecture
Improve metadata, structured data, crawlability, previews, or AI search Frontend SEO and AI Search
Choose unit, component, visual, browser, or E2E coverage and CI strategy Frontend Testing
Show what a branch or pull request changes on rendered pages with annotated before/after screenshots Change Screenshots
Diagnose Core Web Vitals, images, caching, resource loading, animation cost, memory growth, or perceived speed Web Performance
Decide React server/client boundaries, state placement, hydration, or rendering React Architecture
Design reusable React APIs, composition, state ownership, refs, or interop React Components
Build, style, animate, optimize, or make accessible SVG icons and illustrations SVG Graphics
Create SVG noise, grain, paper, clouds, organic surfaces, or filter effects SVG Textures
Build print stylesheets, paged media, printable documents, or web-to-print output Print Design
Turn a supplied website, screenshot, recording, prototype, or reference pack into an evidence-backed visual and interaction specification Reference Analysis
Compare produced work with its references for source overlap, distinctive combination, and asset provenance, and decide release risk Originality Review
Scope Impressum and operator disclosures, privacy and cookie notices, consent and tracking, or online-sales information across jurisdictions Web Legal Compliance

Routing Boundaries

  • effective-product: research, product direction, scope, interaction models, information architecture, decision-grade prototypes, release decisions, and durable design decisions recorded as ADRs.
  • effective-marketing: positioning, commercial page/campaign copy, funnel diagnosis, and experiment decisions. Build and verify the chosen variants here; interface labels, errors, and states stay here.
  • effective-writing: editorial articles and public prose, plus locale-level punctuation and formatting. Layout and localization UX stay here.
  • effective-engineering: non-frontend system/data contracts, Rust, shared-library TypeScript, focused non-frontend tests, and benchmark methodology.
  • effective-delivery: repository audits, ports, PR upkeep including publishing screenshots in a description, dependencies, technical documentation, and execution-only requests for established checks.

General browsing or research does not belong here merely because it uses a URL. Backend infrastructure, deployment, load testing, dedicated security audits, and non-web publishing need other expertise. Legal and originality work here supports implementation; it does not establish legal clearance.