
de yonatangross
Patterns pratiques pour des interfaces utilisateur responsives : container queries, typographie fluide, mises en page intrinsèques et support des appareils pliables pour les composants React.
Une référence compacte des techniques modernes de design responsif pour les applications React. Explique les container queries vs media queries, la typographie fluide avec clamp(), les patterns de grille intrinsèques, les images responsives et les considérations pour les écrans pliables/duaux. Fournit des règles et des exemples de patterns pour construire des composants portables et accessibles qui répondent à la taille du conteneur plutôt qu'uniquement au viewport.
Utilisez ceci lors de la construction de composants UI réutilisables, de primitives de systèmes de design, ou lors de l'optimisation du comportement responsif pour des conteneurs variables (barres latérales, modales, cartes) et des appareils émergents (pliables, doubles écrans). Idéal pour les ingénieurs frontend et les auteurs de systèmes de design.
Utile pour les outils d'agents orientés frontend et les flux Claude Code qui génèrent des patterns React/CSS, l'automatisation de systèmes de design et les assistants de revue de code.
A comprehensive reference skill for responsive UI patterns using container queries, fluid typography, CSS subgrid, foldable device support, and React components. Well-structured SKILL.md with clear frontmatter, progressive disclosure via on-demand rule files, anti-patterns section, browser support table, and decision matrix. No scripts to execute — purely a reference/knowledge skill. No security concerns: no shell commands, no network calls, no credentials. Minor deduction for not being runnable (no scripts to validate) and some references pointing to files not available for verification.
Clean reference skill with no executable code. Good progressive disclosure pattern — main SKILL.md summarizes, rule files load on demand. Well-organized frontmatter with tags, compatibility info, and allowed-tools restriction (read-only tools only). Architecture follows spec well with rules/ and references/ directories. Security is strong: read-only tools only, no network calls, no shell execution.
Analytique Inter-Projets
Interrogez des analyses locales et sécurisées sur plusieurs projets pour rapporter les performances des agents, compétences, hooks et équipes ; rejouez des sessions et estimez les coûts de jetons.
Modèles de Dépendance de Tâches
Modèles et flux de travail pour créer, séquencer et gérer les dépendances de tâches en utilisant les outils TaskCreate/TaskUpdate/TaskGet/TaskList pour coordonner des implémentations multi-étapes
Revue de PR
Revue de code approfondie de pull-requests utilisant des agents spécialisés en parallèle (qualité, sécurité, tests, architecture, performance) et des rapports de synthèse pour approbation.
Rédiger un PRD (Document de Spécifications Produit)
Générez un Document de Spécifications Produit en 8 sections avec des récits utilisateurs, des critères d'acceptation au format INVEST et des critères de go/no-go pour transformer une vision produit en exécution.
Inspecteur de Télémétrie
Exécutez un contrôle de santé en lecture seule du pipeline de télémétrie d'OrchestKit : activité de l'écrivain, tailles de fichiers, couverture du verrouillage du schéma, fichiers orphelins et tendances de croissance.
Design Ship
Transformez une URL ou un bundle de transfert Claude Design en une PR GitHub révisable avec des stories Storybook générées, des tests Playwright et une vérification avant/après.
Dream — Consolidation de la Mémoire
Consolidation nocturne automatisée de la mémoire : nettoie les fichiers de mémoire obsolètes, fusionne les doublons, résout les contradictions et reconstruit les index de MEMORY.md de manière déterministe
Architecture Adaptée au Périmètre
Évite le sur-ingénierie en adaptant les modèles architecturaux au périmètre réel du projet grâce à un système de classification à 6 niveaux.
Vérifier
Exécute une vérification complète : agents parallèles pour les tests, la sécurité, la couverture, la notation et des suggestions d'amélioration ; produit un rapport de vérification basé sur des preuves.
Animation & Motion Design
Implémentez des animations d'interface utilisateur performantes et accessibles à l'aide de la bibliothèque Motion et de l'API native View Transitions.