Build Accessible, Production-Ready Frontends
Frontend work can become inconsistent, inaccessible, or difficult to maintain. This skill guides component architecture, responsive layouts, state handling, and polished user experiences.
Copiez cette demande dans votre Agent. Elle contient la page Skill de référence et le manifeste.
Review the Skillstore skill "frontend-ui-engineering" from https://skillstore.io/skills/addyosmani-frontend-ui-engineering.md and its manifest at https://skillstore.io/api/skills/addyosmani-frontend-ui-engineering/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Votre Agent doit toujours présenter son plan et demander toute confirmation exigée par la politique de sécurité.
Utilisez ces liens lorsquâun Agent IA, un crawler ou un script a besoin dâun contexte propre au lieu de lire toute la page.
Utilisation de « frontend-ui-engineering ». Design a task list that works on mobile and supports keyboard users.
RĂ©sultat attendu:
A component plan with a task list, task item, loading skeleton, error state, empty state, keyboard behavior, and responsive layout rules.
Utilisation de « frontend-ui-engineering ». Review a dialog that opens without moving focus.
RĂ©sultat attendu:
A focused accessibility review recommending initial focus, a labeled close control, focus containment, keyboard dismissal, and restoration of focus.
Utilisation de « frontend-ui-engineering ». Improve a dashboard using oversized cards and decorative gradients.
RĂ©sultat attendu:
A visual review prioritizing information hierarchy, purposeful spacing, design-system colors, restrained surfaces, and layouts optimized for scanning.
All 36 static matches are false positives caused by Markdown fences, inline backticks, illustrative frontend code, or documentation links. No prompt injection, data exfiltration, or executable command instruction was found in SKILL.md.
Partagez le rapport dâĂ©valuation versionnĂ©, le badge neutre, la carte intĂ©grable et les citations. Skillstore prĂ©sente les preuves sans dĂ©cider si ce Skill est sĂ»r.
https://skillstore.io/skills/addyosmani-frontend-ui-engineering/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/addyosmani-frontend-ui-engineering?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/addyosmani-frontend-ui-engineering?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/addyosmani-frontend-ui-engineering/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/addyosmani-frontend-ui-engineering.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>addyosmani. (2026). frontend-ui-engineering security audit report (audit version 1) [Author version unspecified]. Skillstore. https://skillstore.io/skills/addyosmani-frontend-ui-engineering/audits/1@techreport{addyosmani-addyosmani-frontend-ui-engineering-2026,
author = {addyosmani},
title = {frontend-ui-engineering security audit report (audit version 1)},
institution = {Skillstore},
year = {2026},
number = {1},
url = {https://skillstore.io/skills/addyosmani-frontend-ui-engineering/audits/1},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "frontend-ui-engineering security audit report (audit version 1)"
version: "unspecified"
type: report
authors:
- name: "addyosmani"
date-released: "2026-09-19"
url: "https://skillstore.io/skills/addyosmani-frontend-ui-engineering/audits/1"
identifiers:
- type: other
value: "skillstore:addyosmani-frontend-ui-engineering:audit:1"
description: "Skillstore immutable audit report identifier"
Plan a responsive page with focused components, meaningful states, and accessible interactions.
Review a screen for layout, hierarchy, responsiveness, accessibility, and maintainability issues.
Turn design-system principles into practical component and interaction guidance for a shared codebase.
Design a focused component for [feature]. Define its props, states, accessibility behavior, and responsive layout.
Review this page structure: [description]. Recommend a mobile-first layout, component boundaries, spacing, and meaningful empty states.
Review this interface for WCAG 2.1 AA issues. Check keyboard navigation, labels, focus management, contrast, and non-color cues.
Evaluate this frontend implementation against its design system. Identify architectural, responsive, accessibility, state, and visual-quality improvements in priority order.
Auteur
addyosmaniLicence
MIT
RĂ©vision Skillstore
r1
Avis de version
Lâauteur nâa dĂ©clarĂ© aucune version.
RĂ©f
5d5054f8a23586f9b500fece1cb613a9dffc787b
RĂ©cence de maintenance
19/09/2026
Utilisation
0 téléchargements · 0 vues
Structure de fichiers
đ SKILL.md
Clarify User Intent Before You Build
Underspecified requests cause teams to build the wrong outcome and discover misalignment late. This skill runs a focused, one-question interview that turns ambiguity into confirmed intent.
Examiner le code selon cinq axes de qualité
Les modifications de code peuvent dissimuler des problĂšmes de fiabilitĂ©, de sĂ©curitĂ©, dâarchitecture, de lisibilitĂ© et de performances. Cette compĂ©tence applique un processus dâexamen structurĂ© et produit des retours hiĂ©rarchisĂ©s et exploitables.
Plan Work Into Verifiable Tasks
Large or vague software work can hide dependencies, missing acceptance criteria, and verification gaps. This skill converts a specification into ordered task slices with checkpoints, scope guidance, and clear completion conditions.
Document Decisions and Architecture Clearly
Teams lose context when important technical decisions remain in chat, code comments, or individual memory. This skill turns architectural reasoning, API guidance, project instructions, and release changes into structured documentation.
Harden Applications Against Security Risks
Security reviews can miss trust boundaries and unsafe data flows. This skill supplies threat-modeling prompts, OWASP patterns, and practical review checklists.
Structure Better Context for Coding Agents
Coding agents lose accuracy when context is incomplete, stale, or excessive. This skill provides practical structures for focused sessions, durable rules, and reliable handoffs.
Build Accessible Tailwind Interfaces
par nextlevelbuilder
Building consistent, responsive interfaces requires many component, styling, and accessibility decisions. This skill provides shadcn/ui patterns, Tailwind guidance, and focused automation.
Auditer lâaccessibilitĂ© web pour la conformitĂ© WCAG
par 89jobrien
Les lacunes dâaccessibilitĂ© peuvent bloquer les utilisateurs et crĂ©er un risque de non-conformitĂ©. Cette compĂ©tence guide les audits WCAG, les vĂ©rifications avec lecteur dâĂ©cran, les tests au clavier et la planification des corrections.
Build Consistent Design Systems and Slides
par nextlevelbuilder
Inconsistent tokens and components make design handoffs difficult. This skill structures tokens, validates usage, and generates brand-aligned presentation assets.
Concevoir des interfaces frontend distinctives
par Atman36
Les interfaces gĂ©nĂ©rĂ©es gĂ©nĂ©riques semblent souvent prĂ©visibles et faibles. Cette compĂ©tence guide Claude, Codex et Claude Code vers une conception frontend distinctive et prĂȘte pour la production.
Implémenter les transitions de vue React
par vercel-labs
Les transitions de vue React sont faciles Ă mal placer, ce qui entraĂźne des animations silencieuses ou gĂȘnantes. Cette skill guide les choix dâanimations de routes, de Suspense, de listes et dâĂ©lĂ©ments partagĂ©s.
CrĂ©er des fonctionnalitĂ©s frontend prĂȘtes pour la production
par davila7
Les équipes frontend ont besoin de recommandations cohérentes sur React et Next.js dans l'ensemble de leurs projets. Cette compétence fournit des workflows de référence, des pratiques de qualité et des scripts utilitaires pour l'analyse frontend.