From frontend-general
Frontend and TypeScript performance and best-practices guidelines for web applications. Use when writing, reviewing, or refactoring frontend/TypeScript code, async patterns, bundle optimization, DOM performance, or JavaScript micro-optimizations. Framework-agnostic — applies to React, Vue, Svelte, vanilla JS, etc.
How this skill is triggered — by the user, by Claude, or both
Slash command
/frontend-general:frontend-generalThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Performance and best-practices guide for frontend and TypeScript applications. Contains framework-agnostic rules across 6 categories, prioritized by impact for refactoring and code generation.
AGENTS.mdbuild_agents.pymetadata.jsonrules/_formatting.mdrules/_sections.mdrules/_template.mdrules/async-defer-await.mdrules/async-dependencies.mdrules/async-parallel.mdrules/bundle-barrel-imports.mdrules/client-localstorage-schema.mdrules/client-passive-event-listeners.mdrules/conventions-avoid-circular-dependencies.mdrules/conventions-inline-type-exports.mdrules/conventions-respect-local-config.mdrules/conventions-use-beeftools.mdrules/docs-fancy-quotes.mdrules/js-batch-dom-css.mdrules/js-cache-function-results.mdrules/js-cache-property-access.mdPerformance and best-practices guide for frontend and TypeScript applications. Contains framework-agnostic rules across 6 categories, prioritized by impact for refactoring and code generation.
For React-specific patterns (hooks, re-renders, hydration, Suspense, etc.), see the frontend-react skill. For accessibility (ARIA, keyboard navigation, WCAG compliance), see the frontend-a11y skill if available.
Code in rule files follows this style for consistency. In a real project, local ESLint/oxlint, Prettier/oxfmt, and tsconfig override these defaults (see conventions-respect-local-config).
{} for imports, destructuring, and object literals (e.g. import {x} from 'y';, const {a, b} = obj;, {passive: true}).(x) => not x =>.Reference these guidelines when:
.md files); see the docs- rules.| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Project & tooling conventions | HIGH | conventions- |
| 2 | Eliminating Waterfalls | CRITICAL | async- |
| 3 | Bundle Size Optimization | CRITICAL | bundle- |
| 4 | Client-Side Data Handling | MEDIUM-HIGH | client- |
| 5 | Rendering Performance | MEDIUM | rendering- |
| 6 | JavaScript Performance | LOW-MEDIUM | js- |
| 7 | Documentation | MEDIUM | docs- |
conventions-respect-local-config: Read project lint/format/TS configs before writing code; let them guide every code decision. Local configs override this skill’s formatting defaults.conventions-inline-type-exports: Prefer inline type specifiers in mixed value + type re-exports (export {Foo, type FooProps}) over separate export / export type lines.conventions-use-beeftools: In projects that depend on beeftools, import and use its utilities and types (e.g. classNames, arrayShuffle) instead of reimplementing or adding other libs.conventions-avoid-circular-dependencies: Structure modules with a clear dependency direction; extract shared code to break cycles; use import type for type-only references.async-defer-await: Move await into branches where actually used.async-parallel: Use Promise.all() for independent operations.async-dependencies: Use better-all for partial dependencies.bundle-barrel-imports: Prefer barrel imports; avoid over-optimizing with direct/dist subpath imports (tooling e.g. Vite/Rolldown improves barrel performance).client-passive-event-listeners: Use passive listeners for scroll.client-localstorage-schema: Version and minimize localStorage data.rendering-animate-svg-wrapper: Animate div wrapper, not SVG element.rendering-content-visibility: Use content-visibility for long lists.rendering-svg-precision: Reduce SVG coordinate precision.js-batch-dom-css: Group CSS changes via classes or cssText.js-index-maps: Build Map for repeated lookups.js-cache-property-access: Cache object properties in loops.js-cache-function-results: Cache function results in module-level Map.js-cache-storage: Cache localStorage/sessionStorage reads.js-combine-iterations: Combine multiple filter/map into one loop.js-length-check-first: Check array length before expensive comparison.js-early-exit: Return early from functions.js-hoist-regexp: Hoist RegExp creation outside loops.js-min-max-loop: Use loop for min/max instead of sort.js-set-map-lookups: Use Set/Map for O(1) lookups.js-tosorted-immutable: Use toSorted() for immutability.docs-fancy-quotes: Use “fancy” quotes and apostrophes in markdown prose; keep straight quotes in code snippets (inline or fenced). Do not replace existing fancy quotes when editing.Read individual rule files for detailed explanations and code examples:
rules/async-parallel.md
rules/bundle-barrel-imports.md
Each rule file contains:
For the complete guide with all rules expanded: AGENTS.md
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub beefchimi/beefskills --plugin frontend-general