web-app-ux-auditor-skill 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude-plugin/plugin.json +23 -0
- package/.codex-plugin/plugin.json +45 -0
- package/LICENSE +21 -0
- package/README.md +187 -0
- package/SKILL.md +60 -0
- package/agents/openai.yaml +4 -0
- package/bin/install.js +255 -0
- package/package.json +56 -0
- package/references/web-ux-audit-reference.md +253 -0
- package/scripts/web_ux_static_scan.py +273 -0
- package/skills/web-app-ux-auditor/SKILL.md +60 -0
- package/skills/web-app-ux-auditor/agents/openai.yaml +4 -0
- package/skills/web-app-ux-auditor/references/web-ux-audit-reference.md +253 -0
- package/skills/web-app-ux-auditor/scripts/web_ux_static_scan.py +273 -0
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "web-app-ux-auditor",
|
|
3
|
+
"description": "Web app UI/UX audit skill for React, Next.js, Vue, Svelte, Angular, accessibility, keyboard focus, forms, onboarding, Core Web Vitals, retention, and conversion improvements.",
|
|
4
|
+
"version": "0.1.0",
|
|
5
|
+
"author": {
|
|
6
|
+
"name": "Ajnas"
|
|
7
|
+
},
|
|
8
|
+
"license": "MIT",
|
|
9
|
+
"keywords": [
|
|
10
|
+
"web",
|
|
11
|
+
"ui",
|
|
12
|
+
"ux",
|
|
13
|
+
"accessibility",
|
|
14
|
+
"react",
|
|
15
|
+
"nextjs",
|
|
16
|
+
"vue",
|
|
17
|
+
"svelte",
|
|
18
|
+
"angular"
|
|
19
|
+
],
|
|
20
|
+
"skills": [
|
|
21
|
+
"./skills/web-app-ux-auditor"
|
|
22
|
+
]
|
|
23
|
+
}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "web-app-ux-auditor",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Agent Skill for auditing and improving web app UI/UX flows across modern frontend stacks.",
|
|
5
|
+
"author": {
|
|
6
|
+
"name": "Ajnas",
|
|
7
|
+
"email": "ajnasnb@gmail.com",
|
|
8
|
+
"url": "https://github.com/AjnasNB"
|
|
9
|
+
},
|
|
10
|
+
"homepage": "https://github.com/AjnasNB/web-app-ux-auditor-skill",
|
|
11
|
+
"repository": "https://github.com/AjnasNB/web-app-ux-auditor-skill",
|
|
12
|
+
"license": "MIT",
|
|
13
|
+
"keywords": [
|
|
14
|
+
"ux",
|
|
15
|
+
"ui",
|
|
16
|
+
"web",
|
|
17
|
+
"accessibility",
|
|
18
|
+
"react",
|
|
19
|
+
"nextjs",
|
|
20
|
+
"vue",
|
|
21
|
+
"svelte",
|
|
22
|
+
"angular",
|
|
23
|
+
"core-web-vitals"
|
|
24
|
+
],
|
|
25
|
+
"skills": "./skills",
|
|
26
|
+
"interface": {
|
|
27
|
+
"displayName": "Web App UX Auditor",
|
|
28
|
+
"shortDescription": "Audit web app UI/UX flows",
|
|
29
|
+
"longDescription": "Review and improve web app navigation, onboarding, accessibility, keyboard focus, forms, responsive behavior, Core Web Vitals, retention, conversion, and state handling across modern frontend stacks.",
|
|
30
|
+
"developerName": "Ajnas",
|
|
31
|
+
"category": "Development",
|
|
32
|
+
"capabilities": [
|
|
33
|
+
"Read",
|
|
34
|
+
"Write",
|
|
35
|
+
"Review"
|
|
36
|
+
],
|
|
37
|
+
"websiteURL": "https://github.com/AjnasNB/web-app-ux-auditor-skill",
|
|
38
|
+
"defaultPrompt": [
|
|
39
|
+
"Audit this web app UX flow.",
|
|
40
|
+
"Improve this onboarding flow.",
|
|
41
|
+
"Review accessibility and Core Web Vitals."
|
|
42
|
+
],
|
|
43
|
+
"brandColor": "#0F766E"
|
|
44
|
+
}
|
|
45
|
+
}
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Ajnas
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,187 @@
|
|
|
1
|
+
# Web App UX Auditor Skill
|
|
2
|
+
|
|
3
|
+
A portable Agent Skill by Ajnas for auditing and improving web app UI/UX flows across React, Next.js, Vue, Nuxt, Svelte, SvelteKit, Angular, Solid, Remix, Astro, and plain HTML/CSS/JavaScript.
|
|
4
|
+
|
|
5
|
+
Use it when you want an AI coding agent to inspect a web app, map real user flows, find UX friction, and propose or implement improvements with evidence instead of generic "make it cleaner" advice.
|
|
6
|
+
|
|
7
|
+
## What it helps with
|
|
8
|
+
|
|
9
|
+
- Navigation, information architecture, route state, browser back/forward, deep links, and re-entry flows.
|
|
10
|
+
- First visit, onboarding, sign-in/sign-up, dashboards, search, checkout, settings, and conversion flows.
|
|
11
|
+
- Forms, validation, autofill, password-manager support, empty/loading/error/offline states.
|
|
12
|
+
- Accessibility: semantic HTML, labels, landmarks, keyboard access, focus management, dialogs, contrast, reduced motion, and screen reader announcements.
|
|
13
|
+
- Responsive behavior across mobile, tablet, desktop, zoomed text, long strings, and RTL/localized content.
|
|
14
|
+
- Performance as UX: Core Web Vitals, LCP, INP, CLS, route transitions, hydration, bundles, and perceived latency.
|
|
15
|
+
- Ethical retention through saved progress, useful reminders, trust, and repeated value.
|
|
16
|
+
- Static code triage with a bundled Python scanner.
|
|
17
|
+
|
|
18
|
+
## Install globally
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
npx web-app-ux-auditor-skill
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
The installer asks where to install:
|
|
25
|
+
|
|
26
|
+
1. Global current user: Claude Code, Codex, and shared Agent Skills.
|
|
27
|
+
2. Current project: local skills plus adapter files for popular coding agents.
|
|
28
|
+
3. Both global and current project.
|
|
29
|
+
4. Custom project path.
|
|
30
|
+
|
|
31
|
+
Global install copies the skill for the current user into:
|
|
32
|
+
|
|
33
|
+
- `~/.claude/skills/web-app-ux-auditor`
|
|
34
|
+
- `~/.agents/skills/web-app-ux-auditor`
|
|
35
|
+
- `~/.codex/skills/web-app-ux-auditor`
|
|
36
|
+
|
|
37
|
+
Restart your agent app after installing.
|
|
38
|
+
|
|
39
|
+
## Use it
|
|
40
|
+
|
|
41
|
+
Claude Code:
|
|
42
|
+
|
|
43
|
+
```text
|
|
44
|
+
/web-app-ux-auditor
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
Codex:
|
|
48
|
+
|
|
49
|
+
```text
|
|
50
|
+
$web-app-ux-auditor
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
Example prompts:
|
|
54
|
+
|
|
55
|
+
```text
|
|
56
|
+
/web-app-ux-auditor audit the signup and dashboard flow in this Next.js app
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
```text
|
|
60
|
+
$web-app-ux-auditor review this checkout flow for accessibility, keyboard UX, and Core Web Vitals
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## Install into one project
|
|
64
|
+
|
|
65
|
+
```bash
|
|
66
|
+
npx web-app-ux-auditor-skill --project .
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
Project install copies the canonical skill into `.claude/skills/` and `.agents/skills/`, then writes adapter rule files for common coding agents:
|
|
70
|
+
|
|
71
|
+
- Cursor
|
|
72
|
+
- Windsurf
|
|
73
|
+
- GitHub Copilot
|
|
74
|
+
- Gemini
|
|
75
|
+
- Continue
|
|
76
|
+
- Cline
|
|
77
|
+
- Roo Code
|
|
78
|
+
- Kiro
|
|
79
|
+
- Trae
|
|
80
|
+
- OpenCode
|
|
81
|
+
|
|
82
|
+
Copy only the skill folders and skip adapter files:
|
|
83
|
+
|
|
84
|
+
```bash
|
|
85
|
+
npx web-app-ux-auditor-skill --project . --no-adapters
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
Skip prompts and force global install:
|
|
89
|
+
|
|
90
|
+
```bash
|
|
91
|
+
npx web-app-ux-auditor-skill --yes
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
## Static scanner
|
|
95
|
+
|
|
96
|
+
The skill includes a Python scanner for static web UX signals:
|
|
97
|
+
|
|
98
|
+
```bash
|
|
99
|
+
python scripts/web_ux_static_scan.py /path/to/web-app
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
The scanner detects review signals such as non-semantic click targets, missing image alt text, placeholder-label risks, missing button types, focus-outline removal, dialog risks, and mobile viewport issues.
|
|
103
|
+
|
|
104
|
+
It is a triage tool, not a replacement for expert review. Confirm every finding in code, browser, screenshots, accessibility tooling, performance traces, or tests before changing behavior.
|
|
105
|
+
|
|
106
|
+
## Package layout
|
|
107
|
+
|
|
108
|
+
```text
|
|
109
|
+
web-app-ux-auditor/
|
|
110
|
+
SKILL.md
|
|
111
|
+
agents/openai.yaml
|
|
112
|
+
references/web-ux-audit-reference.md
|
|
113
|
+
scripts/web_ux_static_scan.py
|
|
114
|
+
skills/web-app-ux-auditor/
|
|
115
|
+
.codex-plugin/plugin.json
|
|
116
|
+
.claude-plugin/plugin.json
|
|
117
|
+
bin/install.js
|
|
118
|
+
package.json
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
The root `SKILL.md` supports direct skill installation. The `skills/web-app-ux-auditor/` copy supports plugin-style discovery.
|
|
122
|
+
|
|
123
|
+
## Publish to GitHub
|
|
124
|
+
|
|
125
|
+
```bash
|
|
126
|
+
gh auth login
|
|
127
|
+
gh repo create AjnasNB/web-app-ux-auditor-skill --public --source . --remote origin --push
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
If the repo already exists:
|
|
131
|
+
|
|
132
|
+
```bash
|
|
133
|
+
git remote add origin https://github.com/AjnasNB/web-app-ux-auditor-skill.git
|
|
134
|
+
git push -u origin main
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
## Download from npm
|
|
138
|
+
|
|
139
|
+
Install and run without keeping the package:
|
|
140
|
+
|
|
141
|
+
```bash
|
|
142
|
+
npx web-app-ux-auditor-skill
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
Install the CLI globally:
|
|
146
|
+
|
|
147
|
+
```bash
|
|
148
|
+
npm install -g web-app-ux-auditor-skill
|
|
149
|
+
web-app-ux-auditor
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
## Publish to npm
|
|
153
|
+
|
|
154
|
+
Log in once:
|
|
155
|
+
|
|
156
|
+
```bash
|
|
157
|
+
npm adduser
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
Check the package:
|
|
161
|
+
|
|
162
|
+
```bash
|
|
163
|
+
npm publish --dry-run --access public
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
Publish:
|
|
167
|
+
|
|
168
|
+
```bash
|
|
169
|
+
npm publish --access public
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
After publishing, users download and install it with:
|
|
173
|
+
|
|
174
|
+
```bash
|
|
175
|
+
npx web-app-ux-auditor-skill
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
Or install the CLI globally:
|
|
179
|
+
|
|
180
|
+
```bash
|
|
181
|
+
npm install -g web-app-ux-auditor-skill
|
|
182
|
+
web-app-ux-auditor --global
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
## License
|
|
186
|
+
|
|
187
|
+
MIT
|
package/SKILL.md
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: web-app-ux-auditor
|
|
3
|
+
description: Use when reviewing, redesigning, or implementing web app UI/UX flows in React, Next.js, Vue, Nuxt, Svelte, SvelteKit, Angular, Solid, Remix, Astro, or plain HTML/CSS/JavaScript; especially for navigation, onboarding, dashboards, forms, checkout, accessibility, keyboard focus, responsive behavior, Core Web Vitals, retention, or conversion.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Web App UX Auditor
|
|
7
|
+
|
|
8
|
+
## Overview
|
|
9
|
+
|
|
10
|
+
Audit web apps by tracing real user flows, finding friction with code and runtime evidence, and proposing or implementing improvements that are accessible, responsive, fast, and easy to navigate. Optimize for users completing valuable tasks and returning because the app works well, not because the interface traps or manipulates them.
|
|
11
|
+
|
|
12
|
+
## Workflow
|
|
13
|
+
|
|
14
|
+
1. State the design read: app type, audience, job-to-be-done, product maturity, visual register, and risk level. For redesigns, preserve working IA, copy, analytics names, and accessibility wins unless there is evidence they cause harm.
|
|
15
|
+
2. If code is available, run the static signal scan before judging:
|
|
16
|
+
```bash
|
|
17
|
+
python scripts/web_ux_static_scan.py <project-root>
|
|
18
|
+
```
|
|
19
|
+
In Claude Code, use `python ${CLAUDE_SKILL_DIR}/scripts/web_ux_static_scan.py <project-root>` when the skill is installed. Treat the script as evidence-gathering, not a replacement for expert review.
|
|
20
|
+
3. Inspect routing, layouts, components, forms, design tokens, analytics events, accessibility tooling, tests, screenshots, and runtime behavior before recommending changes.
|
|
21
|
+
4. Build a compact route and flow map: first visit, onboarding, sign-in/sign-up, home/dashboard, primary task, search/discovery, form submission, settings, empty/error/loading/offline states, checkout/paywall if present, and return/deep-link flows.
|
|
22
|
+
5. Audit against clarity, information architecture, accessibility, keyboard/focus behavior, forms, responsive layout, performance, trust, feedback, and ethical retention. Load `references/web-ux-audit-reference.md` for the detailed checklist and framework-specific code signals.
|
|
23
|
+
6. Rank findings by user impact:
|
|
24
|
+
- P0: Blocks a critical task, causes data loss, breaks auth/payment, or creates severe accessibility failure.
|
|
25
|
+
- P1: Breaks navigation, comprehension, trust, keyboard access, or completion for many users.
|
|
26
|
+
- P2: Adds avoidable friction, inconsistency, poor responsive behavior, or weak performance.
|
|
27
|
+
- P3: Polish, content clarity, delight, or instrumentation improvement.
|
|
28
|
+
7. When editing code, preserve the app's architecture and design system. Prefer semantic HTML, native controls, accessible framework primitives, and existing component patterns over custom widgets.
|
|
29
|
+
8. Verify with the best available evidence: local browser walkthrough, Playwright, screenshots, keyboard-only test, screen reader spot-check, Lighthouse/PageSpeed/Core Web Vitals, axe/accessibility checks, unit/component tests, or static inspection. State anything that could not be verified.
|
|
30
|
+
|
|
31
|
+
## Quality Bar
|
|
32
|
+
|
|
33
|
+
Hold the output to a senior product design engineer standard:
|
|
34
|
+
|
|
35
|
+
- The primary user can understand where they are, what changed, what to do next, and how to recover from mistakes.
|
|
36
|
+
- Core flows handle loading, empty, error, partial, disabled, offline, slow-network, auth-expired, and permission-denied states.
|
|
37
|
+
- The UI has one coherent design system: typography scale, spacing rhythm, radius rules, color roles, interaction states, motion, density, and responsive behavior.
|
|
38
|
+
- Accessibility is built into semantics, keyboard behavior, focus management, contrast, target size, status announcements, and reduced-motion behavior.
|
|
39
|
+
- Performance is part of UX: LCP, INP, CLS, route transitions, hydration, bundle size, and perceived latency all matter.
|
|
40
|
+
- Retention comes from saved progress, useful reminders, reduced effort, trust, and repeated value. Do not optimize for addiction.
|
|
41
|
+
|
|
42
|
+
## Output Format
|
|
43
|
+
|
|
44
|
+
Start with findings, not praise. Include:
|
|
45
|
+
|
|
46
|
+
- A prioritized findings table: severity, route/flow, evidence, user impact, recommended fix.
|
|
47
|
+
- A before/after flow summary when IA, onboarding, forms, or checkout changes.
|
|
48
|
+
- Framework-specific implementation notes for React/Next, Vue/Nuxt, Svelte/SvelteKit, Angular, or plain web as applicable.
|
|
49
|
+
- Static scan findings from `scripts/web_ux_static_scan.py` when code is available.
|
|
50
|
+
- Accessibility, keyboard, responsive, and performance checks.
|
|
51
|
+
- Verification performed and remaining risks.
|
|
52
|
+
|
|
53
|
+
When asked to improve the app directly, implement the smallest high-impact changes first, then report changed files and validation.
|
|
54
|
+
|
|
55
|
+
## Non-Negotiables
|
|
56
|
+
|
|
57
|
+
- Do not recommend dark patterns: hidden cancellation, forced continuity, disguised ads, trick opt-ins, guilt copy, confirmshaming, fake scarcity, notification spam, or broken back/close paths.
|
|
58
|
+
- Do not replace semantic HTML with generic `div`/`span` controls unless the accessible behavior is fully implemented and tested.
|
|
59
|
+
- Do not audit only visual polish when code or a runnable app is available.
|
|
60
|
+
- Do not give generic advice like "improve navigation" without naming the exact route, user problem, and change.
|
package/bin/install.js
ADDED
|
@@ -0,0 +1,255 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
"use strict";
|
|
3
|
+
|
|
4
|
+
const fs = require("fs");
|
|
5
|
+
const os = require("os");
|
|
6
|
+
const path = require("path");
|
|
7
|
+
const readline = require("readline");
|
|
8
|
+
|
|
9
|
+
const SKILL_NAME = "web-app-ux-auditor";
|
|
10
|
+
const DISPLAY_NAME = "Web App UX Auditor";
|
|
11
|
+
const DESCRIPTION =
|
|
12
|
+
"Audit and improve web app UI/UX flows across React, Next.js, Vue, Svelte, Angular, and plain web stacks.";
|
|
13
|
+
|
|
14
|
+
const PACKAGE_ROOT = path.resolve(__dirname, "..");
|
|
15
|
+
const COPY_ENTRIES = ["SKILL.md", "agents", "references", "scripts"];
|
|
16
|
+
|
|
17
|
+
function usage() {
|
|
18
|
+
console.log(`
|
|
19
|
+
${DISPLAY_NAME}
|
|
20
|
+
|
|
21
|
+
Usage:
|
|
22
|
+
npx web-app-ux-auditor-skill
|
|
23
|
+
web-app-ux-auditor --global
|
|
24
|
+
web-app-ux-auditor --project <path>
|
|
25
|
+
web-app-ux-auditor --targets claude,codex,agents
|
|
26
|
+
|
|
27
|
+
Default:
|
|
28
|
+
In an interactive terminal, asks where to install. In non-interactive shells, installs globally.
|
|
29
|
+
|
|
30
|
+
Options:
|
|
31
|
+
--global Install to current-user global skill folders. Default when no mode is passed.
|
|
32
|
+
--project <path> Install project-local skills and adapter rule files for popular coding agents.
|
|
33
|
+
--targets <list> Comma-separated global targets: claude,codex,agents,codex-legacy.
|
|
34
|
+
--yes Skip prompts and install globally.
|
|
35
|
+
--no-adapters With --project, skip non-skill adapter files.
|
|
36
|
+
--print-paths Print install locations and exit.
|
|
37
|
+
--help Show this help.
|
|
38
|
+
`);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
function ensureDir(dir) {
|
|
42
|
+
fs.mkdirSync(dir, { recursive: true });
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
function rmIfExists(target) {
|
|
46
|
+
if (fs.existsSync(target)) {
|
|
47
|
+
fs.rmSync(target, { recursive: true, force: true });
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
function copyEntry(entry, targetDir) {
|
|
52
|
+
const source = path.join(PACKAGE_ROOT, entry);
|
|
53
|
+
if (!fs.existsSync(source)) return;
|
|
54
|
+
const target = path.join(targetDir, entry);
|
|
55
|
+
rmIfExists(target);
|
|
56
|
+
fs.cpSync(source, target, { recursive: true });
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
function copySkillTo(root) {
|
|
60
|
+
const targetDir = path.join(root, SKILL_NAME);
|
|
61
|
+
ensureDir(targetDir);
|
|
62
|
+
for (const entry of COPY_ENTRIES) copyEntry(entry, targetDir);
|
|
63
|
+
return targetDir;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
function globalTargets(selected) {
|
|
67
|
+
const home = os.homedir();
|
|
68
|
+
const all = {
|
|
69
|
+
claude: path.join(home, ".claude", "skills"),
|
|
70
|
+
agents: path.join(home, ".agents", "skills"),
|
|
71
|
+
codex: path.join(home, ".agents", "skills"),
|
|
72
|
+
"codex-legacy": path.join(home, ".codex", "skills")
|
|
73
|
+
};
|
|
74
|
+
const names = selected || ["claude", "agents", "codex-legacy"];
|
|
75
|
+
return [...new Set(names.map((name) => all[name]).filter(Boolean))];
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
function appendBlock(file, marker, body) {
|
|
79
|
+
ensureDir(path.dirname(file));
|
|
80
|
+
const existing = fs.existsSync(file) ? fs.readFileSync(file, "utf8") : "";
|
|
81
|
+
if (existing.includes(marker)) return false;
|
|
82
|
+
const prefix = existing.trim().length ? `${existing.trimEnd()}\n\n` : "";
|
|
83
|
+
fs.writeFileSync(file, `${prefix}${body.trimEnd()}\n`, "utf8");
|
|
84
|
+
return true;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
function writeFile(file, content) {
|
|
88
|
+
ensureDir(path.dirname(file));
|
|
89
|
+
fs.writeFileSync(file, content, "utf8");
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
function adapterText(skillPath) {
|
|
93
|
+
return `# ${DISPLAY_NAME}
|
|
94
|
+
|
|
95
|
+
Use the ${SKILL_NAME} Agent Skill for web app UI/UX reviews, redesigns, navigation audits, onboarding, forms, accessibility, keyboard/focus behavior, Core Web Vitals, retention, and conversion improvements.
|
|
96
|
+
|
|
97
|
+
Canonical skill path in this project: ${skillPath}
|
|
98
|
+
|
|
99
|
+
Follow the skill workflow before recommending changes:
|
|
100
|
+
- inspect code, routes, layouts, components, forms, design tokens, states, accessibility tooling, and runtime behavior;
|
|
101
|
+
- run the bundled static scanner when code is available;
|
|
102
|
+
- rank findings by user impact;
|
|
103
|
+
- verify with browser walkthroughs, keyboard checks, screenshots, performance data, tests, or static evidence.
|
|
104
|
+
`;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
function installProject(projectRoot, withAdapters) {
|
|
108
|
+
const root = path.resolve(projectRoot);
|
|
109
|
+
const claudeSkill = copySkillTo(path.join(root, ".claude", "skills"));
|
|
110
|
+
const agentsSkill = copySkillTo(path.join(root, ".agents", "skills"));
|
|
111
|
+
|
|
112
|
+
if (!withAdapters) return [claudeSkill, agentsSkill];
|
|
113
|
+
|
|
114
|
+
const marker = `<!-- ${SKILL_NAME}:start -->`;
|
|
115
|
+
const block = `${marker}
|
|
116
|
+
${adapterText(`.agents/skills/${SKILL_NAME}/SKILL.md`)}
|
|
117
|
+
<!-- ${SKILL_NAME}:end -->`;
|
|
118
|
+
|
|
119
|
+
writeFile(
|
|
120
|
+
path.join(root, ".cursor", "rules", `${SKILL_NAME}.mdc`),
|
|
121
|
+
`---
|
|
122
|
+
description: ${DESCRIPTION}
|
|
123
|
+
globs: **/*
|
|
124
|
+
alwaysApply: false
|
|
125
|
+
---
|
|
126
|
+
|
|
127
|
+
${adapterText(`.agents/skills/${SKILL_NAME}/SKILL.md`)}`
|
|
128
|
+
);
|
|
129
|
+
writeFile(path.join(root, ".windsurf", "rules", `${SKILL_NAME}.md`), adapterText(`.agents/skills/${SKILL_NAME}/SKILL.md`));
|
|
130
|
+
writeFile(path.join(root, ".continue", "rules", `${SKILL_NAME}.md`), adapterText(`.agents/skills/${SKILL_NAME}/SKILL.md`));
|
|
131
|
+
writeFile(path.join(root, ".clinerules", `${SKILL_NAME}.md`), adapterText(`.agents/skills/${SKILL_NAME}/SKILL.md`));
|
|
132
|
+
writeFile(path.join(root, ".roo", "rules", `${SKILL_NAME}.md`), adapterText(`.agents/skills/${SKILL_NAME}/SKILL.md`));
|
|
133
|
+
writeFile(path.join(root, ".kiro", "steering", `${SKILL_NAME}.md`), adapterText(`.agents/skills/${SKILL_NAME}/SKILL.md`));
|
|
134
|
+
writeFile(path.join(root, ".trae", "rules", `${SKILL_NAME}.md`), adapterText(`.agents/skills/${SKILL_NAME}/SKILL.md`));
|
|
135
|
+
writeFile(path.join(root, ".opencode", "AGENTS.md"), adapterText(`.agents/skills/${SKILL_NAME}/SKILL.md`));
|
|
136
|
+
|
|
137
|
+
appendBlock(path.join(root, "AGENTS.md"), marker, block);
|
|
138
|
+
appendBlock(path.join(root, ".gemini", "GEMINI.md"), marker, block);
|
|
139
|
+
appendBlock(path.join(root, ".github", "copilot-instructions.md"), marker, block);
|
|
140
|
+
|
|
141
|
+
return [claudeSkill, agentsSkill];
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
function parseArgs(argv) {
|
|
145
|
+
const result = {
|
|
146
|
+
global: false,
|
|
147
|
+
project: null,
|
|
148
|
+
targets: null,
|
|
149
|
+
adapters: true,
|
|
150
|
+
printPaths: false,
|
|
151
|
+
help: false,
|
|
152
|
+
yes: false,
|
|
153
|
+
explicitMode: false
|
|
154
|
+
};
|
|
155
|
+
for (let i = 0; i < argv.length; i += 1) {
|
|
156
|
+
const arg = argv[i];
|
|
157
|
+
if (arg === "--help" || arg === "-h") result.help = true;
|
|
158
|
+
else if (arg === "--global") {
|
|
159
|
+
result.global = true;
|
|
160
|
+
result.explicitMode = true;
|
|
161
|
+
}
|
|
162
|
+
else if (arg === "--project") {
|
|
163
|
+
result.project = argv[++i] || ".";
|
|
164
|
+
result.explicitMode = true;
|
|
165
|
+
}
|
|
166
|
+
else if (arg.startsWith("--project=")) {
|
|
167
|
+
result.project = arg.split("=")[1] || ".";
|
|
168
|
+
result.explicitMode = true;
|
|
169
|
+
}
|
|
170
|
+
else if (arg === "--targets") result.targets = (argv[++i] || "").split(",").map((s) => s.trim()).filter(Boolean);
|
|
171
|
+
else if (arg.startsWith("--targets=")) result.targets = arg.split("=")[1].split(",").map((s) => s.trim()).filter(Boolean);
|
|
172
|
+
else if (arg === "--no-adapters") result.adapters = false;
|
|
173
|
+
else if (arg === "--print-paths") result.printPaths = true;
|
|
174
|
+
else if (arg === "--yes" || arg === "-y") result.yes = true;
|
|
175
|
+
}
|
|
176
|
+
if (result.yes && !result.explicitMode) result.global = true;
|
|
177
|
+
if (!result.global && !result.project && !process.stdin.isTTY) result.global = true;
|
|
178
|
+
return result;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
function ask(question) {
|
|
182
|
+
const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
|
|
183
|
+
return new Promise((resolve) => {
|
|
184
|
+
rl.question(question, (answer) => {
|
|
185
|
+
rl.close();
|
|
186
|
+
resolve(answer.trim());
|
|
187
|
+
});
|
|
188
|
+
});
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
async function chooseInstallMode(args) {
|
|
192
|
+
if (args.global || args.project || args.printPaths || args.help) return args;
|
|
193
|
+
if (!process.stdin.isTTY || !process.stdout.isTTY) {
|
|
194
|
+
args.global = true;
|
|
195
|
+
return args;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
console.log(`${DISPLAY_NAME}`);
|
|
199
|
+
console.log("");
|
|
200
|
+
console.log("Where should this skill be installed?");
|
|
201
|
+
console.log("1. Global current user: Claude Code, Codex, and shared Agent Skills");
|
|
202
|
+
console.log("2. Current project: .claude/.agents skills plus adapters for Cursor, Windsurf, Copilot, Gemini, Continue, Cline, Roo, Kiro, Trae, OpenCode");
|
|
203
|
+
console.log("3. Both global current user and current project");
|
|
204
|
+
console.log("4. Custom project path");
|
|
205
|
+
console.log("");
|
|
206
|
+
|
|
207
|
+
const choice = await ask("Choose 1, 2, 3, or 4 [1]: ");
|
|
208
|
+
const selected = choice || "1";
|
|
209
|
+
if (selected === "2") args.project = process.cwd();
|
|
210
|
+
else if (selected === "3") {
|
|
211
|
+
args.global = true;
|
|
212
|
+
args.project = process.cwd();
|
|
213
|
+
} else if (selected === "4") {
|
|
214
|
+
const customPath = await ask("Project path: ");
|
|
215
|
+
args.project = customPath || process.cwd();
|
|
216
|
+
} else {
|
|
217
|
+
args.global = true;
|
|
218
|
+
}
|
|
219
|
+
return args;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
async function main() {
|
|
223
|
+
const args = parseArgs(process.argv.slice(2));
|
|
224
|
+
await chooseInstallMode(args);
|
|
225
|
+
if (args.help) {
|
|
226
|
+
usage();
|
|
227
|
+
return;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
if (args.printPaths) {
|
|
231
|
+
console.log(globalTargets(args.targets).join("\n"));
|
|
232
|
+
return;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
const installed = [];
|
|
236
|
+
if (args.global) {
|
|
237
|
+
for (const target of globalTargets(args.targets)) {
|
|
238
|
+
installed.push(copySkillTo(target));
|
|
239
|
+
}
|
|
240
|
+
}
|
|
241
|
+
if (args.project) {
|
|
242
|
+
installed.push(...installProject(args.project, args.adapters));
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
console.log(`${DISPLAY_NAME} installed:`);
|
|
246
|
+
for (const target of installed) console.log(`- ${target}`);
|
|
247
|
+
console.log("");
|
|
248
|
+
console.log("Claude Code: invoke with /web-app-ux-auditor");
|
|
249
|
+
console.log("Codex: invoke with $web-app-ux-auditor or let Codex choose it automatically.");
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
main().catch((error) => {
|
|
253
|
+
console.error(error && error.stack ? error.stack : String(error));
|
|
254
|
+
process.exitCode = 1;
|
|
255
|
+
});
|
package/package.json
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "web-app-ux-auditor-skill",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Agent Skill for auditing and improving web app UI/UX flows across modern frontend stacks.",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"author": {
|
|
7
|
+
"name": "Ajnas",
|
|
8
|
+
"email": "ajnasnb@gmail.com"
|
|
9
|
+
},
|
|
10
|
+
"type": "commonjs",
|
|
11
|
+
"bin": {
|
|
12
|
+
"web-app-ux-auditor": "bin/install.js",
|
|
13
|
+
"web-app-ux-auditor-skill": "bin/install.js"
|
|
14
|
+
},
|
|
15
|
+
"files": [
|
|
16
|
+
"SKILL.md",
|
|
17
|
+
"agents/",
|
|
18
|
+
"references/",
|
|
19
|
+
"scripts/",
|
|
20
|
+
"skills/",
|
|
21
|
+
"bin/",
|
|
22
|
+
".codex-plugin/",
|
|
23
|
+
".claude-plugin/",
|
|
24
|
+
"README.md",
|
|
25
|
+
"LICENSE"
|
|
26
|
+
],
|
|
27
|
+
"keywords": [
|
|
28
|
+
"agent-skill",
|
|
29
|
+
"claude-code",
|
|
30
|
+
"codex",
|
|
31
|
+
"ux",
|
|
32
|
+
"ui",
|
|
33
|
+
"web",
|
|
34
|
+
"react",
|
|
35
|
+
"nextjs",
|
|
36
|
+
"vue",
|
|
37
|
+
"svelte",
|
|
38
|
+
"angular",
|
|
39
|
+
"accessibility",
|
|
40
|
+
"core-web-vitals"
|
|
41
|
+
],
|
|
42
|
+
"repository": {
|
|
43
|
+
"type": "git",
|
|
44
|
+
"url": "git+https://github.com/AjnasNB/web-app-ux-auditor-skill.git"
|
|
45
|
+
},
|
|
46
|
+
"bugs": {
|
|
47
|
+
"url": "https://github.com/AjnasNB/web-app-ux-auditor-skill/issues"
|
|
48
|
+
},
|
|
49
|
+
"homepage": "https://github.com/AjnasNB/web-app-ux-auditor-skill#readme",
|
|
50
|
+
"publishConfig": {
|
|
51
|
+
"access": "public"
|
|
52
|
+
},
|
|
53
|
+
"engines": {
|
|
54
|
+
"node": ">=16"
|
|
55
|
+
}
|
|
56
|
+
}
|