Ingénierie UI Frontend

Développement d'UI de qualité production axé sur les contrats de design, l'accessibilité et une QA visuelle rigoureuse.

déclencheurs:build uifrontend engineeringui polishvisual qaaccessibility auditresponsive design

Ce que cela fait

Cette compétence fournit un cadre complet pour construire et affiner les interfaces utilisateur. Elle garantit que l'implémentation de l'UI adhère strictement aux contrats de design approuvés (DESIGN.md, VISUAL_SYSTEM.md) et résiste à une QA fonctionnelle et visuelle de niveau professionnel.

Quand l'utiliser

Utilisez cette compétence lors de l'implémentation de nouveaux écrans frontend, du polissage de l'UI existante, de la révision de l'accessibilité ou de l'exécution de « monkey testing » pour garantir la stabilité de l'interface sur divers états et appareils.

Ce qui est inclus

Références : Listes de contrôle d'accessibilité complètes et rubriques de QA visuelle.
Instructions : Un flux de travail d'implémentation strict en 6 étapes incluant les listes de contrôle des écrans, la traduction des primitifs et la gestion d'état.
Portes de QA : Exigences détaillées pour les tests fonctionnels, de monkey testing et de comparaison visuelle, incluant un système de notation pour une livraison haute fidélité.

Agents compatibles

Claude Code, Cursor, Codex, Gemini CLI, OpenClaw

Étiquettes

#frontend #ui-ux #accessibility #web-development #qa #design-systems

Pas encore audité

Cette compétence n'a pas encore été examinée par notre pipeline d'audit automatisé.

Informations

Dépôt: Dev Agent OPC
Étoiles: 35

Compétences similaires

Scientific Schematics & Diagrams

Generate publication-quality scientific diagrams via AI with iterative quality review and smart regeneration for journal, conference, poster, and presentation o

Clerk Vue Patterns

Vue 3 integration patterns for Clerk: composables, router guards, and Pinia auth store integration.

Colorize (Strategic UI Color)

Introduce purposeful color into monochromatic or dull interfaces to improve hierarchy, meaning, and emotional warmth while preserving accessibility.

OpenTestAI

Automated, high-confidence AI testing: bug detection, persona feedback, and prioritized test-case generation using many specialized tester profiles.

Cognitive Accessibility Specialist

Audits content, forms and authentication flows for cognitive accessibility (WCAG 2.2 / COGA) and gives prioritized remediation and plain-language guidance.

PPT as Code

Creator-first workflow to plan and build HTML-first presentations with staged modes (quick/basic/advanced), optional PPTX export, and clear QA and image plannin

Agent Browser — Core

Core usage guide for agent-browser: snapshot-and-ref browser automation to navigate pages, interact with elements, extract data, take screenshots, manage sessio

React Development Expert

Provides authoritative React guidance on hooks, state patterns, Server Components, performance optimization, and common architectural patterns.

Retour aux compétences