AI coding assistants can produce working code quickly. That does not mean they understand the project.
The most common problems are not syntax errors. They are operational mistakes:
- editing generated files instead of the authoritative source;
- changing a route that search engines already index;
- removing authentication or access controls;
- replacing existing SEO metadata;
- breaking a deployment process;
- changing unrelated services;
- claiming that code was tested when it was not.
A reusable web-development skill gives the assistant a repeatable review and change process before it writes code.
This guide shows how to use a web-development skill for HTML, CSS, JavaScript, PHP, React and Tailwind projects.
What the web-development skill does
The skill defines a safe workflow for code and website work.
It tells the assistant to:
- identify the project and deployment path;
- inspect the framework, routes and build process;
- locate the authoritative source files;
- preserve unrelated functionality;
- propose the smallest suitable change;
- validate the result;
- report what changed and what remains unverified.
The skill does not replace a developer, test suite, staging environment or deployment process. It makes the assistant follow a more reliable procedure.
The first rule: find the authoritative source
Before editing, identify where the real source lives.
Possible locations include:
- a Git repository;
- a Docker build context;
- a PHP application directory;
- a React or Vite source tree;
- a static site source directory;
- a CMS theme or plugin;
- a generated build directory;
- a mounted container volume.
Do not edit dist/, build/, generated assets or container output if another source is used to recreate them.
Useful discovery questions:
- What command builds the application?
- Which directory is deployed?
- Is the live site generated from another project?
- Which container or service serves the files?
- Is there a deployment script or CI workflow?
- Is there a staging environment?
- What files are excluded from version control?
Example request:
Use the web-development skill to inspect this project read-only. Identify the framework, authoritative source directory, build command, deployment path and validation commands. Do not edit anything.Preserve what already works
The assistant should preserve existing behaviour unless the request explicitly changes it.
Check these areas before editing:
Routes and URLs
Do not rename or remove routes without checking:
- internal links;
- external links;
- canonical URLs;
- redirects;
- sitemap entries;
- analytics tracking;
- authentication rules.
SEO metadata
Preserve existing:
- page titles;
- meta descriptions;
- canonical URLs;
- robots directives;
- Open Graph metadata;
- structured data;
- headings;
- image alt text;
- sitemap and RSS references.
Authentication and permissions
Do not weaken or bypass:
- login checks;
- role checks;
- API authentication;
- CSRF protection;
- session handling;
- file upload restrictions;
- server-side validation.
Unrelated services
A request to update a website does not authorise changing:
- Cloudflare;
- DNS;
- Nginx Proxy Manager;
- unrelated containers;
- databases;
- mail services;
- monitoring;
- firewall rules.
HTML and accessibility
For HTML work, the skill should require:
- semantic elements;
- correct heading hierarchy;
- labels for form controls;
- keyboard accessibility;
- visible focus states;
- meaningful link text;
- appropriate image alternative text;
- valid ARIA only when native HTML is insufficient.
Example request:
Use the web-development skill to review the accessibility of this page. Report findings only. Do not modify the HTML.The result should identify the element, explain the issue, and provide a validation method.
CSS and responsive design
For CSS changes, inspect:
- existing layout rules;
- breakpoints;
- design tokens or variables;
- component naming conventions;
- dark mode behaviour;
- print styles;
- overflow and stacking contexts;
- loading and rendering impact.
Prefer a small change that fits the existing system. Do not add a large framework for a one-line layout issue.
Validate at the required viewport sizes and check for:
- horizontal overflow;
- overlapping elements;
- unreadable contrast;
- broken focus indicators;
- layout shift;
- mobile navigation failures.
JavaScript and React
For JavaScript or React work, inspect:
- package manager and lockfile;
- framework version;
- component boundaries;
- state management;
- API calls;
- error handling;
- loading states;
- form validation;
- client-side routing;
- server-side rendering or hydration.
Do not change dependencies without explaining:
- why the dependency is required;
- its version;
- its effect on bundle size;
- its security and maintenance implications;
- the required lockfile change.
Example request:
Use the web-development skill to review this React component for bugs, accessibility and unnecessary re-renders. Do not edit it. Return findings with file and line references.PHP and server-side code
For PHP applications, check:
- PHP version;
- framework and entry point;
- routing;
- environment variables;
- database access;
- authentication;
- input validation;
- output escaping;
- file permissions;
- error logging.
Never place credentials in source files. Use the existing secret or environment-variable mechanism.
Do not apply a PHP change directly to production before confirming backups, deployment method and rollback steps.
Tailwind and utility CSS
For Tailwind projects, inspect:
- Tailwind version;
- content scanning paths;
- configuration;
- custom theme values;
- component conventions;
- generated CSS process.
If a class appears to have no effect, check whether the file is included in the content scan before changing the design.
Review first, edit second
Use two separate requests for important work.
Review request
Use the web-development skill to inspect [PROJECT PATH]. Identify the authoritative source, deployment path, risks and required tests. Read-only. Do not edit files.Change request
Using the findings from the previous review, implement only [EXACT CHANGE]. Preserve routes, authentication, SEO metadata and unrelated services. Show the files changed and run [VALIDATION COMMANDS].This creates a clear boundary between discovery and mutation.
Validation checklist
After a change, validate the relevant layers.
Source validation
- syntax check;
- formatter;
- linter;
- type check;
- unit tests.
Build validation
- production build;
- dependency lockfile consistency;
- generated asset check;
- bundle or asset size check.
Browser validation
- page loads;
- console has no new errors;
- forms work;
- navigation works;
- mobile layout works;
- keyboard access works;
- images and fonts load.
SEO validation
- title and description remain correct;
- canonical remains correct;
- robots behaviour is unchanged;
- structured data remains valid;
- internal links work;
- sitemap remains correct.
Deployment validation
- the intended container or service restarted correctly;
- health endpoint responds;
- logs contain no new errors;
- rollback files are available;
- unrelated services remain unchanged.
Never report a test as passed unless it actually ran and produced a result.
Example SKILL.md
---
name: web-development
description: Review and safely modify HTML, CSS, JavaScript, PHP, React and Tailwind projects while preserving routes, authentication, SEO metadata and unrelated services.
---
# Web Development
Use this skill for website and application development tasks.
1. Identify the authoritative source and deployment path.
2. Inspect the framework, routes, build process and runtime.
3. Preserve content, authentication, SEO metadata and unrelated services.
4. Prefer accessible semantic HTML and small dependency-free changes.
5. Show the files to be changed before editing when the scope is unclear.
6. Return complete code and validation commands.
7. Do not claim tests passed unless they were executed.
8. Ask for approval before production changes, deletion, migrations or service restarts.Who benefits from this skill?
Developers
They get a consistent review and implementation process.
Website owners
They reduce the risk of broken routes, lost SEO metadata and accidental downtime.
Agencies and freelancers
They can standardise handoffs and explain exactly what was changed.
IT managers
They get clearer boundaries between development, deployment and production operations.
Self-hosters
They can use a local model while keeping source code and infrastructure details on the local network.
Limits
The skill cannot:
- see files it was not given;
- access a server without a configured tool or connection;
- know the deployment path without inspection;
- guarantee security from instructions alone;
- replace testing;
- make production changes safely without approval and verification.
The skill improves the process. It does not remove the need for engineering judgment.
Download
Download the web-development skill package.
The package is portable Markdown. The workflow is host-neutral, but the available tools, installation path and invocation syntax depend on the AI tool you use.
Related guides
- How to Create Reusable AI Skills with SKILL.md
- Using AI Skills for Technical SEO, Content and Website Audits
