Effective Agent by Sebastian Software View on GitHub

The skill in practice

Effective Web

Make the whole browser experience work.

A good interface needs more than a polished first screen. Effective Web connects visual design, implementation, accessibility, performance, and verification, so the result holds up when someone uses a keyboard, opens it on a phone, or encounters an error.

The range

What it covers

Design and redesign
Design direction, critique, hierarchy, responsive layout, typography, color, and modernization that preserves existing brand and behavior.
Components and flows
Navigation, forms, tables, dialogs, authentication, and clear loading, empty, error, and recovery states.
Accessibility and localization
Semantic HTML, keyboard and focus behavior, screen readers, reduced motion, internationalization, RTL, and text expansion.
React and CSS
Rendering boundaries, component APIs, maintainable CSS architecture, browser support, and frontend test strategy.
Discovery, speed, and output
SEO, structured data, AI search visibility, Core Web Vitals, resource loading, SVG, motion, and HTML/CSS print.
References and compliance
Turn supplied references into a specification, check originality and asset provenance, and scope jurisdiction-aware web disclosures and consent.

From request to result

How it works

  1. Read the experience

    Identify the user task, the existing design language, and the behavior that must survive a change.

  2. Work across boundaries

    Choose the relevant guidance and implement the experience, including its responsive and interaction states.

  3. Verify in the browser

    Check the affected layouts, keyboard paths, accessibility, loading cost, and project quality gates.

The result: A browser experience that fits the product and has been checked in the states that matter.

Ask in your own words

Try a real task.

Give the agent the relevant files, source material, and constraints. Start with an outcome like one of these:

  • Audit this dashboard across hierarchy, accessibility, responsive behavior, and loading cost, then fix the highest-impact problems.

  • Build this multi-step form in React with clear validation, resilient loading and error states, and a component API we can maintain.

  • Turn this HTML report into reliable paged-media output with print typography and locale-aware page rules.

Choose the right discipline

When to use it

Use this skill when the deliverable changes, reviews, or verifies a browser experience: a marketing site, content page, web app, dashboard, component, or printable HTML document. General web research alone does not trigger it. Product discovery, backend architecture, and editorial writing belong to the related disciplines. Compliance guidance helps scope the work; it does not replace jurisdiction-specific legal advice.

For the complete workflow and routing rules, read the agent instructions on GitHub .

Add this discipline

Install Effective Web

With Node.js installed, run this command for an agent that supports Agent Skills:

npx skills add sebastian-software/effective-agent --skill effective-web

Then describe your task in the agent. This skill works on its own; add another when the work crosses disciplines.

For managed installations, pinned selections, and multiple agent targets, see all installation options or the DALO setup guide.