Frontend Design — Standards
CommunityEnsure your frontend designs adhere to best practices and standards.
AuthorMybono
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
None requiredComponents
scriptsreferencesassets
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: Frontend Design — Standards Download link: https://github.com/Mybono/ai-orchestrator/archive/main.zip#frontend-design-standards Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 620,000+ vetted skills library on demand.