developer-frontend

Standardize frontend code quality with WCAG 2.1 AA accessibility and testing practices.

Updated Mar 19, 2026

Search Tags:#testing #performance #accessibility #state management #frontend #components #angular

Ready to run

npx skills add https://github.com/dragoscirjan/opencode-config --skill developer-frontend

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: developer-frontend
Source: https://github.com/dragoscirjan/opencode-config/tree/main/skills/developer-frontend
Command: npx skills add https://github.com/dragoscirjan/opencode-config --skill developer-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps frontend developers apply consistent UI, accessibility, performance, and component design standards so interfaces are easier to build, review, and maintain.

Core Features & Use Cases

Accessibility guidance: Builds WCAG 2.1 AA-ready interfaces with semantic HTML, keyboard support, and appropriate ARIA use.
Performance and state management: Promotes lazy loading, code splitting, image optimization, and local-first state patterns.
Component and testing practices: Encourages single-responsibility components, framework-native patterns, and layered unit, component, and end-to-end tests.
Use case: Use it when creating an Angular feature, refactoring a UI, or reviewing frontend code for safety, structure, and maintainability.

Quick Start

Use this skill to review my frontend implementation and tell me how to make it more accessible, performant, and maintainable.

Frequently Asked Questions about developer-frontend

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

FAQPage Schema

How do I make my Angular frontend components meet WCAG 2.1 AA accessibility standards?▼

To make Angular components meet WCAG 2.1 AA accessibility standards, implement semantic HTML, ensure full keyboard support, and apply appropriate ARIA attributes. This approach standardizes UI implementation for easier review and maintenance.

What is the best way to structure Angular state management for performance?▼

The best way to structure Angular state management for performance is adopting local-first state patterns alongside lazy loading and code splitting. These practices optimize image loading and ensure consistent component design across your application.

How do I set up unit, component, and end-to-end tests for frontend UI components?▼

To set up unit, component, and end-to-end tests for frontend UI components, apply layered testing practices that encourage single-responsibility components. This ensures framework-native patterns validate safety, structure, and maintainability.

Can I use this frontend guidance to refactor existing UI code safely?▼

Yes, you can use this frontend guidance to refactor existing UI code safely. It reviews implementations for safe content handling, accessibility, and performance, providing consistent guidance to make interfaces easier to maintain.

Why does my frontend code review fail to catch accessibility and performance issues?▼

Frontend code reviews often fail to catch accessibility and performance issues without consistent standards. Applying semantic HTML, lazy loading, and WCAG 2.1 AA practices ensures structured, safe, and maintainable UI implementation.

Do I need semantic HTML and ARIA for frontend components to pass accessibility checks?▼

Yes, you need semantic HTML and appropriate ARIA use for frontend components to pass accessibility checks. Implementing these WCAG 2.1 AA practices ensures keyboard support and standardizes UI quality across your project.