Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →asymmetric-al/bendc-frontend-guidelines
HTML, CSS, and JavaScript craft guidelines from bendc/frontend-guidelines — semantics, a11y basics, selector discipline, motion-friendly CSS, and readable JS.
Passed 22 of 22 test cases with the skill, and 17 of 22 without it.
and 3 more in the full report
5 fixed17 passed either way0 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 5 test cases the skill fixed. Same model, same prompt, with and without the skill.
We just updated a guideline documentation file inside `docs/ai/skills/bendc-frontend-guidelines/` and want to validate changes locally before committing. What specific package manager execution script syncs the skill files?
| Checked | Without skill | With skill |
|---|---|---|
| bun run skills:sync | Missed | Passed |
| runs the verification script after syncing | Missed | Passed |
The instructions your model reads when the skill loads.
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 | ESLint, TypeScript configuration, formatter output, and nearby source patterns — 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.test cases passed, vs 17 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.