Agent Plugins Marketplace
← All plugins

webcraft

v0.1.0

Build and improve web applications with React, design guides, accessibility, metadata, rendering performance, screenshots and commit messages.

CodexClaude Code7 Skills

By JaviLicense: MIT1 GitHub starsUpdated 2 weeks ago

Directory evidence

Runtimes
Codex and Claude Code
Parsed components
7 skill or MCP entries
Source updated
Sep 9, 2026
Manifest status
Canonical path parsed

The directory validates manifest shape and source location. It does not execute the plugin or provide a security endorsement. Review the indexing methodology →

Install webcraft for Codex and Claude Code

Installs for the current user
codex plugin marketplace add itsjavi/skills
codex plugin marketplace upgrade local-plugins
codex plugin add webcraft@local-plugins

Paste and run these commands in a terminal with Codex. They add and refresh the local-plugins catalog, then install this plugin.

Compatibility: the page URL and API slug “webcraft” remain stable.

  • Codex: webcraft@agent-plugin-marketplace → webcraft@local-plugins

The installer fetches third-party code from the source repository shown on this page. This directory validates manifest structure and source location, but does not perform a security audit; review the manifest, components, and source before installing.

Get the source manually
git clone https://github.com/itsjavi/skills

Clone the source repository, then follow its setup instructions to add the plugin to a compatible client. The plugin root is plugins/webcraft/.

Plugin files

plugins/webcraft/
├── .codex-plugin/plugin.json
├── .claude-plugin/plugin.json
├── skills/design-guide-authoring/SKILL.md
├── skills/fix-page-metadata/SKILL.md
├── skills/fix-web-accessibility/SKILL.md
├── skills/fix-web-rendering-performance/SKILL.md
├── skills/generate-commit-message/SKILL.md
├── skills/react-development/SKILL.md
└── skills/ui-screenshots/SKILL.md

Included Skills7

design-guide-authoringskills/design-guide-authoring/SKILL.md

Create or update a design guide or design system specification, usually DESIGN.md, for web or mobile interfaces. Use when asked to document visual direction, design tokens, typography, component patterns, or interaction guidelines for developers and agents. Ground the guide in the project's existing design and stack.

fix-page-metadataskills/fix-page-metadata/SKILL.md

Audit and fix HTML metadata including page titles, meta descriptions, canonical URLs, Open Graph tags, Twitter cards, favicons, JSON-LD structured data, and robots directives. Use when adding SEO metadata, fixing social share previews, reviewing Open Graph tags, setting up canonical URLs, or shipping new pages that need correct meta tags.

fix-web-accessibilityskills/fix-web-accessibility/SKILL.md

Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG 2.2 compliance.

fix-web-rendering-performanceskills/fix-web-rendering-performance/SKILL.md

Audit and fix web rendering performance, including animations, scrolling, layout thrashing, and expensive visual effects. Use for janky interactions or costly CSS rendering, such as repeated background blur, backdrop filters, and shadows in lists or grids, even when those effects are not animated.

generate-commit-messageskills/generate-commit-message/SKILL.md

Generate a Conventional Commit message from the repository's staged Git changes. Use when asked to write a commit message, title, or summary. Return only the message in a plaintext code block. Does not stage files or create commits.

react-developmentskills/react-development/SKILL.md

Build, debug, refactor, and review React web apps, components, and hooks. Use for JSX/TSX behavior, state and effects, forms, data fetching, hydration bugs, or React render performance, including React work in Next.js, React Router, and Vite projects. Apply when the task or inspected code involves React; a React dependency alone does not make unrelated backend, tooling, or CSS-only work a match.

ui-screenshotsskills/ui-screenshots/SKILL.md

Capture screenshots and short clips of any web application's UI for visual review, documentation, or pull requests. Use for screenshot requests, before/after comparisons, recording UI interactions, and preparing or attaching visual evidence of a UI change. Adapt to the application's framework, authentication, tooling, and delivery destination.

Plugin manifests2

plugins/webcraft/.codex-plugin/plugin.json
{
  "name": "webcraft",
  "version": "0.1.0",
  "description": "Build and improve web applications with React, design guides, accessibility, metadata, rendering performance, screenshots and commit messages.",
  "author": {
    "name": "Javi"
  },
  "homepage": "https://github.com/itsjavi/skills/tree/main/plugins/webcraft",
  "repository": "https://github.com/itsjavi/skills",
  "license": "MIT",
  "skills": "./skills/",
  "keywords": [
    "web",
    "react",
    "accessibility",
    "design",
    "full-stack"
  ],
  "interface": {
    "displayName": "Webcraft",
    "shortDescription": "Build, refine and review web applications.",
    "longDescription": "Build and improve web applications with React, design guides, accessibility, metadata, rendering performance, screenshots and commit messages.",
    "developerName": "Javi",
    "category": "Productivity",
    "capabilities": [
      "Read",
      "Write"
    ],
    "brandColor": "#52BFF7",
    "defaultPrompt": [
      "Build this web feature using the existing project architecture.",
      "Review this page for accessibility, metadata and performance.",
      "Capture this UI change and draft its commit message."
    ],
    "composerIcon": "./assets/icon.png",
    "logo": "./assets/icon.png",
    "logoDark": "./assets/icon.png"
  }
}
plugins/webcraft/.claude-plugin/plugin.json
{
  "name": "webcraft",
  "version": "0.1.0",
  "description": "Build and improve web applications with React, design guides, accessibility, metadata, rendering performance, screenshots and commit messages.",
  "author": {
    "name": "Javi"
  },
  "homepage": "https://github.com/itsjavi/skills/tree/main/plugins/webcraft",
  "repository": "https://github.com/itsjavi/skills",
  "license": "MIT",
  "skills": "./skills/",
  "keywords": [
    "web",
    "react",
    "accessibility",
    "design",
    "full-stack"
  ]
}

For maintainers

If you maintain this plugin, link to this source-backed listing from your README so users can review its manifest and indexed components.

[webcraft on Agent Plugins Marketplace](https://pluginsmp.com/plugins/webcraft)