skills.rest
systempromptio
systempromptioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

frontend-coding-standards

Enforce vanilla JS, semantic HTML, and token-based CSS standards for UI components.

2|Updated Feb 24, 2026
Search Tags:#frontend#standards#coding#semantic-html#web-components#vanilla-js
One-click install
npx skills add https://github.com/systempromptio/systemprompt-marketplace --skill frontend-coding-standards
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-coding-standards
Source: https://github.com/systempromptio/systemprompt-marketplace/tree/main/plugins/development/skills/frontend-coding-standards
Command: npx skills add https://github.com/systempromptio/systemprompt-marketplace --skill frontend-coding-standards

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Front-end coding standards ensure consistent architecture, accessibility, and maintainability across all UI components for systemprompt.io.

Core Features & Use Cases

  • Enforces framework-free, modular vanilla JS, semantic HTML, accessible components, and CSS token-driven styling.
  • Enables reusable Web Components for overlays, modals, and menus, reducing duplication and maintenance overhead.
  • Use cases include building a consistent UI library and ensuring teams produce predictable, accessible UIs.

Quick Start

Start applying the frontend-coding-standards to new UI components and refactor existing pages to adopt semantic HTML, modular JavaScript, and token-based CSS.

Frequently Asked Questions about frontend-coding-standards

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

FAQPage Schema
How do I enforce consistent front-end coding standards across multiple projects?▼

Front-end coding standards apply to building accessible UI components using vanilla JS, semantic HTML, and token-based CSS, ensuring modular code organization and Web Components usage across static sites and interactive widgets.

What is the best way to build accessible UI components without a framework?▼

The best way to build accessible, framework-free UI components is using vanilla JS and semantic HTML, structured as reusable Web Components to reduce duplication and maintenance overhead.

How do I use design tokens for CSS styling in Web Components?▼

Design tokens drive CSS styling by applying token-based CSS across Web Components, enabling predictable UI generation and consistent design-token-driven styling across the UI library.

Can I use vanilla JS and Web Components for interactive widgets on static sites?▼

Yes, you can use vanilla JS and Web Components for interactive widgets on static sites, applying modular code organization and semantic HTML to ensure accessible, framework-free UI delivery.

Why should I use semantic HTML and token-based CSS for modular UI development?▼

Semantic HTML and token-based CSS ensure accessibility and maintainability in modular UI development, reducing duplication through reusable Web Components and predictable design-token-driven styling.

Related Skills

Explore More Software Engineering Skills→
davidbeglenboyledavidbeglenboyle
2

frontend-design

Generate production-grade HTML/CSS/JS frontend interfaces from design briefs.

Community
Advanced
timsvoicetimsvoice

specimin-ui-accessibility

Audit and fix generated UI code for WCAG 2.1 AA compliance.

Community
Advanced
RedWoodOGRedWoodOG
174

frontend-design

Design accessible, responsive frontend components for React, Vue, Svelte, or vanilla HTML/CSS/JS.

Community
Advanced
ltaooltaoo

timeless

Build web UIs with vanilla JS and store-driven state management.

Community
Intermediate