skills.rest
Mybono
MybonoCOMMUNITY
Explore all skills by this author →
GitHub

Frontend Design — Standards

Enforce frontend design standards for usability, accessibility, and performance.

100|18|Updated Apr 3, 2026
Search Tags:#best practices#accessibility#css#ui components#frontend design
One-click install
npx skills add https://github.com/Mybono/ai-orchestrator --skill frontend-design-standards
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Frontend Design — Standards
Source: https://github.com/Mybono/ai-orchestrator/tree/main/skills/frontend-design
Command: npx skills add https://github.com/Mybono/ai-orchestrator --skill frontend-design-standards

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill unit provides a comprehensive guide to best practices in frontend design, helping developers adhere to established standards for consistency, performance, and accessibility.

Core Features & Use Cases

  • Component Architecture: Follows the Atomic Design methodology, ensuring reusable and maintainable UI components.
  • CSS Methodology: Uses BEM Naming, CSS custom properties, mobile-first approach, and no magic numbers for better CSS organization.
  • State Management: Implements local state for isolation, prevents prop drilling, and promotes value derivation for efficiency.
  • Performance: Utilizes lazy loading, memoization, and effective DOM management for high performance applications.
  • Accessibility: Enforces keyboard accessibility, semantic HTML, and color contrast for accessibility compliance.
  • Anti-Patterns: Alerts developers against common pitfalls in frontend development.

Quick Start

Follow the guide to structure your components using the Atomic Design methodology, apply the BEM Naming conventions to your CSS classes, and ensure all interactive elements are accessible to all users.

Frequently Asked Questions about Frontend Design — Standards

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

FAQPage Schema
How do I structure frontend components for better maintainability?▼

Structure frontend components using the Atomic Design methodology, which breaks down UI into reusable, maintainable elements. This approach ensures a high-quality component architecture by organizing elements from basic atoms up to complex templates.

What is the best way to organize CSS for web applications?▼

Organize CSS using BEM naming conventions, CSS custom properties, and a mobile-first approach. This methodology prevents magic numbers and ensures better CSS organization for consistent frontend design standards.

How do I ensure my UI components are accessible?▼

Ensure UI components are accessible by enforcing keyboard accessibility, using semantic HTML, and maintaining proper color contrast. These frontend design standards guarantee compliance with accessibility requirements for all users.

How can I improve web application performance through frontend design?▼

Improve web application performance by utilizing lazy loading, memoization, and effective DOM management. These frontend design best practices reduce unnecessary rendering overhead and ensure high-performance user interfaces.

What are common anti-patterns in frontend development?▼

Common frontend development anti-patterns include prop drilling, ignoring local state isolation, and using magic numbers in CSS. This guide alerts developers against these pitfalls to maintain high-quality UI systems.

Does this frontend design guide require specific frameworks?▼

No, this frontend design guide does not require specific frameworks. It focuses on framework-agnostic standards like Atomic Design, BEM naming, and accessibility compliance, making it suitable for any web application environment.

Related Skills

Explore More Software Engineering Skills→
hollandkevinthollandkevint
5

mobile

Refactor HTML tables for responsive mobile viewing with CSS.

Community
Basic
NolanPicNolanPic

Frontend Accessibility

Enforce WCAG compliance in frontend UI code with semantic HTML and ARIA.

Community
Basic
cuiosscuioss
4

css

Establish CSS development standards for naming, custom properties, responsive patterns, and tooling.

Official
Advanced
jey3dayojey3dayo
6

web-design-guidelines

Enforce Web Interface Guidelines compliance in HTML/CSS/JS UI files.

Community
Advanced