diff --git a/web/index.html b/web/index.html
index ba73c63..93d1158 100644
--- a/web/index.html
+++ b/web/index.html
@@ -80,11 +80,11 @@
CI/CD Ready
-
🧠
-
Claude Code Skills
+
🤖
+
Agent-Friendly
- Built-in skills teach Claude Code your project conventions.
- Autonomous /dev pipeline from design to shipping.
+ JSON stdout, actionable errors, example-driven help —
+ designed for AI agents to operate reliably.
@@ -99,6 +99,67 @@
Release Automation
+
+
+
+
Built for AI Agents
+
+ AI agents operate your CLI programmatically. This template bakes in the
+ rararulab agent-friendly CLI standards
+ so every generated project is agent-ready from day one.
+
+
+
+
01
+
JSON stdout, logs stderr
+
Structured output on stdout for machine parsing. Human-readable logs on stderr. Never mix formats.
+
+
+
02
+
Fail fast with suggestions
+
Every error includes a suggestion field so agents can self-correct without human intervention.
+
+
+
03
+
Non-interactive first
+
Every parameter passable via flags. No stdin prompts without a flag equivalent. Agents cannot handle dynamic prompts.
+
+
+
04
+
Example-driven help
+
Every subcommand's --help includes runnable examples. Agents pattern-match better than they parse prose.
+
+
+
05
+
Idempotent operations
+
Agents retry frequently. Create operations return success if the resource already exists — no duplicate side effects.
+
+
+
06
+
Dry-run & force bypass
+
Destructive commands support --dry-run. Interactive confirmations have --yes to bypass. Safe automation by default.
+
+
+
+
+
+
+
+
+
+
+
+$ my-cli deploy --env staging
+{"ok": true, "action": "deploy", "deploy_id": "d-123"}
+
+
+$ my-cli deploy
+{"ok": false, "error": "missing --env", "suggestion": "add --env staging or --env prod"}
+
+
+
+
+
@@ -127,9 +188,9 @@
Create Your Own
- - Install instantly via
npx — no Rust required
- - Or generate your own project from the template
- - Claude Code skills guide your development workflow
+ - Install instantly via
npx — no Rust required
+ - Or generate your own project with
cargo generate
+ - Agent-friendly by default — JSON output, actionable errors
diff --git a/web/src/style.css b/web/src/style.css
index 4f7ba9e..c185509 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -229,6 +229,93 @@ html.js .features__grid .reveal:nth-child(6) { transition-delay: 400ms; }
line-height: 1.7;
}
+/* ===== Agent-Friendly Design ===== */
+.agent-design {
+ padding: var(--sp-20) 0;
+ background: var(--color-surface);
+}
+
+.agent-design__intro {
+ max-width: 640px;
+ margin: 0 auto var(--sp-12);
+ text-align: center;
+ font-size: var(--text-lg);
+ color: var(--color-muted);
+ line-height: 1.7;
+}
+
+.agent-design__link {
+ color: var(--color-pop);
+ text-decoration: underline;
+ text-underline-offset: 2px;
+ transition: color var(--motion-fast);
+}
+
+.agent-design__link:hover {
+ color: var(--color-pop-hover);
+}
+
+.principles {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ gap: var(--sp-6);
+ margin-bottom: var(--sp-12);
+}
+
+.principle {
+ padding: var(--sp-6);
+ border-left: 3px solid var(--color-pop);
+ background: var(--color-bg);
+ border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+}
+
+.principle__number {
+ display: inline-block;
+ font-family: var(--font-mono);
+ font-size: var(--text-sm);
+ font-weight: 500;
+ color: var(--color-pop);
+ margin-bottom: var(--sp-2);
+}
+
+.principle__title {
+ font-size: var(--text-base);
+ font-weight: 700;
+ margin-bottom: var(--sp-2);
+}
+
+.principle__desc {
+ color: var(--color-muted);
+ font-size: var(--text-sm);
+ line-height: 1.7;
+}
+
+.agent-design__terminal {
+ max-width: 640px;
+ margin: 0 auto;
+}
+
+.terminal__comment {
+ color: var(--color-muted);
+ font-style: italic;
+}
+
+.terminal__json {
+ color: var(--color-ok);
+}
+
+.terminal__json-err {
+ color: var(--color-pop);
+}
+
+/* Stagger for principles */
+html.js .principles .reveal:nth-child(1) { transition-delay: 0ms; }
+html.js .principles .reveal:nth-child(2) { transition-delay: 80ms; }
+html.js .principles .reveal:nth-child(3) { transition-delay: 160ms; }
+html.js .principles .reveal:nth-child(4) { transition-delay: 240ms; }
+html.js .principles .reveal:nth-child(5) { transition-delay: 320ms; }
+html.js .principles .reveal:nth-child(6) { transition-delay: 400ms; }
+
/* ===== Install / Quickstart ===== */
.install {
padding: var(--sp-20) 0;