frontend-patterns
Créer de meilleures interfaces React
Les équipes front-end répètent souvent les décisions liées aux composants, à l'état et aux performances sans référence commune. Cette skill fournit des modèles React et Next.js concis qui guident une implémentation cohérente.
Install with my Agent
Copy this request to your Agent. It includes the canonical Skill page and manifest.
Review the Skillstore skill "frontend-patterns" from https://skillstore.io/skills/sickn33-frontend-patterns.md and its manifest at https://skillstore.io/api/skills/sickn33-frontend-patterns/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Your Agent should still show its plan and request any confirmation required by the security policy.
Agent-readable resources
Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.
Test it
Using "frontend-patterns". J'ai besoin d'une interface d'onglets réutilisable pour un tableau de bord.
Expected outcome:
Recommande le modèle de composant composé, définit les responsabilités principales et explique comment l'état partagé doit circuler via context.
Using "frontend-patterns". Ma liste de marchés contient des milliers de lignes et défile lentement.
Expected outcome:
Suggère la virtualisation, des hauteurs de ligne stables, l'overscan et des composants d'élément mémoïsés pour réduire le travail de rendu.
Using "frontend-patterns". J'ai besoin d'un modèle de modale accessible.
Expected outcome:
Combine animation, gestion du focus, gestion de la touche Escape et attributs de dialog dans une checklist d'implémentation concise.
Security Audit
SafeReviewed all 44 static findings in SKILL.md. They are false positives from Markdown code fences, TypeScript template literals, React lazy imports, local fetch examples, key event handling, and callback names. No prompt injection, command execution, credential access, or data exfiltration intent was found.
Risk Factors
⚡ Contains scripts (2)
⚙️ External commands (33)
🌐 Network access (2)
Share & cite this report
Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.
Copy report link
https://skillstore.io/skills/sickn33-frontend-patterns/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown badge
[](https://skillstore.io/skills/sickn33-frontend-patterns?utm_source=security_passport_badge)HTML badge
<a href="https://skillstore.io/skills/sickn33-frontend-patterns?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/sickn33-frontend-patterns/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Embed card
<iframe src="https://skillstore.io/embed/skills/sickn33-frontend-patterns.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Academic citations (APA · BibTeX · CFF)
APA citation
affaan-m. (2026). frontend-patterns security audit report (audit version 4) [Author version 1.0]. Skillstore. https://skillstore.io/skills/sickn33-frontend-patterns/audits/4BibTeX citation
@techreport{affaan-m-sickn33-frontend-patterns-2026,
author = {affaan-m},
title = {frontend-patterns security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/sickn33-frontend-patterns/audits/4},
note = {Author version 1.0}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "frontend-patterns security audit report (audit version 4)"
version: "1.0"
type: report
authors:
- name: "affaan-m"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/sickn33-frontend-patterns/audits/4"
identifiers:
- type: other
value: "skillstore:sickn33-frontend-patterns:audit:4"
description: "Skillstore immutable audit report identifier"
Skillstore Score
Why this score Evidence Confidence: HighWhat You Can Build
Standardiser les composants React
Utilisez des exemples de composition et de composants composés pour créer des API de composants prévisibles dans l'ensemble d'un produit.
Améliorer les performances de l'interface
Appliquez des modèles de mémoïsation, de lazy loading et de virtualisation pour réduire les rendus lents dans les écrans complexes.
Revoir les modèles d'accessibilité UI
Utilisez les exemples de navigation au clavier et de gestion du focus lors de la conception de modales, de menus déroulants et de contrôles interactifs.
Try These Prompts
Montre-moi un modèle front-end de cette skill pour [problem]. Explique quand l'utiliser et quels compromis vérifier.
Utilise les modèles de composition et de composants composés pour concevoir [component]. Garde l'API simple et liste les props requises.
Passe en revue cette vue React pour repérer les opportunités de mémoïsation, de lazy loading et de virtualisation. Suggère des changements précis en utilisant les modèles de la skill.
Crée un plan front-end pour [feature] en utilisant la composition de composants, les hooks personnalisés, les reducers avec context, les formulaires, la gestion des erreurs, les animations et les modèles d'accessibilité.
Best Practices
- Choisissez des modèles adaptés à la complexité de la fonctionnalité et aux besoins de maintenance de l'équipe.
- Gardez les API de composants réutilisables petites, typées et cohérentes entre composants similaires.
- Associez les changements de performance à des mesures avant et après l'implémentation.
Avoid
- N'ajoutez pas de context ou de reducers pour un état local détenu par un seul composant.
- Ne mémoïsez pas chaque valeur sans coût de rendu clair ou besoin de stabilité.
- Ne copiez pas les exemples sans adapter le comportement d'accessibilité à l'UI finale.