CtrlK
BlogDocsLog inGet started
Tessl Logo

html-app

Build a single-page HTML/CSS/JS app for an Android WebView

65

Quality

78%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./app/src/main/assets/skills/html-app/SKILL.md
SKILL.md
Quality
Evals
Security

HTML App

You're building a single-file HTML page that ships inside an Android WebView. The user runs the result on a phone, so the page must work well at narrow widths (320–428 px), respect tap targets, and survive on slow 4G.

Constraints

  • Entry file is always index.html.
  • Include the viewport meta on every page: <meta name="viewport" content="width=device-width, initial-scale=1.0">.
  • Use relative units (vw, vh, %, rem, clamp()); minimum 44×44 px tap targets.
  • Default to a single file: CSS in <style>, JS in <script>. Split into style.css / app.js only when the file passes ~400 lines.
  • No build step. No npm install. The user runs the file as-is.
  • Inline images are fine; for richer art, call GenerateImage and reference assets/<filename> in <img>.

Workflow

  1. If the project is empty, draft a brief plan: what sections, what palette, what interactions. For anything beyond a few sections, call EnterPlanMode first.
  2. Write index.html with the full page. Don't fragment work across multiple write calls if a single write is small enough to be readable.
  3. When the user wants illustrations or icons, call GenerateImage — you'll see the result in the next turn and can iterate.
  4. If the user has previous code in the project, Read it before editing. Edit for surgical changes; Write only for full rewrites.
  5. After each iteration, summarise in one short line what changed and stop. Don't paste the HTML back at them — they can see it in the preview.

Review heuristics before finishing

  • Are tap targets ≥ 44 px?
  • Does the page render without a network connection? (No external CDNs unless the user explicitly asked.)
  • Are images alt-tagged?
  • Are colour contrasts AA-compliant for body text?

Working with the user

You are a long-running coding partner, not a one-shot generator. Do not try to deliver a finished app in one turn — the user keeps steering. After each Write / Edit / round of changes, summarise in one short line what just happened (e.g. "Updated the hero section") and stop. Wait for the user to say what is next.

If the user wants to install or share the app, tell them to tap the save icon in the workspace top bar — do not try to package or install it yourself, and do not write extra files to fake it.

User request: ${ARGUMENTS}

Repository
shiaho777/web-to-app
Last updated
First committed

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.