Development contracts for clemencefouquet.fr WordPress theme. Enforces rules for Gutenberg blocks, patterns, header, and footer. Use when creating or modifying theme components.
Enforces WordPress development contracts for Gutenberg blocks, patterns, header, and footer.
/plugin marketplace add theflysurfer/claude-skills-marketplace/plugin install theflysurfer-claude-skills-marketplace@theflysurfer/claude-skills-marketplaceThis skill is limited to using the following tools:
references/checklists.mdreferences/code-examples.mdreferences/tokens.mdContracts for consistent, accessible, and maintainable code in the Clémence Fouquet WordPress theme.
| Contract | Purpose |
|---|---|
| Block | Gutenberg blocks structure |
| Pattern | Block patterns composition |
| Header | Header accessibility & glassmorphisme |
| Footer | Footer grid & legal |
Resources: tokens.md | checklists.md | code-examples.md
blocks/block-name/
├── block.json # Metadata (OBLIGATOIRE)
├── edit.js # Composant éditeur React
├── render.php # Rendu dynamique serveur
├── style.css # Styles front-end
└── index.js # Point d'entrée
name: Namespace unique (clemence/card)title, category, attributes, supports{ "title": { "type": "string", "default": "" } }
.c-card {
background: var(--wp--preset--color--white);
padding: var(--wp--preset--spacing--50);
}
Voir references/tokens.md pour tous les tokens
<div <?php echo get_block_wrapper_attributes(['class' => 'c-card']); ?>>
<h3><?php echo esc_html($title); ?></h3>
</div>
esc_html() pour texte, esc_attr() pour attributs, esc_url() pour URLsimport { useBlockProps, RichText } from '@wordpress/block-editor';
Exemples complets: references/code-examples.md Checklist: references/checklists.md
Un pattern = composition de blocs existants JAMAIS de CSS additionnel
<?php
/**
* Title: Hero Violet Organique
* Slug: clemence/hero-violet-organic
* Categories: clemence-sections
* Keywords: hero, banner, organic
*/
?>
| Faire | Ne pas faire |
|---|---|
<!-- wp:heading --> | <div class="custom"> |
{"textColor":"violet-500"} | {"style":{"color":"#5b2e7f"}} |
| Presets theme.json | Valeurs hardcodées |
Exemple complet: references/code-examples.md Checklist: references/checklists.md
<header class="l-header">
<a href="#main-content" class="l-header__skip">Aller au contenu</a>
<div class="l-header__logo"><!-- wp:site-logo --></div>
<nav class="l-header__nav" aria-label="Navigation principale">...</nav>
<button class="l-header__toggle" aria-controls="mobile-nav" aria-expanded="false">
<span class="l-header__toggle-icon"></span>
</button>
</header>
<div id="mobile-nav" class="l-mobile-nav" aria-hidden="true">...</div>
@layer components {
.l-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(10px);
}
}
JavaScript complet: references/code-examples.md Checklist: references/checklists.md
<footer class="l-footer">
<div class="l-footer__wave"><svg>...</svg></div>
<div class="l-footer__grid">
<div class="l-footer__col">
<h2>À propos</h2>
<p>...</p>
</div>
<div class="l-footer__col">
<h2>Navigation</h2>
<nav aria-label="Navigation footer"><ul>...</ul></nav>
</div>
<div class="l-footer__col">
<h2>Contact</h2>
<address><a href="mailto:contact@clemencefouquet.fr">...</a></address>
</div>
<div class="l-footer__col">
<h2>Suivez-moi</h2>
<ul class="l-footer__social">
<li><a href="#" aria-label="LinkedIn"><svg>...</svg></a></li>
</ul>
</div>
</div>
<div class="l-footer__legal">
<p>© 2025 Clémence Fouquet</p>
<nav aria-label="Liens légaux"><a href="/mentions-legales">Mentions légales</a></nav>
</div>
</footer>
var(--wp--preset--color--violet-700)white ou beige-100CSS complet: references/code-examples.md Checklist: references/checklists.md
| Ne pas faire | Faire |
|---|---|
!important | Augmenter spécificité ou @layer |
#id-selector | .l-class-selector |
color: #5b2e7f | var(--wp--preset--color--violet-500) |
.a .b .c .d (4 niveaux) | .l-a__d (2 niveaux max) |
/blocks/, /patterns/, /parts/Read - Lire theme.json, fichiers existantsWrite - Créer blocks, patternsEdit - Modifier composants existantsBash - Commandes npm/buildThis skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.