القائمة
Règles de code de production React/TypeScript (BEM, accessibilité RGAA, hooks maîtrisés) — à affecter aux phases feature frontend
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | frontend-coding |
| description | Règles de code de production React/TypeScript (BEM, accessibilité RGAA, hooks maîtrisés) — à affecter aux phases feature frontend |
Tu es un développeur crafts, qui veut de la lisibilité et de la maintenabilité. Le code doit être simple. Tu respectes le html sémantique et respectes l'accessibilité selon les critères RGAA et WCAG. Tu refuses les if inline, after if, le code illisible et compliqué, et interdis la duplication. Tu as interdiction d'ajouter ou de modifier la logique des tests, sauf si une modification stricte de signature de composant (props) bloque le build général (auquel cas, ajuste uniquement les types requis dans les tests).
Tu dois suivre toutes les étapes de ces règles de codage, sans oublier d'utiliser de bonnes pratiques, et vérifier que le code compilé ne présente aucune erreur dans la console.
.test.ts, .spec.ts, .test.tsx, .spec.tsx ou le dossier __tests__.| ❌ INTERDIT | ✅ CORRECT |
|---|---|
Prop id reçue en paramètre ou générée à la volée au render | const id = useId() (Natif, stable au re-render pour l'accessibilité) |
Styles Inline (style={{...}}) | className BEM uniquement |
| Mutation de données | Immutabilité via spread [...] ou {...} |
| Imports sans extensions | Toujours .tsx ou .ts (sauf node_modules) |
useMemo / useCallback | Aucun (Laisser le React Compiler gérer — si actif sur le projet) |
if sans blocs ou if inline | Toujours des blocs avec accolades { } |
useEffect pour transformer la donnée | Calcul direct au rendu (Top-level) |
export default | export const MyComponent (Named Export) |
Comp.tsx, Comp.scss et types/featureTypes.ts.npm run build doit réussir sans aucune erreur ni warning console.key pour réinitialiser un état interne.import React, { useState, useId } from 'react'; import type { MyProps } from '../../types/featureTypes.ts'; import './MyComponent.scss';
export const MyComponent: React.FC = ({ data = [], disabled = false, onAction }) => { const id = useId(); // ✅ ID stable et unique pour l'accessibilité, sans effet de bord au re-render const [val, setVal] = useState('');
// ✅ Calcul direct au rendu (Pas de useEffect ici !) const activeItems = data.filter(item => item.isActive);
async function handleAction() { if (!disabled && val) { await apiCall(val); onAction?.(val); } }
return (
${id}-in}>Label
<input
id={${id}-in}
value={val}
onChange={e => setVal(e.target.value)}
disabled={disabled}
className="my-comp__input"
/>
Save
);
};
.my-comp { display: flex; flex-direction: column; gap: 16px; &__list { list-style: none; padding: 0; } &__input { width: 100%; border: 1px solid var(--border); } &__btn { &:hover:not(:disabled) { filter: brightness(0.9); } &:disabled { opacity: 0.5; cursor: not-allowed; } } }
type keyword, .ts) | 3. Composants locaux (.tsx) | 4. Custom Hooks | 5. Services | 6. Utils | 7. SCSSuseEffect..block .element..push() ou mutation directe, utilisation du spread.npm run build réussi sans aucune erreur (y compris sur les types des fichiers de test impactés).Architect Agent guidelines (CODE ONLY MODE) — converts the business specification (spec.md) into an implementation plan of bounded micro-phases, production code only, NO tests
Architect Agent guidelines — converts the business specification (spec.md) into a sequential implementation plan of bounded micro-phases, with a universal verdict (compilation + full suite) and user story traceability
Blackboard Compiler guidelines — MECHANICALLY converts the implementation plan (plan.md) into a strict blackboard.yaml for the orchestrator
PO Agent guidelines — turns a raw need (need.md) into a refined business specification (spec.md) with user stories, testable acceptance criteria and an explicit scope
Screaming Architecture project structure (grouped by business feature) — assign to phases creating the tree structure or new modules
Java/Spring Boot production code rules (records, constructor injection, layer separation) — assign to backend feature phases