// 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.
Pointer to the canonical agent instruction and skill system for this monorepo
Deploy applications and websites to Vercel. Use when the user requests deployment actions like "deploy my app", "deploy and give me the link", "push this live", or "create a preview deployment".
Disciplined diagnosis loop for hard bugs and performance regressions. Reproduce → minimise → hypothesise → instrument → fix → regression-test. Use when user says "diagnose this" / "debug this", reports a bug, says something is broken/throwing/failing, or describes a performance regression.
Alias for ubiquitous-language (DDD glossary / domain terminology). See ubiquitous-language for full workflow.
Design engineering principles and patterns for building polished, accessible web interfaces. Use this skill when building UI components, reviewing frontend code, implementing forms, handling touch interactions, optimizing performance, or creating marketing pages. Triggers on: design engineering, UI polish, input fields, form validation, button states, touch devices, mobile UX, accessibility, a11y, keyboard navigation, aria labels, font rendering, typography, layout shift, z-index, animations, transitions, easing, hover effects, tap targets, iOS Safari, prefers-reduced-motion, marketing pages, landing pages, dark mode, theme switching, scrollbars, gradients, shadows, virtualization, preloading.
Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.
| name | bendc-frontend-guidelines |
| description | 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. |
| metadata | {"owner":"core","last_updated":"2026-05-15T00:00:00.000Z","status":"active","version":"1.0.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