Design Systems
Bold aesthetic direction guidance for web design. Use when making creative decisions about typography, color, motion, spatial composition, and overall visual…
Install
Quick install
npx skills add https://github.com/automattic/wordpress-agent-skills/tree/HEAD/skills/design-systems
Or pick agent:
npx skills add automattic/wordpress-agent-skills --skill design-systems --agent claude-codenpx skills add automattic/wordpress-agent-skills --skill design-systems --agent cursornpx skills add automattic/wordpress-agent-skills --skill design-systems --agent codexnpx skills add automattic/wordpress-agent-skills --skill design-systems --agent opencodenpx skills add automattic/wordpress-agent-skills --skill design-systems --agent github-copilotnpx skills add automattic/wordpress-agent-skills --skill design-systems --agent windsurfMore install options
Shorthand — useful for multi-skill repos:
npx skills add automattic/wordpress-agent-skills --skill design-systemsManual — clone the repo and drop the folder into your agent's skills directory:
git clone https://github.com/automattic/wordpress-agent-skills.gitcp -r wordpress-agent-skills/skills/design-systems ~/.claude/skills/
How to use: Once installed, ask your agent to "use the design-systems skill" or describe what you want (e.g. "Bold aesthetic direction guidance for web design. Use when making creative decis"). Requires Node.js 18+.
design-systems
Bold aesthetic direction guidance for web design. Use when making creative decisions about typography, color, motion, spatial composition, and overall visual…
design-systemsby automattic
Bold aesthetic direction guidance for web design. Use when making creative decisions about typography, color, motion, spatial composition, and overall visual…npx skills add https://github.com/automattic/wordpress-agent-skills --skill design-systemsDownload ZIPGitHub
More skills from automattic
studio-cliby automatticUse the Studio CLI to manage local WordPress sites, authentication, and preview sites. Invoke this skill when you need to run Studio CLI commands, manage…wp-project-triageby automatticUse when you need a deterministic inspection of a WordPress repository (plugin/theme/block theme/WP core/Gutenberg/full site) including tooling/tests/version…wp-rest-apiby automatticUse when building, extending, or debugging WordPress REST API endpoints/routes: register_rest_route, WP_REST_Controller/controller classes, schema/argument…wp-wpcli-and-opsby automatticUse when working with WP-CLI (wp) for WordPress operations: safe search-replace, db export/import, plugin/theme/user/content management, cron, cache flushing,…wpdsby automatticUse when building UIs leveraging the WordPress Design System (WPDS) and its components, tokens, patterns, etc.radical-pipelinesby automatticExecute a software engineering task by running it through six sequential phases (Prompt → Spec → Design doc → Implementation plan → Implementation →…wordpress-routerby automatticUse when the user asks about WordPress codebases (plugins, themes, block themes, Gutenberg blocks, WP core checkouts) and you need to quickly classify the repo…wp-abilities-apiby automatticUse when working with the WordPress Abilities API (wp_register_ability, wp_register_ability_category, /wp-json/wp-abilities/v1/*, @wordpress/abilities)…---
Source: https://github.com/automattic/wordpress-agent-skills/tree/HEAD/skills/design-systems
Author: automattic
Discovered via: mcpservers.org
SKILL.md source
--- name: design-systems description: Bold aesthetic direction guidance for web design. Use when making creative decisions about typography, color, motion, spatial composition, and overall visual… --- # design-systems Bold aesthetic direction guidance for web design. Use when making creative decisions about typography, color, motion, spatial composition, and overall visual… # design-systemsby automattic Bold aesthetic direction guidance for web design. Use when making creative decisions about typography, color, motion, spatial composition, and overall visual… `npx skills add https://github.com/automattic/wordpress-agent-skills --skill design-systems`Download ZIPGitHub ## More skills from automattic studio-cliby automatticUse the Studio CLI to manage local WordPress sites, authentication, and preview sites. Invoke this skill when you need to run Studio CLI commands, manage…wp-project-triageby automatticUse when you need a deterministic inspection of a WordPress repository (plugin/theme/block theme/WP core/Gutenberg/full site) including tooling/tests/version…wp-rest-apiby automatticUse when building, extending, or debugging WordPress REST API endpoints/routes: register_rest_route, WP_REST_Controller/controller classes, schema/argument…wp-wpcli-and-opsby automatticUse when working with WP-CLI (wp) for WordPress operations: safe search-replace, db export/import, plugin/theme/user/content management, cron, cache flushing,…wpdsby automatticUse when building UIs leveraging the WordPress Design System (WPDS) and its components, tokens, patterns, etc.radical-pipelinesby automatticExecute a software engineering task by running it through six sequential phases (Prompt → Spec → Design doc → Implementation plan → Implementation →…wordpress-routerby automatticUse when the user asks about WordPress codebases (plugins, themes, block themes, Gutenberg blocks, WP core checkouts) and you need to quickly classify the repo…wp-abilities-apiby automatticUse when working with the WordPress Abilities API (wp_register_ability, wp_register_ability_category, /wp-json/wp-abilities/v1/*, @wordpress/abilities)… --- **Source**: https://github.com/automattic/wordpress-agent-skills/tree/HEAD/skills/design-systems **Author**: automattic **Discovered via**: mcpservers.org