Agent skill

julien-clemence-wordpress-tooling

Build tools, CSS architecture, and Git workflows for clemencefouquet.fr WordPress theme. Covers linting, @layer CSS, and sync between Laragon/Git/VPS.

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/design/julien-clemence-wordpress-tooling-theflysurfer-claude-skills-market

SKILL.md

WordPress Tooling - clemencefouquet.fr

Build tools, CSS architecture, and deployment workflows for the Clémence Fouquet WordPress theme.

Quick Reference

Section Purpose
Build Tools Linting setup
CSS Architecture @layer and tokens
Git Workflows Sync and deploy

Resources: linter-configs.md | git-workflows.md

1. Build Tools

Stack

Outil Usage
@wordpress/scripts Build JS/CSS
Stylelint Lint CSS
ESLint Lint JS
PHPCS Lint PHP

Installation rapide

bash
npm init -y
npm install --save-dev @wordpress/scripts stylelint stylelint-config-standard @wordpress/eslint-plugin

composer require --dev squizlabs/php_codesniffer wp-coding-standards/wpcs

Commandes

bash
npm run lint          # Lint tout
npm run lint:css:fix  # Fix CSS
npm run build         # Production

Configs complètes: references/linter-configs.md

2. CSS Architecture

Règles NON NÉGOCIABLES

Règle Interdit Correct
!important color: red !important Augmenter spécificité
ID selectors #header .l-header
Hardcoded values #5b2e7f var(--wp--preset--color--violet-500)
Deep nesting .a .b .c .d .l-a__d (max 2 niveaux)

CSS Layers

css
@layer reset, base, blocks, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
}

@layer components {
  .l-header { backdrop-filter: blur(10px); }
}
Layer Contenu
reset Box-sizing, normalize
base Styles HTML elements
blocks Blocs Gutenberg custom
components .l-header, .c-card
utilities .u-hidden, .u-flex

WordPress Overrides (CRITIQUE)

CSS hors @layer bat TOUJOURS CSS dans @layer. WordPress génère CSS sans @layer.

css
/* HORS @layer - pour battre WordPress */
body .alignfull,
html body .alignfull {
  max-width: none;
  width: 100vw;
}

/* DANS @layer - nos styles custom */
@layer components {
  .l-header { /* ... */ }
}
php
// Priorité 20 pour charger après WordPress (défaut 10)
add_action('wp_enqueue_scripts', 'clemence_enqueue_assets', 20);

Tokens theme.json

css
/* Couleurs */
var(--wp--preset--color--violet-500)    /* #5b2e7f */
var(--wp--preset--color--orange-500)    /* #f89420 */

/* Espacements */
var(--wp--preset--spacing--50)          /* 24px */
var(--wp--preset--spacing--70)          /* 48px */

/* Typo */
var(--wp--preset--font-family--fraunces)
var(--wp--preset--font-size--large)

Commandes utiles

bash
grep -rn '!important' assets/css/           # Trouver !important
grep -oE '#[0-9a-fA-F]{3,6}' assets/css/*.css | wc -l  # Compter couleurs hardcodées

3. Git Workflows

Workflow: Local → Production

Laragon → Git commit → GitHub push → VPS deploy

Quick deploy

bash
# 1. Sync et commit
robocopy "$LOCAL_THEME" "$PROJECT_THEME" /MIR /XD .git
git add . && git commit -m "feat(header): update styles"
git push origin main

# 2. Deploy
tar -czf /tmp/theme.tar.gz . && scp /tmp/theme.tar.gz srv759970:/tmp/
ssh srv759970 "docker cp /tmp/theme.tar.gz wordpress-clemence:/tmp/ && \
  docker exec wordpress-clemence bash -c 'cd /var/www/html/wp-content/themes/clemence-theme && tar -xzf /tmp/theme.tar.gz'"

Workflow: Production → Local (Sync Clémence)

VPS Gutenberg → Backup → Git commit → Laragon sync

Quick sync

bash
# 1. Backup obligatoire
ssh srv759970 "docker exec wordpress-clemence wp db export /tmp/backup.sql --allow-root"

# 2. Export thème
ssh srv759970 "docker exec wordpress-clemence tar -czf /tmp/theme.tar.gz -C /var/www/html/wp-content/themes clemence-theme"
scp srv759970:/tmp/theme.tar.gz ./backups/

# 3. Commit
git checkout -b content-sync/$(date +%Y%m%d)
git add . && git commit -m "sync: Import modifications Clémence"

Workflows détaillés: references/git-workflows.md

Commit format

feat(header): réduire espacement logo-navigation

- Gap réduit de 2rem à 1rem
- Test mobile OK

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Types: feat, fix, refactor, style, sync Scopes: header, footer, hero, css, deploy

Skill Chaining

Input Expected

  • Projet WordPress theme FSE
  • Accès SSH au VPS (srv759970)
  • Node.js et Composer installés

Output Produced

  • Configs linters prêtes (.stylelintrc.json, etc.)
  • Architecture CSS avec @layer
  • Workflows Git configurés

Skills Required Before

  • Aucun (skill de setup)

Compatible Skills After

  • julien-clemence-wordpress-contracts: Utilise les tokens et conventions CSS
  • julien-clemence-wordpress-remote: Utilise les workflows de déploiement

Tools Used

  • Read - Lire configs existantes
  • Write - Créer configs linters
  • Edit - Modifier package.json, functions.php
  • Bash - npm install, git commands
  • Grep - Rechercher !important, couleurs hardcodées
  • Glob - Trouver fichiers CSS/JS

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results