Frontend Standards

Enforce JavaScript, CSS, accessibility, and build pipeline coding standards.

24|4|Updated Dec 11, 2025

Search Tags:#best practices #accessibility #CSS #coding standards #JavaScript

Ready to run

npx skills add https://github.com/systempromptio/systemprompt-template --skill frontend-standards-systempromptio

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Frontend Standards
Source: https://github.com/systempromptio/systemprompt-template/tree/main/storage/files/plugins/systemprompt-dev/skills/dev-frontend-standards
Command: npx skills add https://github.com/systempromptio/systemprompt-template --skill frontend-standards-systempromptio

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill unit addresses the challenges of maintaining consistency and best practices in frontend development by providing a set of coding standards and guidelines.

Core Features & Use Cases

Idiomatic JavaScript: Promotes clean, modern JavaScript practices for better performance and maintainability.
Limitations: Enforces code length and complexity limits to improve readability and prevent over-engineering.
Forbidden Constructs: Eliminates common anti-patterns and outdated syntax to ensure code quality.
Mandatory Patterns: Enforces consistent coding patterns for modularity and reusability.
Accessibility: Ensures that interactive elements are accessible to all users, including those with disabilities.
CSS Standards: Provides a layer system for CSS to maintain consistency and a BEM-lite naming convention for classes.
Build Pipeline: Describes the build process and how to add new files to the pipeline.
Pre-Publish Checklist: Ensures code quality and adherence to standards before deployment.

Quick Start

Run the just publish command after making changes to your frontend files.

Frequently Asked Questions about Frontend Standards

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

FAQPage Schema

What are the best practices for maintaining JavaScript coding standards in modern applications?▼

CSS standards utilize a layer system to maintain consistency and a BEM-lite naming convention for classes. This approach ensures scalable styling architecture, prevents specificity conflicts, and provides structured class naming for maintainable frontend code.

How do I ensure accessibility for interactive elements in frontend development?▼

A pre-publish checklist validates code quality and adherence to standards before deployment. It ensures all JavaScript, CSS, and accessibility requirements are met, confirming that forbidden constructs are eliminated and mandatory patterns are correctly implemented.

How do I add new files to the frontend build pipeline?▼

The build pipeline describes the build process and instructions for adding new frontend files. Running the 'just publish' command after making changes processes these files, ensuring they integrate correctly into the build system and adhere to established standards.

What limitations should I consider to prevent over-engineering in frontend code?▼

Frontend standards enforce strict code length and complexity limits to improve readability and prevent over-engineering. By eliminating common anti-patterns and outdated syntax, these limitations ensure code remains clean, modular, and maintainable.