Run any Skill in Manus with one click

design-html-first-web-uis

Stars5

Forks0

UpdatedJuly 14, 2026 at 04:30

Use when designing or implementing HTML-first web interfaces with native browser features, progressive enhancement, server-rendered updates, and minimal JavaScript. Covers forms, dialogs, popovers, disclosure, URL state, and replacing SPA-style interactions. Excludes visual direction, framework architecture, games, and browser debugging. Produces repo-specific code or a plan with accessibility, fallbacks, and validation.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

btfranklin

btfranklin/skills

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

File Explorer

6 files

SKILL.md

readonly

name

design-html-first-web-uis

description

Design HTML-First Web UIs

Workflow

Inspect the existing stack, templates, routes, form handling, JavaScript, CSS, browser targets, and repository guidance. Preserve established conventions.
Describe the interaction as links, forms, navigation, disclosure, selection, or transient UI before choosing an implementation.
Select the smallest native primitive that preserves server authority and meaningful URLs. Use JavaScript only for enhancement that HTML and CSS cannot express adequately.
Define the baseline behavior without enhancement, then add optional native APIs, server-driven partial updates, or small scripts.
Implement the narrowest complete change. Keep state in URLs, form controls, or server responses when practical; avoid parallel client-side state.
Validate keyboard use, focus, accessible names, error handling, history/navigation, no-JavaScript behavior, and relevant browser support.

Decisions

Prefer links for navigation and forms for state-changing requests.
Prefer details/summary, dialog, and popover behavior when their semantics match the interaction; do not force a native primitive onto a mismatched design.
Use server-rendered pages or fragments for authoritative application state. Keep partial-update endpoints usable and understandable outside the enhancement layer.
Preserve normal HTTP behavior: validation errors, redirects, CSRF protection, idempotency expectations, and back/forward navigation.
Treat animations and view transitions as optional presentation. Respect reduced-motion preferences and never make them necessary for task completion.

Freshness

When browser support, API syntax, accessibility behavior, or framework integration affects the result, verify it against current MDN, WHATWG, and relevant framework documentation. Record the checked source and date in plans or reports; do not present a remembered support table as current.

Resource

Read references/html-first-patterns.md when selecting a native primitive, designing progressive enhancement, or preparing the validation matrix. Load it only when those details are needed.

Output

Return a repo-specific patch or plan that names the semantic baseline, enhancement layer, required JavaScript, fallback behavior, accessibility decisions, and verification performed. Ask a question only when an unresolved product choice would materially change the implementation.

More from this repository

same repository

design-ui-style-guide

btfranklin/skills

Preferred first-step workflow for creating a UI from whole cloth. Use when asked to create, design, build, prototype, mock up, or redesign a website, web app, dashboard, landing page, product screen, internal tool, or application UI without an approved visual direction. Generates exactly three image concepts, stops for selection or iteration, then converts the approved direction into a reusable HTML/CSS style guide and representative demo. Use before frontend implementation unless the user supplies an existing design, requests a narrow edit, or explicitly skips visual exploration.

2026-07-185

django-pytest-performance-suite

btfranklin/skills

Use when building Django performance regression coverage with pytest-benchmark for ORM, views, schema, transactions, or backend behavior. Match the project's production database engine and topology; never prescribe one. Excludes one-off profiling, browser rendering, APM, and non-Django services. Return deterministic scenarios, correctness and query/operation guards, calibrated budgets, reports, and baseline maintenance.

2026-07-145

llms-txt-authoring

btfranklin/skills

Use when creating, updating, validating, or reviewing a site-root `llms.txt` file as a concise map to canonical, LLM-friendly content. Trigger only when `llms.txt` is explicitly in scope, not for robots.txt, sitemaps, SEO metadata, READMEs, OpenAPI documentation, or AGENTS.md. Return a proposal-aligned file or evidence-backed review with useful links and validation notes.

2026-07-145

openai-django-webhooks

btfranklin/skills

Use when building, wiring, or debugging asynchronous OpenAI Responses API workflows in Django: background requests, signed webhooks, response correlation, persistence, and HTMX status polling. Do not use for generic OpenAI calls, non-Django consumers, unrelated webhook providers, or frontend-only polling. Return scoped Django code or a plan covering security, lifecycle, failures, and validation.

2026-07-145

django-6-upgrade-guide

btfranklin/skills

Use when planning, auditing, or executing a Django 5.x to Django 6 upgrade. Covers runtime and dependency compatibility, deprecations, settings, databases, migrations, tests, deployment, and feature adoption. Excludes generic Django work, earlier upgrades, frontend styling, and unrelated maintenance. Produces a repo-grounded checklist, risk report, or patch with verified requirements, staged validation, and rollback guidance.

2026-07-145

integrate-daisyui-into-django

btfranklin/skills

Use when integrating or refactoring Tailwind CSS and DaisyUI in a Django application. Covers the asset pipeline, template and component boundaries, theme tokens, optional theme switching, migration, and verification. Excludes isolated template edits, non-Django work, visual direction, and backend-only tasks. Produces repo-specific code or a plan that preserves existing conventions and identifies ownership and checks.

2026-07-145

name

design-html-first-web-uis

description

Design HTML-First Web UIs

Workflow

Inspect the existing stack, templates, routes, form handling, JavaScript, CSS, browser targets, and repository guidance. Preserve established conventions.
Describe the interaction as links, forms, navigation, disclosure, selection, or transient UI before choosing an implementation.
Select the smallest native primitive that preserves server authority and meaningful URLs. Use JavaScript only for enhancement that HTML and CSS cannot express adequately.
Define the baseline behavior without enhancement, then add optional native APIs, server-driven partial updates, or small scripts.
Implement the narrowest complete change. Keep state in URLs, form controls, or server responses when practical; avoid parallel client-side state.
Validate keyboard use, focus, accessible names, error handling, history/navigation, no-JavaScript behavior, and relevant browser support.

Decisions

Prefer links for navigation and forms for state-changing requests.
Prefer details/summary, dialog, and popover behavior when their semantics match the interaction; do not force a native primitive onto a mismatched design.
Use server-rendered pages or fragments for authoritative application state. Keep partial-update endpoints usable and understandable outside the enhancement layer.
Preserve normal HTTP behavior: validation errors, redirects, CSRF protection, idempotency expectations, and back/forward navigation.
Treat animations and view transitions as optional presentation. Respect reduced-motion preferences and never make them necessary for task completion.

Freshness

Resource

Read references/html-first-patterns.md when selecting a native primitive, designing progressive enhancement, or preparing the validation matrix. Load it only when those details are needed.