Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →HTML, CSS, and JavaScript craft guidelines from bendc/frontend-guidelines — semantics, a11y basics, selector discipline, motion-friendly CSS, and readable JS. Use for markup review, static HTML/CSS, email HTML, or general front-end hygiene; pair with repo frontend rules and TypeScript lint policy.
.claude/skills/asymmetric-al-bendc-frontend-guidelines/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-16 | ✗→✓ | ▲ Improved | 20% | 0% |
| case-07 | ✓→✗ | ▼ Worse | 96% | 0% |
| case-01 | ✓→✓ | ＝ Same ✓ | 21% | 0% |
| case-02 | ✓→✓ | ＝ Same ✓ | 123% | 0% |
| case-03 | ✓→✓ | ＝ Same ✓ | 50% | 0% |
Use this skill when the task benefits from foundational HTML, CSS, and vanilla JS craft guidance from the vendored bendc/frontend-guidelines checklist, including:
lang, charset, and meaningful elements (main, article, time, etc.)alt text, real links and buttons, not relying on color alone, labelling controls!important, inheritance, shorthand, flow and layout (flex/grid over absolute positioning when appropriate)opacity / transform for animation; avoid animating layout-heavy properties (aligns with repo motion rules)Also load docs/ai/rules/frontend.md for any apps/* or packages/ui work in this monorepo.
docs/ai/skills/nextjs-app-router/SKILL.md and framework docs.@asym/ui primitives — the upstream doc is not Tailwind-specific; follow docs/ai/rules/frontend.md first.The full text of the upstream guide lives in references/readme-original.md. When that reference conflicts with the Precedence table below, follow the table.
| Topic | Authoritative in this repo | | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | | Tailwind, Maia/Zinc tokens, cn(), no arbitrary hex in components | docs/ai/rules/frontend.md | | Motion timing, tokens, reduced motion, transition-all ban, route view transitions | docs/ai/rules/frontend.md, docs/ai/skills/emil-design-engineering/SKILL.md, docs/ai/skills/anim/SKILL.md | | General JavaScript / TypeScript code shape, control flow, helper extraction | Root AGENTS.md code style — prefer explicit, straightforward code over upstream terseness, loop avoidance, recursion, or shorthand | | TypeScript types, strict, equality (===), linted patterns | ESLint / TS config and existing code style — do not adopt upstream examples that rely on loose equality or patterns that fail lint here | | React component structure, Server Components, hooks | Next.js docs and docs/ai/skills/react-component-dev/SKILL.md |
Use the bendc guide as a second opinion on semantics, DOM clarity, CSS discipline, and readable JS. Do not copy upstream JavaScript advice about terseness, avoiding loops, recursion, composition, or shorthand unless it improves clarity under this repo's AGENTS.md conventions.
references/readme-original.md (or skim the sections you need: HTML, CSS, JavaScript).docs/ai/rules/frontend.md and nearby components.references/readme-original.md or the live upstream README.AGENTS.md code style, and TypeScript lint are satisfied.docs/ai/skills/bendc-frontend-guidelines/, ran bun run skills:sync and bun run skills:verify before committing.docs/ai/rules/frontend.mddocs/ai/skills/emil-design-engineering/SKILL.md, docs/ai/skills/anim/SKILL.mddocs/ai/skills/react-component-dev/SKILL.mdreferences/upstream.md| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-01 | pass→pass | 9,266 | 5,908 | -36% | 1 | 1 | 0% | 1,695 | 2,046 | +21% | 0 | 0 | — |
case-02 | pass→pass | 5,141 | 4,261 | -17% | 1 | 1 | 0% | 763 | 1,698 | +123% | 0 | 0 | — |
case-03 | pass→pass | 7,316 | 4,990 | -32% | 1 | 1 | 0% | 1,314 | 1,965 | +50% | 0 | 0 | — |
case-04 | pass→pass | 9,940 | 6,735 | -32% | 1 | 1 | 0% | 1,608 | 2,181 | +36% | 0 | 0 | — |
case-05 | pass→pass | 2,493 | 4,744 | +90% | 1 | 1 | 0% | 385 | 1,823 | +374% | 0 | 0 | — |
case-06 | pass→pass | 13,646 | 7,273 | -47% | 1 | 1 | 0% | 2,073 | 2,248 | +8% | 0 | 0 | — |
case-07 | pass→fail | 5,203 | 3,687 | -29% | 1 | 1 | 0% | 841 | 1,645 | +96% | 0 | 0 | — |
case-08 | pass→pass | 10,379 | 11,668 | +12% | 1 | 1 | 0% | 2,083 | 3,254 | +56% | 0 | 0 | — |
case-09 | pass→pass | 9,744 | 6,236 | -36% | 1 | 1 | 0% | 1,682 | 2,171 | +29% | 0 | 0 | — |
case-10 | pass→pass | 7,589 | 4,640 | -39% | 1 | 1 | 0% | 1,170 | 1,745 | +49% | 0 | 0 | — |
case-11 | pass→pass | 7,499 | 4,581 | -39% | 1 | 1 | 0% | 1,285 | 1,864 | +45% | 0 | 0 | — |
case-12 | pass→pass | 4,596 | 3,819 | -17% | 1 | 1 | 0% | 737 | 1,658 | +125% | 0 | 0 | — |
case-13 | pass→pass | 9,572 | 5,185 | -46% | 1 | 1 | 0% | 1,584 | 1,904 | +20% | 0 | 0 | — |
case-14 | pass→pass | 5,930 | 5,621 | -5% | 1 | 1 | 0% | 1,025 | 1,996 | +95% | 0 | 0 | — |
case-15 | pass→pass | 5,105 | 4,052 | -21% | 1 | 1 | 0% | 842 | 1,796 | +113% | 0 | 0 | — |
case-16 | fail→pass | 10,300 | 6,259 | -39% | 1 | 1 | 0% | 1,830 | 2,193 | +20% | 0 | 0 | — |
case-17 | fail→fail | 9,855 | 7,736 | -22% | 1 | 1 | 0% | 1,498 | 2,359 | +57% | 0 | 0 | — |
case-18 | pass→pass | 4,519 | 4,943 | +9% | 1 | 1 | 0% | 753 | 1,912 | +154% | 0 | 0 | — |
case-19 | pass→pass | 4,553 | 3,985 | -12% | 1 | 1 | 0% | 736 | 1,695 | +130% | 0 | 0 | — |
case-20 | pass→pass | 4,797 | 10,335 | +115% | 1 | 1 | 0% | 875 | 3,181 | +264% | 0 | 0 | — |
case-21 | pass→pass | 3,250 | 2,702 | -17% | 1 | 1 | 0% | 473 | 1,513 | +220% | 0 | 0 | — |
case-22 | pass→pass | 29,728 | 6,821 | -77% | 1 | 1 | 0% | 5,399 | 2,190 | -59% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of 0 percentage points is the difference between those two pass rates over the 22 comparable cases. 1 case got worse with the skill loaded, and it is included in that figure.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.