agentic-web-developer 2.0.0 → 2.0.2
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/README.md +9 -7
- package/bin/install.js +2 -0
- package/commands/agentic-web-developer-taste.md +18 -0
- package/commands/agentic-web-developer.md +1 -1
- package/docs/EXAMPLES.md +5 -4
- package/docs/INSTALL.md +4 -3
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -13,7 +13,8 @@ Plus a **Mode D** for design-sketch intake — hand over your sketches/wireframe
|
|
|
13
13
|
## What you get
|
|
14
14
|
|
|
15
15
|
- **10-department system** — Strategy (intake, mode, validation) · Research (design DNA + competitor intelligence) · Content (all the copy, agent-written) · Design (UI/UX + generated assets) · Frontend (framework, scaffold, build) · Backend (server-side, *only on request*) · Motion (motion brief + AnimotionJS handoff) · Quality Assurance (conversion, a11y, perf, SEO) · Deployment (ship + verify) · Growth (launch, outreach, monetization) — **one gate per stage, progress footer on every response**, the agent **never runs ahead on assumptions**.
|
|
16
|
-
- **Slash commands** — `/awd-strategy`, `/awd-research`, `/awd-content`, `/awd-design`, `/awd-frontend`, `/awd-backend`, `/awd-motion`, `/awd-qa`, `/awd-deploy`, `/awd-growth
|
|
16
|
+
- **Slash commands** — `/awd-strategy`, `/awd-research`, `/awd-content`, `/awd-design`, `/awd-frontend`, `/awd-backend`, `/awd-motion`, `/awd-qa`, `/awd-deploy`, `/awd-growth`, plus **`/awd-taste`** (taste training — not a department) (full `/agentic-web-developer-*` names and the `/agentic-web-developer` router). Installed globally for **opencode** and **Claude Code**; `--no-commands` to skip.
|
|
17
|
+
- **Taste training** — users *train* the agent's taste into a global profile (`~/.agentic-web-developer/taste-profile.md`: three dials, point of view, annotated idea archive, ban list). The agent reads it before designing, declares a one-line design read, **always proposes 1–3 gated in-style deviations** over the inspiration (declining = faithful recreation), audits the result 0–100 before approval, and files lasting feedback back into the profile — taste compounds across projects, never assumed.
|
|
17
18
|
- **Four modes** — Mode A build-and-sell, Mode B novel idea / product launch, Mode C advanced 3D / WebGL experience, Mode D design-sketch intake.
|
|
18
19
|
- **Dev-mode toolkit (opt-in, removable)** — a live CSS styling toolbar plus a prototyping toolbar (hotspots, viewport switcher, grid/measure, states, annotations), gated behind an ask-first question and wrapped in one flag / one marked block so it's fully stripped before production.
|
|
19
20
|
- **Knowledge base** — 8 distilled technique files from Meng To's public skills (video → analysis prompts, interaction-prompt packs, full-page capture, inspiration bundles, the single-file demo contract, 16 3D techniques, 14 SVG illustration styles, ThreeUI components), indexed so the agent consults them instead of improvising.
|
|
@@ -21,7 +22,7 @@ Plus a **Mode D** for design-sketch intake — hand over your sketches/wireframe
|
|
|
21
22
|
- **Design-tool agnostic** — Figma, Paper, Google Stitch, Google AI Studio, Framer or code-first. You supply the credentials/MCP for your tool of choice.
|
|
22
23
|
- **Framework agnostic** — Next.js, React, Vue, Svelte, Astro, plain HTML, WordPress, GoHighLevel — you pick.
|
|
23
24
|
- **All animation is delegated** to the [AnimotionJS agentic skill](https://skills.animotion.click/checkout) — this skill never writes animation code itself.
|
|
24
|
-
-
|
|
25
|
+
- 16 reference playbooks, 10 department playbooks, a knowledge base (`references/knowledge-base/` — 8 distilled technique files + index), and 8 ready-to-fill templates (builder brief, scaffold HTML, `siteconfig.ts`, outlier anatomy, 3D scene brief, copy, QA report, taste profile).
|
|
25
26
|
|
|
26
27
|
## Install
|
|
27
28
|
|
|
@@ -48,7 +49,7 @@ For **opencode** and **Claude Code**, the installer also writes the **slash comm
|
|
|
48
49
|
|
|
49
50
|
Then **restart your AI agent** so it loads the skill.
|
|
50
51
|
|
|
51
|
-
> **No local agent? Run it in Google AI Studio.** Paste `
|
|
52
|
+
> **No local agent? Run it in Google AI Studio.** Paste `references/ai-studio-system-prompt.md` into **System instructions** (a compact, contract-first router — *not* the raw `SKILL.md`, which browsers tend to ignore), enable the **URL Context** tool (the skill fetches its reference files and validates your key from `skills.animotion.click` — no env vars or file attachments needed), add your key to the system instructions, and build in Canvas. Full setup, department mapping and "it builds anyway" troubleshooting: `references/google-ai-studio.md` in the skill.
|
|
52
53
|
|
|
53
54
|
> **On first run the skill asks for its Pro license key** (or admin credentials) and validates it once per session — or pass it up front with `--license-key=…` and skip the prompt. See [License & unlocking](#license--unlocking-the-skill).
|
|
54
55
|
|
|
@@ -160,6 +161,7 @@ Or jump straight into a department (opencode + Claude Code, after install):
|
|
|
160
161
|
> `/awd-design` — enter the Design department directly
|
|
161
162
|
> `/agentic-web-developer-qa` — full-name form of the same command
|
|
162
163
|
> `/agentic-web-developer` — router (starts at Strategy unless you name a department)
|
|
164
|
+
> `/awd-taste` — train or refine your taste profile (works with or without a project)
|
|
163
165
|
|
|
164
166
|
The agent classifies the project (Mode A: build-and-sell, Mode B: novel idea, Mode C: advanced 3D/WebGL, Mode D: design-sketch intake), then walks you through every gate — one department at a time, with a progress footer on every response.
|
|
165
167
|
|
|
@@ -169,12 +171,12 @@ The agent classifies the project (Mode A: build-and-sell, Mode B: novel idea, Mo
|
|
|
169
171
|
agentic-web-developer/
|
|
170
172
|
├── package.json # npm manifest (bin: agentic-web-developer, awd.source)
|
|
171
173
|
├── bin/install.js # zero-dependency installer CLI (all 15 agents, per-agent formats, slash commands)
|
|
172
|
-
├── commands/ #
|
|
174
|
+
├── commands/ # 12 slash-command files (router + 10 departments + taste trainer; installer derives /awd-* aliases)
|
|
173
175
|
├── skill/ # ← the skill itself (source of truth; never published)
|
|
174
|
-
│ ├── SKILL.md # the router: license gate,
|
|
176
|
+
│ ├── SKILL.md # the router: license gate, 14 non-negotiables, department map, modes, footer spec
|
|
175
177
|
│ ├── departments/ # 10 department playbooks + INDEX + DEPARTMENT-TEMPLATE
|
|
176
|
-
│ ├── references/ #
|
|
177
|
-
│ └── templates/ #
|
|
178
|
+
│ ├── references/ # 16 playbooks (incl. licensing.md, taste-system.md)
|
|
179
|
+
│ └── templates/ # 8 fill-in templates (incl. 3D scene brief, copy, QA report, taste profile)
|
|
178
180
|
├── docs/ # ← the only content tracked in Git
|
|
179
181
|
│ ├── INSTALL.md # install guide for all 15 agents
|
|
180
182
|
│ ├── EXAMPLES.md # worked walkthroughs: Mode A + Mode B
|
package/bin/install.js
CHANGED
|
@@ -699,6 +699,8 @@ Slash commands (opencode + claude, unless --no-commands):
|
|
|
699
699
|
/awd-<dept> short alias (strategy, research, content,
|
|
700
700
|
design, frontend, backend, motion, qa,
|
|
701
701
|
deploy, growth)
|
|
702
|
+
/awd-taste taste training (not a department —
|
|
703
|
+
builds/edits your taste profile any time)
|
|
702
704
|
-> opencode: ~/.config/opencode/command/ claude: ~/.claude/commands/
|
|
703
705
|
|
|
704
706
|
Each agent gets its own file format:
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Agentic Web Developer — Taste training (teach the agent your taste: dials, POV, idea archive, bans)
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
Run the **agentic-web-developer** skill (read its `SKILL.md` first).
|
|
6
|
+
|
|
7
|
+
1. **License gate** — run it before any work (at most once per session).
|
|
8
|
+
2. **This is the taste trainer, not a department** — it runs inside or outside a project, adds no delivery stage, and never blocks the 10-department flow. Read `references/taste-system.md` and `templates/taste-profile-template.md` before asking anything.
|
|
9
|
+
3. **Open the profile** at `~/.agentic-web-developer/taste-profile.md` (browser: the persistent TASTE PROFILE block). Missing → create it from the template. Existing → show a 3-line summary (dials, top bans, last decision-log entry) and offer to refine.
|
|
10
|
+
4. **Pick the session** with one gate (options + recommended default):
|
|
11
|
+
- **Quick train** (default, ~5 min): three dials → 3 idea-archive references annotated *what / why it's good / what to steal* → hates list on top of the standing AI-tell bans.
|
|
12
|
+
- **Deep train** (opt-in, offer once after a quick train): 4–6 forced-choice A/B screen pairs, record each winner **in the user's words**, convert the whys into POV lines and bans.
|
|
13
|
+
- **Refine** (anytime the user arrives with changes): apply their words immediately — e.g. "set density to 8", "never use serif for this brand" — then confirm the diff in one line.
|
|
14
|
+
5. **One question per response**, options + recommended default (derived from their niche if a project is open), record every answer in the profile and stamp `Last updated`.
|
|
15
|
+
6. **Never invent profile entries.** Only the user's words and clearly-labeled defaults. Bans they override get moved to "User-overridden defaults", not deleted.
|
|
16
|
+
7. **Training done:** tell them the profile now applies automatically — Strategy shows it at intake, Research gates deviations against it, Design reads it before producing anything (design read → audit → feedback classified back into the profile). If a project is open, append the **progress footer**; if not, close with one line on what was saved.
|
|
17
|
+
|
|
18
|
+
User arguments: $ARGUMENTS
|
|
@@ -5,7 +5,7 @@ description: Agentic Web Developer — full website system (license-gated; route
|
|
|
5
5
|
Run the **agentic-web-developer** skill (read its `SKILL.md` first).
|
|
6
6
|
|
|
7
7
|
1. **License gate** — run it before any work (SKILL.md → "License gate"), at most once per session.
|
|
8
|
-
2. **Route** — if the user named a department in the arguments (strategy / research / content / design / frontend / backend / motion / qa / deploy / growth), enter that department's file under `departments/` and follow it. Otherwise enter **Strategy** (`departments/strategy.md`) and run its intake — it collects everything later departments need.
|
|
8
|
+
2. **Route** — if the user named a department in the arguments (strategy / research / content / design / frontend / backend / motion / qa / deploy / growth), enter that department's file under `departments/` and follow it. If they named **taste** (or asked to train/refine taste), run `commands/agentic-web-developer-taste.md` instead — it is a trainer, not a department. Otherwise enter **Strategy** (`departments/strategy.md`) and run its intake — it collects everything later departments need.
|
|
9
9
|
3. **Discipline** — self-serve intake from `build-state.md` (ask only what's missing), one gate per stage, record every answer, and append the **progress footer** to every response (SKILL.md → "Progress footer"). Backend runs only if the user asks for it.
|
|
10
10
|
|
|
11
11
|
User arguments: $ARGUMENTS
|
package/docs/EXAMPLES.md
CHANGED
|
@@ -16,10 +16,10 @@ The skill runs the same **10-department flow** in both modes (Backend runs only
|
|
|
16
16
|
|
|
17
17
|
| Department | What happens | The gate (you answer) |
|
|
18
18
|
|---|---|---|
|
|
19
|
-
| **1 Strategy** | Agent records: offer ("pool cleaning, weekly plans"), audience (Phoenix homeowners), mode A, no client list yet, $0/mo tool budget. Runs **M** of M.O.N.E.Y: unsexy niche, 20+ businesses, most sites outdated. Lead pipeline: scrapes 20 Phoenix companies → `leads.csv` | "Confirm the offer/audience — clients yet, or start from zero?" → *"start from zero"* · "Pick the niche: pool cleaning, HVAC, or landscaping?" → *"pool cleaning"* |
|
|
20
|
-
| **2 Research** | **Design Blueprint Extractor** on an inspiration site you name (a clean SaaS-style home-services site) → `builderbrief.md`, `scaffold.html`, `tokens.json
|
|
19
|
+
| **1 Strategy** | Agent records: offer ("pool cleaning, weekly plans"), audience (Phoenix homeowners), mode A, no client list yet, $0/mo tool budget. **Taste:** quick 5-min train offered (3 dials, 3 annotated idea-archive refs, hates) → saved to `~/.agentic-web-developer/taste-profile.md`. Runs **M** of M.O.N.E.Y: unsexy niche, 20+ businesses, most sites outdated. Lead pipeline: scrapes 20 Phoenix companies → `leads.csv` | "Confirm the offer/audience — clients yet, or start from zero?" → *"start from zero"* · "Pick the niche: pool cleaning, HVAC, or landscaping?" → *"pool cleaning"* |
|
|
20
|
+
| **2 Research** | **Design Blueprint Extractor** on an inspiration site you name (a clean SaaS-style home-services site) → `builderbrief.md`, `scaffold.html`, `tokens.json` + **1–3 proposed deviations** (keep → change → because). **Outlier Research** on 12 pool companies → top 5 / bottom 5 → `outlier-anatomy.md` (winners: price-on-site, booking form, reviews above fold; losers: flash intros, no phone number) | "Approve the inspiration site and the outlier findings?" → *"yes, but keep the blue from the inspiration"* · "Approve the deviations?" → *"take #1, decline #2 and #3"* |
|
|
21
21
|
| **3 Content** | Agent drafts every word: H1 options, hero, offer stack, plans, reviews, FAQ, contact — real facts only from you (testimonials, pricing, phone) | "Pick the H1 and confirm the primary CTA" · "Full copy draft — approve or edit?" → *"approve"* |
|
|
22
|
-
| **4 Design** | Tool question → *"Stitch"*. Section plan from the anatomy: hero + phone CTA, stat strip, plans grid, how-it-works, reviews, FAQ, quote form. Asset production: hero image, icons, OG image — all generated | "Which tool — and do you have credentials?" → *"Stitch"* · "Review the design — approve?" → *"approve"* |
|
|
22
|
+
| **4 Design** | Tool question → *"Stitch"*. Design read declared (style × inspiration + approved deviation · variance/motion/density = 7/5/4 · top bans). Section plan from the anatomy: hero + phone CTA, stat strip, plans grid, how-it-works, reviews, FAQ, quote form. Asset production: hero image, icons, OG image — all generated. Taste audit: **84/100** before the gate | "Which tool — and do you have credentials?" → *"Stitch"* · "Review the design — approve?" → *"approve"* |
|
|
23
23
|
| **5 Frontend** | Framework question → *"plain HTML/CSS + a bit of JS"* (cheap hosting). Dev-toolkit offer → *"no"*. Page(s) built 1:1 from the design, content from `siteconfig.ts`, hero iterated until the pool photo leaves room for the headline | "Look at localhost — review?" → *"looks good"* |
|
|
24
24
|
| **7 Motion** | You're told **all motion goes to AnimotionJS**: hero reveal, scroll reveals, plan-card hover, counter on the stat strip → motion brief written and handed to the Animotion skill | "Animotion installed? Approve the motion brief?" → *"installed, approved"* |
|
|
25
25
|
| **8 Quality Assurance** | Conversion blueprint + UI/UX checklist: H1 "Pool Cleaning That Never Misses a Week" (6 words), AA contrast, form tested, mobile widths; web-quality audit (Lighthouse/CWV/a11y/SEO); `qa-report.md` | "QA passed — approve?" → *"approve"* |
|
|
@@ -58,7 +58,8 @@ The skill runs the same **10-department flow** in both modes (Backend runs only
|
|
|
58
58
|
|
|
59
59
|
## What's identical in both modes
|
|
60
60
|
|
|
61
|
-
- Inspiration-site **design DNA extraction** and **brand-style extraction** (Research)
|
|
61
|
+
- Inspiration-site **design DNA extraction** and **brand-style extraction** (Research) — always followed by **1–3 gated in-style deviations**, so the result evolves the inspiration instead of copying it
|
|
62
|
+
- The **taste profile** (read before design, audit before approval, lasting feedback filed back) — train or refine it any time with `/awd-taste`
|
|
62
63
|
- The conversion blueprint and QA checklists (Content + Quality Assurance)
|
|
63
64
|
- Deployment (Deployment — the user always picks the target)
|
|
64
65
|
- **The animation rule:** no motion code is ever written by this skill — Motion hands a motion brief to the **AnimotionJS agentic skill** for all 15 supported agents
|
package/docs/INSTALL.md
CHANGED
|
@@ -49,15 +49,16 @@ Alongside the skill, the installer writes the command files to the agent's globa
|
|
|
49
49
|
| opencode | `~/.config/opencode/command/` (or `~/.opencode/command/`) |
|
|
50
50
|
| Claude Code | `~/.claude/commands/` |
|
|
51
51
|
|
|
52
|
-
Commands installed (
|
|
52
|
+
Commands installed (23 files — 12 sources, `awd-*` aliases derived automatically):
|
|
53
53
|
|
|
54
54
|
| Command | Does |
|
|
55
55
|
|---|---|
|
|
56
56
|
| `/agentic-web-developer` | Router — license gate, then Strategy (or the department named in the arguments) |
|
|
57
57
|
| `/agentic-web-developer-strategy` … `-growth` | Enter one of the 10 departments by full name |
|
|
58
58
|
| `/awd-strategy` … `/awd-growth` | The same 10 departments, short alias |
|
|
59
|
+
| `/agentic-web-developer-taste` · `/awd-taste` | Taste training — build or refine the taste profile (works with or without a project; not a department) |
|
|
59
60
|
|
|
60
|
-
Departments: `strategy` · `research` · `content` · `design` · `frontend` · `backend` · `motion` · `qa` · `deploy` · `growth
|
|
61
|
+
Departments: `strategy` · `research` · `content` · `design` · `frontend` · `backend` · `motion` · `qa` · `deploy` · `growth` — plus the standalone taste trainer (`taste`). Skip with `--no-commands`; refresh with `--force`. Agents other than opencode/claude still get the full skill — they just enter departments by asking ("use the Design department") instead of a slash command.
|
|
61
62
|
|
|
62
63
|
## Skill source
|
|
63
64
|
|
|
@@ -131,7 +132,7 @@ Get the skill folder itself (the package doesn't contain it — take it from you
|
|
|
131
132
|
|
|
132
133
|
AI Studio has no file system to install into — the skill runs there via paste + URL fetch instead:
|
|
133
134
|
|
|
134
|
-
1. Paste `
|
|
135
|
+
1. Paste the skill's `references/ai-studio-system-prompt.md` (the paste-ready contract — **not** the raw `SKILL.md`) into AI Studio's **System instructions**.
|
|
135
136
|
2. Enable the **URL Context** tool — the skill uses it to validate your license and fetch each reference file from `skills.animotion.click` with your key (no env vars, no file attachments).
|
|
136
137
|
3. Add your license key (or admin pair) to the System instructions, or paste it when the gate asks.
|
|
137
138
|
4. Build in **Canvas** as a single HTML file, then **Download the code** and deploy.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "agentic-web-developer",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.2",
|
|
4
4
|
"description": "Department-based agentic skill for building high-converting websites that sell — 10 departments (Strategy, Research, Content, Design, Frontend, Backend, Motion, QA, Deploy, Growth) with slash commands (/awd-*), design DNA extraction, outlier competitor research, conversion blueprints, the M.O.N.E.Y sales framework, lead generation, cloning, outreach and deployment, plus product-launch, 3D/WebGL and design-sketch modes. All animation work is delegated to the AnimotionJS agentic skill.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"opencode",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
},
|
|
41
41
|
"license": "UNLICENSED",
|
|
42
42
|
"awd": {
|
|
43
|
-
"source": "https://4e2zaktqel.ucarecd.net/
|
|
43
|
+
"source": "https://4e2zaktqel.ucarecd.net/effbeb93-f837-4adb-8fad-e55f4363e4d8/skilltar.gz"
|
|
44
44
|
},
|
|
45
45
|
"publishConfig": {
|
|
46
46
|
"access": "public"
|