skills.rest
BEE-CODED
BEE-CODEDOFFICIAL
Explore all skills by this author →
GitHub

frontend-standards

Define frontend development standards for component architecture, accessibility, and responsive design.

1|Updated Feb 21, 2026
Search Tags:#performance#accessibility#frontend#responsive design#css#standards#component architecture
One-click install
npx skills add https://github.com/BEE-CODED/bee-dev --skill frontend-standards-bee-coded
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-standards
Source: https://github.com/BEE-CODED/bee-dev/tree/main/plugins/bee/skills/standards/frontend
Command: npx skills add https://github.com/BEE-CODED/bee-dev --skill frontend-standards-bee-coded

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill establishes a consistent, high-quality baseline for all frontend development, ensuring maintainability, accessibility, and performance across different frameworks.

Core Features & Use Cases

  • Component Architecture: Enforces principles like Single Responsibility, Reusability, and Composition over Inheritance.
  • Accessibility (a11y): Guides developers on semantic HTML, keyboard navigation, ARIA usage, and color contrast (WCAG AA).
  • Responsive Design: Promotes mobile-first approaches, consistent breakpoints, and fluid layouts.
  • CSS Methodology: Advocates for Design Tokens, Utility-First CSS, and avoiding anti-patterns like !important and deep nesting.
  • Performance: Covers rendering optimization, efficient loading strategies, and image optimization.
  • Use Case: A new developer joins a project and needs to understand the established best practices for building UI components. This Skill provides a comprehensive guide to ensure their code aligns with the team's standards.

Quick Start

Follow the frontend standards to build a new, accessible, and responsive button component.

Frequently Asked Questions about frontend-standards

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

FAQPage Schema
What are universal frontend development standards for component architecture?▼

Frontend accessibility standards require semantic HTML, full keyboard navigation, correct ARIA usage, and WCAG AA color contrast. Adhering to these guidelines ensures web interfaces are usable by people with disabilities and compliant with legal accessibility requirements.

How do I implement responsive design using mobile-first principles?▼

Implement responsive design by applying mobile-first principles, maintaining consistent breakpoints, and utilizing fluid layouts. This approach ensures web interfaces adapt smoothly across various screen sizes, prioritizing the core mobile experience before scaling up to larger viewports.

What CSS methodology avoids anti-patterns like !important and deep nesting?▼

A robust CSS methodology advocates for Design Tokens and Utility-First CSS while actively avoiding anti-patterns like !important and deep nesting. This strategy promotes maintainable, scalable styling by enforcing consistent design variables and flat specificity structures.

Does this frontend standards guide apply to any JavaScript framework?▼

Yes, these frontend standards apply universally across any framework. They establish a framework-agnostic baseline focusing on semantic HTML, responsive design, and efficient CSS techniques to ensure maintainable, high-quality web interfaces regardless of the specific tooling.

What are the best practices for frontend performance optimization?▼

Frontend performance optimization best practices include rendering optimization, efficient asset loading strategies, and image optimization. These techniques reduce load times and improve rendering efficiency, directly enhancing the user experience and core web vitals.

Related Skills

Explore More Software Engineering Skills→
tneztnez

bootstrap

Initialize the .docent directory structure and configuration for new projects.

Community
Basic
apexradiusapexradius

a11y-check

Audit web content accessibility against WCAG 2.2 AA standards.

Official
Advanced
corey-alixcorey-alix

Atomic CSS

Create atomic CSS utility classes using token-based custom properties.

Official
Intermediate
ignidusignidus

coding-standards

Enforce universal coding standards across TypeScript, JavaScript, React, and Node.js projects.

Official
Advanced