skills.rest
yeaboi-ai
yeaboi-aiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

web-frontend

Enforces browser-surface conventions for Python-to-TypeScript web asset boundaries and wire contracts.

4|Updated Mar 17, 2026
Search Tags:#typescript#csp#vite#contract testing#web assets#wire protocol#python boundary
One-click install
npx skills add https://github.com/yeaboi-ai/yeaboi.ai --skill web-frontend-yeaboi-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-frontend
Source: https://github.com/yeaboi-ai/yeaboi.ai/tree/main/.claude/skills/web-frontend
Command: npx skills add https://github.com/yeaboi-ai/yeaboi.ai --skill web-frontend-yeaboi-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It prevents drift between a Python backend and a separately built TypeScript front end by codifying the asset boundary, CSP rules, payload conventions, and generated contract artifacts that keep both repos in sync. ## Core Features & Use Cases - Asset boundary rules: Defines how Python reaches Vite-built bundles only through web/assets.py, brand.py, and security.py, with no handler writing its own headers or markup. - Contract generation workflow: Documents contracts/web/ artifacts (enums.json, ui.json, fixtures) regenerated via make web-types and vendored by the front-end repo. - Wire guards: Explains the two-direction test guards (wire shapes and request keys) that catch dropped response fields and silent request-key failures. - Use Case: When editing an exporter or share/board surface, follow this Skill to keep payloads markup-free, CSP-compliant, and consistent with the front-end repo's type checks. ## Quick Start Ask the assistant to review changes to src/yeaboi/web/ or an exporter against the web-frontend conventions before committing.

Frequently Asked Questions about web-frontend

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

FAQPage Schema
How do I keep a Python backend and TypeScript front end in sync?▼

Generate shared contract artifacts such as enums.json and ui.json from the Python side, vendor them into the front-end repo by commit sha, and run wire-shape tests in both repos so a dropped field fails typecheck on either side.

How do I serve self-contained HTML bundles under a strict CSP?▼

Build classic IIFE bundles with no CDN links, no eval, and no dynamic imports, then serve them with a CSP like connect-src 'none' for inert exports. Centralize all headers in one security module so no request handler writes its own.

Can a static HTML export opened over file:// make network requests?▼

No, not when served with a CSP containing connect-src 'none', which physically blocks requests from written files. Editable exports use a separate policy allowing connect-src 'self' only when a server is behind them.

Why does a front-end request parameter silently fail against a Python API?▼

Silent failures happen when the server reads keys via payload.get with a default, so a renamed or misspelled request key just returns the default. Guard this by parsing request bodies in tests and requiring every key to match a handler-read name.

Should server payloads include presentation values like colors?▼

No, payloads should carry words or numbers such as status labels, never colors or markup, with components mapping them to styles. A narrow exception is per-column directional thresholds sent as a gated tone word.

Related Skills

Explore More Software Engineering Skills→
manutejmanutej

elm-development

Enforces TEA architecture and strong typing for Elm front-ends with JavaScript interop support.

Community
Intermediate
mferris77mferris77

workspace

Coordinate multi-repository campaigns with wave-based execution and cross-repo contract verification.

Community
Advanced
JDenn0514JDenn0514
1

testing-r-packages

Develop R package tests using testthat 3+ with structured layouts and fixtures.

Community
Intermediate
Kirankumar2604Kirankumar2604

pnpm-workspace

Standardize TypeScript monorepos with pnpm workspaces and strict project references.

Community
Advanced