Communitygithub.com

FSWP-Theme-Entwickler (fswp-theme-developer)

Baut maßgeschneiderte WordPress-Themes: Block-Themes, klassische Themes, Hybride und Child-Themes – inklusive Barrierefreiheit, Escaping, Directory-Readyness und einem Scafold-Script.

Was ist FSWP-Theme-Entwickler (fswp-theme-developer)?

Dieses Skill erstellt WordPress-Themes auf Basis eines genehmigten PRDs des FSWP-Architekten. Es unterstützt alle vier Theme-Typen: Block-Themes (mit `theme.json`, Templates, Pattern und Style-Variationen), klassische Themes (mit voller Template-Hierarchie, `functions.php` und Theme-Supports), Hybrid-Themes (Kombination aus klassischen Templates und `theme.json`) sowie Child-Themes (sichere Überschreibung eines Eltern-Themes). Für neue Projekte wird standardmäßig ein Block-Theme gewählt; der Entwickler entscheidet anhand des PRDs, ob ein klassisches, hybrides oder Child-Theme nötig ist. Das Skill sorgt für Barrierefreiheit (Accessibility), Ausgabe-Escaping (Security Engineer), Internationalisierung (i18n) und die Einhaltung aller Coding Standards. Es erstellt automatisch das Theme-Gerüst mit `scaffold_theme.py`, definiert Design-Tokens in `theme.json` (Farbpalette, Typografie, Abstände), baut die benötigte Template-Hierarchie und registriert Patterns und Style-Variationen. Klassische Themes erhalten automatisch alle erforderlichen `add_theme_support()`-Aufrufe, Child-Themes enqueuen die Parent-Stylesheets korrekt. Abschließend wird der gesamte Output an den QA-Engineer übergeben; falls das Theme für das WordPress.org-Verzeichnis bestimmt ist, wird zusätzlich die Directory-Readyness geprüft (keine CPTs, keine Blöcke, keine Shortcodes usw.). Das ausgelieferte Paket ist ein installierbares ZIP mit `readme.txt`, `screenshot.png` und Lizenzhinweisen.

Funktioniert mit~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/syncwin/fswp-developer/tree/main/skills/fswp-theme-developer
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

FSWP Theme Developer (FSWP-Theme-Entwickler)

Grundlegend (immer angewandt): fswp-developer/references/lean-coding.md (weniger schreiben, Wiederverwendung zuerst), fswp-developer/references/coding-standards.md (Coding-Standards, Dokumentation, i18n, Barrierefreiheit) und fswp-security-engineer (Eingabe, Ausgabe, Autorisierung).

Führt ein genehmigtes Theme-PRD (fswp-architect) aus. Ein Theme steuert die Darstellung. Funktionen, die einen Theme-Wechsel überleben müssen (benutzerdefinierte Beitragstypen, Integrationen, Geschäftslogik), gehören in ein Plugin (fswp-plugin-developer); weise darauf hin, anstatt sie in functions.php zu verstecken.

Typ zuerst entscheiden

TypWann wählenKern-Dateien
Block-ThemeSite-Editor gewünscht; Neubauten standardmäßigstyle.css (nur Header), theme.json, templates/index.html, parts/, patterns/, styles/
Klassisches ThemePHP-Templates und benutzerdefinierte Logik pro Template nötig, oder älteres WordPress unterstützen mussstyle.css, index.php, functions.php, Template-Dateien
HybridKlassische Templates plus theme.json für Einstellungen und Editor-StileKlassische Dateien + theme.json
Child-ThemeEin Eltern-Theme anpassen, ohne es zu forkenstyle.css mit Template:-Header, functions.php, nur Überschreibungen

Standardmäßig ein Block-Theme für Neubauten wählen, es sei denn, das PRD erfordert etwas anderes. Block-Themes benötigen WordPress 5.9 oder neuer; prüfe die aktuelle theme.json-Schema-Version und die zugehörige minimale WordPress-Version in der Dokumentation, bevor du Requires at least festlegst.

Arbeitsablauf

  1. Scaffold: python3 scripts/scaffold_theme.py --help, dann das Grundgerüst generieren (Block, klassisch oder Child). Führe fswp-qa-engineer/scripts/run_gate.sh <verz> <min-php> --fix einmal aus.
  2. Design-Tokens: Definiere Palette, Typografie, Abstände, Layout-Breiten sowie Rahmen-/Schatten-Vorgaben in theme.json (Block/Hybrid) oder in CSS-Custom-Properties (klassisch). Verwende Vorgaben in Templates und Patterns anstelle von hartcodierten Werten.
  3. Templates: Baue die im PRD benötigte Hierarchie (Startseite, Blog-Startseite, Einzelbeitrag, Seite, Archiv, Suche, 404 sowie ggf. benutzerdefinierte Templates). Verwende Template-Teile für Header, Footer und wiederkehrende Abschnitte wieder.
  4. Patterns: Registriere wiederverwendbare Layouts als Dateien in patterns/ (Header-Kommentar: Titel, Slug, Kategorien, optionale Schlüsselwörter, Viewport-Breite, Block-Typen). Keine entfernten Bilder.
  5. Style-Variationen: JSON-Dateien in styles/ für alternative Designs; halte sie als kleine Überschreibungen von theme.json.
  6. Benutzerdefinierte Blöcke oder Interaktivität, die das Theme wirklich benötigt: fswp-block-developer. Bevorzuge andernfalls Kern-Blöcke.
  7. Assets: Einbinden mit wp_enqueue_scripts (klassisch) oder theme.json/add_editor_style (Block); Schriftarten lokal bündeln (fontFace-Einträge) mit Lizenzen; keine CDN-Links.
  8. Sicherheit, i18n, Barrierefreiheit: Jede Ausgabe escapen, jeden String übersetzen, die Barrierefreiheitsregeln einhalten (fswp-security-engineer, fswp-developer/references/coding-standards.md, references/theme-i18n-a11y.md). Verwende benannte, mit Präfix versehene Funktionen für Hooks (keine Closures), ein Präfix von mindestens vier Buchstaben und array()-Syntax gemäß den Coding-Standards.
  9. Directory-Readyness, falls das Ziel das WordPress.org-Theme-Verzeichnis ist: fswp-release-manager (references/theme-requirements.md), dann python3 ../fswp-qa-engineer/scripts/theme_check.py <verz> --directory ausführen. Themes dürfen keine benutzerdefinierten Beitragstypen, Blöcke, Shortcodes, Rollen, Kontaktmethoden oder MIME-Typen enthalten: Diese gehören in ein Plugin. Theme-Namen dürfen nicht „WordPress“, „Theme“ oder „Twenty“ enthalten.

Anhalten und an fswp-qa-engineer übergeben.

Wesentliche Elemente klassischer Themes

add_theme_support() für title-tag und automatic-feed-links (beide vom Verzeichnis gefordert), sowie post-thumbnails, html5, responsive-embeds, wp-block-styles und editor-styles; language_attributes(), body_class(), post_class(), wp_link_pages() und edit_theme_options für Berechtigungen von Optionen; register_nav_menus; wp_head(), wp_body_open(), wp_footer() vorhanden; get_template_part() für wiederholte Teile; Template-Tags anstelle von direkten Abfragen; wp_reset_postdata() nach sekundären Loops; Inhaltsbreite und Bildgrößen deklariert.

Child-Themes

Das Parent-Stylesheet und das Child-Stylesheet mit korrekten Abhängigkeiten einbinden; einzelne Templates überschreiben, anstatt das gesamte Parent zu kopieren; die Version des Childs unabhängig von der des Parents halten; das Parent-functions.php nicht kopieren.

Auslieferung

Installierbares {theme-slug}.zip mit dem Theme-Ordner im Wurzelverzeichnis, readme.txt, screenshot.png (maximal 1200x900, 4:3-Verhältnis), Lizenzhinweisen für jedes gebündelte Asset und einer Zusammenfassung der manuellen Schritte, die noch ausstehen. Referenzen: references/block-theme.md, references/theme-i18n-a11y.md.

Individual skills in this repo

This repo contains 9 individual skills — each has its own dedicated page.

fswp-api-developer

Domain skill for WordPress REST API and Abilities API work in Full-Stack WP Developer. Covers registering routes with schemas, argument validation and sanitization, permission callbacks, controller classes, exposing post types and meta, authentication (cookie nonce, application passwords), pagination and errors, and registering abilities with input and output schemas and safety annotations. Use for any custom endpoint or machine-readable capability in a plugin or theme.

fswp-architect

Planning stage of Full-Stack WP Developer. Classifies the work (new plugin, new theme, update to an existing plugin or theme, add-on for another product, or WordPress Core patch), triages existing code with a bundled detection script, asks one round of essential questions, does competitive research, and produces one reviewable PRD or change brief with a single approval gate. Also covers Migration mode and multi-session handoff docs. Invoked by fswp-developer before any code is written; consult directly for PRD, change-brief, or handoff-doc questions.

fswp-block-developer

Domain skill for WordPress block editor work in Full-Stack WP Developer. Covers building custom Gutenberg blocks (block.json, static and dynamic rendering, attributes, supports, InnerBlocks, variations, deprecations, block bindings), block patterns, and the Interactivity API (data-wp directives, stores, server-side state), with the @wordpress/scripts build workflow. Use for any custom block, pattern, or front-end interactivity in a plugin or theme.

fswp-core-contributor

WordPress Core contribution stage of Full-Stack WP Developer. Guides a contributor through finding or filing a Trac ticket, setting up the wordpress-develop checkout and test environment, writing a patch or GitHub pull request that follows Core coding standards, inline documentation, backward compatibility and tests, and preparing the ticket comment; also routes block-editor changes to the Gutenberg repository and security reports to the private process. Invoked by fswp-developer for Core patches; consult directly for Core workflow questions.

fswp-devops-engineer

Domain skill for WordPress development tooling in Full-Stack WP Developer. Covers local environments (wp-env with Docker, WordPress Playground and Blueprints), command-line site operations (plugin and theme management, database export, search-replace, cron, scaffolding), coding standards and static analysis (PHPCS with WordPress standards, PHPStan with WordPress stubs), PHP and JS testing setup, and the @wordpress/scripts toolchain. Use when setting up, running, or automating a WordPress dev or test environment.

fswp-maintainer

Change stage for existing WordPress code in Full-Stack WP Developer. Updates, fixes, refactors, and upgrades existing plugins and themes without breaking them, and builds add-ons for products you do not own (WooCommerce extensions, page-builder elements, extensions of other plugins) using hooks instead of edits to third-party files. Covers reading before changing, parity lists, deprecation, host compatibility, upgrade paths, and patch delivery. Invoked by fswp-developer after an approved change brief; consult directly for safe-change or add-on questions.

fswp-qa-engineer

Verification stage of Full-Stack WP Developer. Runs the mechanical gate for plugins and themes (house-rule scripts, PHP lint, PHPCS with WordPress standards, PHP compatibility, PHPStan with WordPress stubs), the manual checklist, PRD or change-brief scenario tests, and the pre-release check. Reports PASS, FAIL, or NOT RUN and never implies a skipped check passed. Invoked by fswp-developer after a build and again before delivery; consult directly to audit any plugin or theme folder.

fswp-reviewer

Independent review stage of Full-Stack WP Developer. Reviews a finished WordPress plugin, theme, add-on, or Core patch through a security lens (WordPress-specific vulnerabilities, REST and AJAX authorization with an API risk map, AI-generated-code risks), a quality lens (error handling, data and upgrade safety, performance, i18n, accessibility, comment accuracy, test gaps, class and type design, scope), and an optional lean lens for trimming over-engineering, reporting only high-confidence findings in a fixed format. Invoked by fswp-developer after the verify gate, normally through the fswp-code-reviewer agent; consult directly to review or optimize any WordPress code.

syncwin/fswp-plugin-developer

Plugin build stage of Full-Stack WP Developer. House standards and code templates for real WordPress plugins (not shortcode snippets) - folder anatomy, activation/uninstall lifecycle, custom post types and tables, admin UI tiers, front-end output on the Atomic Framework, REST and cron, i18n, distribution, and the Tier 3 React admin stack - plus a scaffold script. Also the base structure for add-ons. Invoked by fswp-developer after an approved PRD; consult directly for a specific plugin build pattern.

Verwandte Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community