Synthèse automatique
Définit des interfaces et des types TypeScript robustes, synchronise avec le backend et applique une vérification stricte.
Points forts
- Améliore la robustesse du code avec des types stricts
- Évite les erreurs d'exécution grâce à des validations au moment de la compilation
- Facilite la collaboration entre développeurs avec des types centralisés
- Permet une synchronisation efficace entre le frontend et le backend
Limites
- Peut ralentir le développement initial si le typage est trop rigide
- Nécessite une bonne connaissance de TypeScript pour être pleinement efficace
- La génération de code peut être complexe à mettre en place
À utiliser dès le début d'un projet TypeScript ou lors de l'ajout de nouvelles fonctionnalités nécessitant des données structurées.
À éviter pour des prototypes rapides ou des scripts ponctuels où la flexibilité prime sur la rigueur.
Analyse de sécurité
SûrThis skill provides only static TypeScript guidance with no executable commands or tool invocations. It does not instruct any destructive, exfiltrating, or obfuscated actions, and falls entirely within safe advisory content.
Aucun point d'attention détecté
Comment cette analyse est faiteExemples
Create TypeScript interfaces for a user object with id, username, email, and createdAt, and write a React component that displays them.Generate TypeScript types from a backend OpenAPI spec for the user endpoint and implement a fetch function with full type safety.Refactor this code to enable TypeScript strict mode, replace 'any' with proper types, and add runtime validation with Zod.name: types description: Define type-safe interfaces, sync with backend, and enforce strict checking.
Types Skill
Instructions
-
Type-safe interfaces
- Define clear TypeScript interfaces and types for data structures
- Ensure all props, state, and function parameters are typed
- Use union and literal types where appropriate
-
Sync with backend
- Keep frontend types aligned with backend API responses
- Use code generation tools (e.g., OpenAPI, Zod, or GraphQL Codegen) when possible
- Validate incoming API data against expected types
-
Strict checking
- Enable TypeScript strict mode
- Avoid using
anyor unsafe type assertions - Use type guards and runtime validation for dynamic data
Best Practices
- Keep types centralized and reusable
- Use enums or union types for fixed sets of values
- Type errors early to prevent runtime issues
- Document types for better developer collaboration
- Combine TypeScript with runtime validators for safety
Example Structure
// Backend response type
interface UserResponse {
id: string;
username: string;
email: string;
createdAt: string;
}
// Frontend props type
interface UserCardProps {
user: UserResponse;
}
// Component using typed props
const UserCard: React.FC<UserCardProps> = ({ user }) => {
return (
<div className="p-4 border rounded">
<h2>{user.username}</h2>
<p>{user.email}</p>
<small>{new Date(user.createdAt).toLocaleDateString()}</small>
</div>
);
};
// Example API fetch with type enforcement
async function fetchUsers(): Promise<UserResponse[]> {
const res = await fetch("/api/users");
const data: UserResponse[] = await res.json();
return data;
}
Du fichier au premier essai
Le téléchargement contient exactement le contenu affiché sur cette fiche. Cette copie peut différer de la dernière version du dépôt source.
Consulter la source et ses fichiers annexesCe téléchargement contient uniquement SKILL.md. Les scripts, références, modèles et dépendances éventuels ne sont pas inclus. Récupérez les fichiers nécessaires depuis la source en conservant leur arborescence avant de poursuivre.
1. Télécharger le fichier
Télécharger SKILL.mdDepuis la racine d’un projet de test, enregistrez le fichier sous .skill-downloads/typescript-types-mrzxuqr7/SKILL.md, ou utilisez la commande suivante. Ce dossier sert à examiner la skill avant son installation.
Commande pour macOS/Linux ou WSL : un shell POSIX et curl sont nécessaires. Sous Windows sans WSL, utilisez le bouton de téléchargement et créez le dossier manuellement.
mkdir -p '.skill-downloads/typescript-types-mrzxuqr7' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/typescript-types-mrzxuqr7/download' --output '.skill-downloads/typescript-types-mrzxuqr7/SKILL.md.part' && mv '.skill-downloads/typescript-types-mrzxuqr7/SKILL.md.part' '.skill-downloads/typescript-types-mrzxuqr7/SKILL.md'2. Vérifier les prérequis
Lisez SKILL.md avant de l’utiliser. Si le fichier cite des scripts ou services externes, examinez-les et préparez les accès nécessaires dans votre environnement de test.
Aucune section de prérequis reconnue dans ce fichier. Cela ne signifie pas qu’il est autonome : les bibliothèques, outils et accès peuvent être cités ailleurs dans le contenu ou dans le dépôt source.
Les plateformes de la fiche sont des indications du catalogue. Les chemins ci-dessous suivent la documentation des outils ; ils ne prouvent pas que cette skill y a été exécutée. Aucune version minimale de ces outils n’est attestée pour cette fiche.
3. Charger la skill
Après vérification, copiez le dossier complet dans le projet avec l’une des commandes ci-dessous, puis ouvrez une nouvelle session de l’outil. La commande s’arrête si un dossier du même nom existe déjà : comparez les fichiers avant de le remplacer.
Claude Code
test -f '.skill-downloads/typescript-types-mrzxuqr7/SKILL.md' && test -s '.skill-downloads/typescript-types-mrzxuqr7/SKILL.md' && mkdir -p '.claude/skills' && test ! -e '.claude/skills/types' && cp -R '.skill-downloads/typescript-types-mrzxuqr7' '.claude/skills/types'Cursor
test -f '.skill-downloads/typescript-types-mrzxuqr7/SKILL.md' && test -s '.skill-downloads/typescript-types-mrzxuqr7/SKILL.md' && mkdir -p '.cursor/skills' && test ! -e '.cursor/skills/types' && cp -R '.skill-downloads/typescript-types-mrzxuqr7' '.cursor/skills/types'Codex
test -f '.skill-downloads/typescript-types-mrzxuqr7/SKILL.md' && test -s '.skill-downloads/typescript-types-mrzxuqr7/SKILL.md' && mkdir -p '.agents/skills' && test ! -e '.agents/skills/types' && cp -R '.skill-downloads/typescript-types-mrzxuqr7' '.agents/skills/types'OpenSkills
OpenSkills doit déjà être installé. La procédure locale install/read est contrôlée avec OpenSkills 1.5.0, qui exige Node.js ≥ 20.6.0. Aucun slug du catalogue n’est résolu automatiquement.
Installation officielle d’OpenSkillsopenskills install './.skill-downloads/typescript-types-mrzxuqr7'openskills read 'typescript-types-mrzxuqr7'La lecture doit afficher le contenu du fichier installé et son dossier de base. Elle ne lance ni la skill ni ses dépendances.
Pour un agent qui lit AGENTS.md, synchronisez ensuite l’index. Cette commande modifie AGENTS.md : relisez le diff avant de l’utiliser.
openskills syncMode manuel ou autre outil : joignez SKILL.md à une conversation, ou ouvrez-le dans un agent capable de lire les fichiers. Ajoutez les ressources annexes nécessaires. Il n’existe pas de dossier universel reconnu par tous les outils.
4. Faire un premier essai
Utilisez une entrée courte et fictive : un endpoint d’API, un petit document ou un brief d’interface. Dans une nouvelle conversation, joignez le fichier ou donnez son chemin à l’agent, puis adaptez cette demande :
Lis .skill-downloads/typescript-types-mrzxuqr7/SKILL.md et applique ses instructions à cet exemple : [décrire une entrée de test]. Indique les fichiers, dépendances ou accès qui manquent. Produis le résultat demandé par la skill sans inventer de données ni exécuter de script non examiné.Résultat attendu : une sortie correspondant aux instructions de la skill, ou une liste précise des prérequis manquants. Une simple confirmation de lecture ne valide pas le premier usage. Si une ressource externe est indisponible, ce parcours reste à tester.
Bonnes pratiques React Hook Form
Developpement
Maîtrisez React Hook Form : évitez les anti-patterns, gérez les abonnements, et traitez correctement reset, dirty state et entrées contrôlées.
Migration Emotion vers Mantine
Developpement
Migrer les styled-components Emotion vers des composants Mantine avec style props et modules CSS. Pour convertir .styled.tsx ou supprimer les imports @emotion.
Détecteur de dérive de périmètre
Developpement
Analyse les diffs git par rapport à une intention pour détecter la dérive de périmètre, fichiers non liés et PR trop larges, puis suggère de garder, diviser ou justifier.