css-tokens

Agent Skills are specialized knowledge packages that extend AI coding agents' capabilities with domain-specific expertise, best practices, and project patterns. Each skill contains:

• SKILL.md: Core instructions and guidance for the agent
• reference/: Supporting documentation, examples, and patterns

component-scaffolding

Generates component skeletons for Drupal/Twig projects with web components and Miyagi validation. Includes JSON schema and mock data patterns.

component-usage-analysis

Analyzes component dependencies and usage patterns. Provides search patterns for finding usage, checking removal safety, and auditing dependencies.

css-tokens

Provides a foundational set of CSS custom property tokens for design systems. Includes spacing, typography, color, and layout tokens that serve as a starting point for new projects and can be customized per project.

css-coder

CSS authoring guidance emphasizing web standards, accessibility, and performance. Includes patterns for modern CSS syntax, logical properties, and responsive design.

frontend-security

Comprehensive security audit capability for frontend codebases. Identifies XSS, CSRF, DOM vulnerabilities, CSP misconfigurations, and dependency issues. Supports React, Astro, Twig, Node.js, and vanilla web platform. Based on OWASP security guidelines with detailed reference documentation for common vulnerability patterns.

frontend-testing

Write tests that start with acceptance criteria, then add implementation tests for robustness. Use when writing unit tests (Vitest), end-to-end tests (Playwright), visual regression tests, or accessibility tests. Emphasizes user-centric testing, semantic locators, accessibility validation, and the balance between acceptance and implementation testing.

semantic-html

Guidance for well-considered semantic HTML. Emphasizes native HTML elements over ARIA, proper document structure, and accessibility foundations.

Step 1: Add the install script to your project

Copy this prompt to add the installation script:

```

Please copy the install script from https://github.com/schalkneethling/webdev-agent-skills/blob/main/scripts/install-skills.sh

Save it to: scripts/install-skills.sh in the current project root

Then make it executable: chmod +x scripts/install-skills.sh

```

Step 2: Install skills using the script

Copy this prompt to install specific skills:

```

Please install these Agent Skills using the install script:

Skills to install: css-coder, semantic-html, frontend-security, frontend-testing

Run: bash scripts/install-skills.sh "css-coder,semantic-html,frontend-security,frontend-testing"

Install to: .claude/skills/ (default) or specify a different directory as the second argument

```

Notes:

• The parent directory is .claude by convention, but you can use a different name (e.g., .ai, .agent, etc.)
• Skills are installed to [target-dir]/[skill-name]/
• Run the script again anytime to update skills or add new ones
• The script is idempotent—safe to run multiple times

Version Control

To commit customized skills with your project:

• Keep .claude/skills/ in version control
• Your team will get the skills when they clone the repo

To keep skills out of version control:

• Add .claude/skills/ to your .gitignore
• Team members install skills individually

If you use [Cursor IDE](https://cursor.sh/), this repository includes a sync script that converts skills to Cursor's rule format (.mdc files).

Installing the Sync Script

Copy this prompt to add the sync script to your project:

```

Please copy the sync script from https://github.com/schalkneethling/webdev-agent-skills