skills.rest
vmitsaras
vmitsarasCOMMUNITY
Explore all skills by this author →
GitHub

progressive-enhancement-planner

Plans progressively enhanced web features with baseline HTML, JavaScript layers, and failure recovery.

Updated Jul 7, 2026
Search Tags:#accessibility#javascript#resilience#semantic html#progressive enhancement#failure states#frontend planning
One-click install
npx skills add https://github.com/vmitsaras/Agent-Skills --skill progressive-enhancement-planner-vmitsaras
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: progressive-enhancement-planner
Source: https://github.com/vmitsaras/Agent-Skills/tree/main/skills/project-planning/progressive-enhancement-planner
Command: npx skills add https://github.com/vmitsaras/Agent-Skills --skill progressive-enhancement-planner-vmitsaras

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Web features often break when JavaScript fails to load, hydration stalls, or network requests fail, leaving users unable to complete essential tasks. This Skill turns a feature idea into an implementation-ready progressive enhancement plan that defines a working server-and-HTML baseline before layering JavaScript behavior. ## Core Features & Use Cases - Baseline HTML Contract: Defines semantic HTML, real URLs, native form submissions, server-rendered validation, and error responses that work without JavaScript. - Enhancement Boundary and Failure Matrix: Specifies what JavaScript adds, how activation is detected, and how each failure mode (blocked scripts, failed hydration, offline networks, unavailable third-party embeds) preserves user progress. - Layered Accessibility and Acceptance Tests: Produces accessibility requirements for both baseline and enhanced states plus acceptance tests proving the baseline before and after enhancement. - Use Case: A team building a checkout form asks how it should behave when JavaScript is blocked. The Skill outputs a plan with a native form submission baseline, enhanced inline validation behavior, a failure and recovery matrix, and a testable acceptance checklist. ## Quick Start Ask the agent to create a progressive enhancement plan for your feature, for example: plan how my search filter page should work with and without JavaScript.

Frequently Asked Questions about progressive-enhancement-planner

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I plan a progressive enhancement strategy for a web feature?▼

Start by defining the essential user outcome, then design a baseline using semantic HTML, real URLs, and native form submissions that work without JavaScript. Next, define exactly what JavaScript adds, how enhancement activates, and how each failure mode recovers while preserving user data.

How to make a form work when JavaScript is disabled or blocked?▼

Give the form a native submission path with a server endpoint that handles validation, errors, and success responses through ordinary page loads. JavaScript can then layer inline validation and reduced page loads on top without replacing the baseline contract.

Does progressive enhancement work with framework hydration like React?▼

Yes, but server-rendered markup should only be treated as interactive when its native semantics genuinely work before hydration completes. The plan should define behavior for delayed or failed hydration separately from fully loaded enhancement.

What failure states should a progressive enhancement plan cover?▼

Cover each failure independently: scripts blocked or erroring, failed hydration, unavailable browser APIs or dynamic imports, offline or timed-out networks, blocked third-party dependencies, and unavailable storage or authentication. Each needs visible feedback, a preserved baseline path, and data retention.

When should I not use a progressive enhancement planning approach?▼

Skip it when an approved plan already defines baseline and enhanced behavior and you only need implementation, when the product is a native app with no HTML experience, or when you only need a code-level accessibility audit of an existing feature.

Related Skills

Explore More Software Engineering Skills→
omeragaakbasomeragaakbas

job-stories

Create JTBD job stories with acceptance criteria from feature briefs.

Community
Intermediate
geobarteamgeobarteam

build-feature

Implement approved vertical-slice feature steps across .NET Blazor WebAssembly layers.

Community
Advanced
denish12denish12

ui_a11y_smoke_review

Identify UI accessibility gaps in focus, ARIA labeling, and state coverage against the UX spec.

Community
Intermediate
LerianStudioLerianStudio
205

pre-dev-feature-map

Map feature relationships, categories, domains, and user journeys from PRDs.

Official
Basic