frontend-standards

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

1|Updated Mar 7, 2026

Search Tags:#accessibility #frontend #responsive design #css #standards #component architecture

Ready to run

npx skills add https://github.com/george-popescu/bee-dev --skill frontend-standards-george-popescu

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-standards
Source: https://github.com/george-popescu/bee-dev/tree/main/plugins/bee/skills/standards/frontend
Command: npx skills add https://github.com/george-popescu/bee-dev --skill frontend-standards-george-popescu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill establishes a baseline for high-quality, maintainable, and accessible frontend code across any framework, ensuring consistency and best practices are followed.

Core Features & Use Cases

Component Architecture: Guides on building reusable, single-responsibility components.
Accessibility (a11y): Enforces semantic HTML, keyboard navigation, ARIA usage, and color contrast.
Responsive Design: Promotes mobile-first development and fluid layouts.
CSS Methodology: Recommends design tokens and utility-first approaches.
Use Case: Ensure all new UI components adhere to accessibility guidelines and are built with a focus on reusability and maintainability, regardless of whether they are implemented in React, Vue, or another framework.

Quick Start

Apply the frontend standards to ensure all new components are accessible and reusable.

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?▼

Universal frontend standards for component architecture enforce single responsibility principles to build reusable, maintainable UI components. This ensures high-quality code consistency across any JavaScript framework like React or Vue.

How do I ensure my UI components meet accessibility and WCAG AA contrast guidelines?▼

To meet accessibility guidelines, enforce semantic HTML, keyboard navigation, proper ARIA usage, and WCAG AA contrast ratios in your UI components. This baseline ensures maintainable and accessible frontend code across all frameworks.

What is the best way to implement responsive design and mobile-first fluid layouts?▼

The best way to implement responsive design is adopting a mobile-first development approach with fluid layouts. This promotes consistent quality and accessibility across varying viewport sizes without framework-specific dependencies.

How do I apply design tokens and utility-first CSS methodology in my workflow?▼

Apply design tokens and utility-first CSS methodology to establish a consistent visual baseline. This approach standardizes styling decisions, ensuring maintainable and reusable frontend components across different projects.

Does this frontend standards guideline work with any JavaScript framework?▼

Yes, these frontend standards are framework-agnostic, applying universal principles like semantic HTML and mobile-first design across any JavaScript framework. This ensures consistent best practices regardless of your specific technology stack.