azclaude-copilot 0.4.19 → 0.4.21
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/marketplace.json +27 -27
- package/.claude-plugin/plugin.json +17 -17
- package/README.md +2 -2
- package/bin/cli.js +1 -1
- package/package.json +1 -1
- package/templates/skills/frontend-design/SKILL.md +169 -0
- package/templates/skills/frontend-design/references/aesthetic-directions.md +26 -0
- package/templates/skills/skill-creator/references/skill-engineering-guide.md +32 -1
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "azclaude-marketplace",
|
|
3
|
-
"description": "AZCLAUDE — A complete AI coding environment for Claude Code",
|
|
4
|
-
"owner": {
|
|
5
|
-
"name": "haytamAroui",
|
|
6
|
-
"url": "https://github.com/haytamAroui"
|
|
7
|
-
},
|
|
8
|
-
"plugins": [
|
|
9
|
-
{
|
|
10
|
-
"name": "azclaude",
|
|
11
|
-
"description": "AZCLAUDE is a complete AI coding environment for Claude Code. It installs 33 commands, 8 auto-invoked skills, 13 specialized agents, 4 hooks, and a persistent memory system — in one command.\n\nKey features:\n• Memory across sessions — goals.md + checkpoints injected automatically before every session\n• Self-improving loop — /reflect fixes stale CLAUDE.md rules, /reflexes learns from tool-use patterns, /evolve creates agents from git evidence\n• Autonomous copilot mode — /copilot runs a three-tier team (orchestrator → problem-architect → milestone-builder) across sessions until the product ships\n• Spec-driven workflow — /constitute writes project rules, /spec writes structured ACs, /analyze detects plan drift and ghost milestones, /blueprint traces every milestone to a spec\n• Security layer — 102-rule environment scan (/sentinel), pre-write secret blocking, pre-ship credential audit\n• Progressive levels 0–10 — start with CLAUDE.md, grow into multi-agent pipelines and self-evolving environments\n• Zero dependencies — no npm packages, no external APIs, no vector databases. Plain markdown files and Claude Code's native architecture.\n• Smart install — npx azclaude-copilot@latest auto-detects first install vs upgrade vs verify. Context-aware onboarding shows the right next command for your project state.\n\nExample use cases:\n• /setup — scan an existing project, detect stack + domain + scale, fill CLAUDE.md, generate project-specific skills and agents automatically\n• /copilot \"Build a compliance SaaS with trilingual support\" — walk away, come back to working code across multiple sessions\n• /sentinel — run a scored security audit (0–100, grade A–F) across hooks, permissions, MCP servers, agent configs, and secrets\n• /evolve — detect gaps in the environment, generate new skills and agents from git co-change evidence, report score delta (e.g. 42/100 → 68/100)\n• /constitute — write your project's constitution (non-negotiables, architectural commitments, definition of done) — gates all future AI actions\n• /analyze — cross-artifact consistency check: ghost milestones, spec vs. code drift, unplanned commits\n• /reflect — find stale, missing, or contradicting rules in CLAUDE.md and propose exact fixes\n• /debate \"REST vs GraphQL for this project\" — adversarial evidence-based decision with order-independent scoring, logged to decisions.md",
|
|
12
|
-
"version": "0.4.
|
|
13
|
-
"source": {
|
|
14
|
-
"source": "github",
|
|
15
|
-
"repo": "haytamAroui/AZ-CLAUDE-COPILOT",
|
|
16
|
-
"ref": "main"
|
|
17
|
-
},
|
|
18
|
-
"author": {
|
|
19
|
-
"name": "haytamAroui",
|
|
20
|
-
"url": "https://github.com/haytamAroui"
|
|
21
|
-
},
|
|
22
|
-
"homepage": "https://github.com/haytamAroui/AZ-CLAUDE-COPILOT/blob/main/DOCS.md",
|
|
23
|
-
"license": "MIT",
|
|
24
|
-
"keywords": ["memory", "setup", "agents", "commands", "hooks", "domain-aware", "spec-driven", "constitution", "copilot"]
|
|
25
|
-
}
|
|
26
|
-
]
|
|
27
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "azclaude-marketplace",
|
|
3
|
+
"description": "AZCLAUDE — A complete AI coding environment for Claude Code",
|
|
4
|
+
"owner": {
|
|
5
|
+
"name": "haytamAroui",
|
|
6
|
+
"url": "https://github.com/haytamAroui"
|
|
7
|
+
},
|
|
8
|
+
"plugins": [
|
|
9
|
+
{
|
|
10
|
+
"name": "azclaude",
|
|
11
|
+
"description": "AZCLAUDE is a complete AI coding environment for Claude Code. It installs 33 commands, 8 auto-invoked skills, 13 specialized agents, 4 hooks, and a persistent memory system — in one command.\n\nKey features:\n• Memory across sessions — goals.md + checkpoints injected automatically before every session\n• Self-improving loop — /reflect fixes stale CLAUDE.md rules, /reflexes learns from tool-use patterns, /evolve creates agents from git evidence\n• Autonomous copilot mode — /copilot runs a three-tier team (orchestrator → problem-architect → milestone-builder) across sessions until the product ships\n• Spec-driven workflow — /constitute writes project rules, /spec writes structured ACs, /analyze detects plan drift and ghost milestones, /blueprint traces every milestone to a spec\n• Security layer — 102-rule environment scan (/sentinel), pre-write secret blocking, pre-ship credential audit\n• Progressive levels 0–10 — start with CLAUDE.md, grow into multi-agent pipelines and self-evolving environments\n• Zero dependencies — no npm packages, no external APIs, no vector databases. Plain markdown files and Claude Code's native architecture.\n• Smart install — npx azclaude-copilot@latest auto-detects first install vs upgrade vs verify. Context-aware onboarding shows the right next command for your project state.\n\nExample use cases:\n• /setup — scan an existing project, detect stack + domain + scale, fill CLAUDE.md, generate project-specific skills and agents automatically\n• /copilot \"Build a compliance SaaS with trilingual support\" — walk away, come back to working code across multiple sessions\n• /sentinel — run a scored security audit (0–100, grade A–F) across hooks, permissions, MCP servers, agent configs, and secrets\n• /evolve — detect gaps in the environment, generate new skills and agents from git co-change evidence, report score delta (e.g. 42/100 → 68/100)\n• /constitute — write your project's constitution (non-negotiables, architectural commitments, definition of done) — gates all future AI actions\n• /analyze — cross-artifact consistency check: ghost milestones, spec vs. code drift, unplanned commits\n• /reflect — find stale, missing, or contradicting rules in CLAUDE.md and propose exact fixes\n• /debate \"REST vs GraphQL for this project\" — adversarial evidence-based decision with order-independent scoring, logged to decisions.md",
|
|
12
|
+
"version": "0.4.19",
|
|
13
|
+
"source": {
|
|
14
|
+
"source": "github",
|
|
15
|
+
"repo": "haytamAroui/AZ-CLAUDE-COPILOT",
|
|
16
|
+
"ref": "main"
|
|
17
|
+
},
|
|
18
|
+
"author": {
|
|
19
|
+
"name": "haytamAroui",
|
|
20
|
+
"url": "https://github.com/haytamAroui"
|
|
21
|
+
},
|
|
22
|
+
"homepage": "https://github.com/haytamAroui/AZ-CLAUDE-COPILOT/blob/main/DOCS.md",
|
|
23
|
+
"license": "MIT",
|
|
24
|
+
"keywords": ["memory", "setup", "agents", "commands", "hooks", "domain-aware", "spec-driven", "constitution", "copilot"]
|
|
25
|
+
}
|
|
26
|
+
]
|
|
27
|
+
}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "azclaude",
|
|
3
|
-
"version": "0.4.
|
|
4
|
-
"description": "AZCLAUDE is a complete AI coding environment for Claude Code. It installs 33 commands, 8 auto-invoked skills, 13 specialized agents, 4 hooks, and a persistent memory system — in one command.\n\nKey features:\n• Memory across sessions — goals.md + checkpoints injected automatically before every session\n• Self-improving loop — /reflect fixes stale CLAUDE.md rules, /reflexes learns from tool-use patterns, /evolve creates agents from git evidence\n• Autonomous copilot mode — /copilot runs a three-tier team (orchestrator → problem-architect → milestone-builder) across sessions until the product ships\n• Spec-driven workflow — /constitute writes project rules, /spec writes structured ACs, /analyze detects plan drift and ghost milestones, /blueprint traces every milestone to a spec\n• Security layer — 102-rule environment scan (/sentinel), pre-write secret blocking, pre-ship credential audit\n• Progressive levels 0–10 — start with CLAUDE.md, grow into multi-agent pipelines and self-evolving environments\n• Zero dependencies — no npm packages, no external APIs, no vector databases. Plain markdown files and Claude Code's native architecture.\n• Smart install — npx azclaude-copilot@latest auto-detects first install vs upgrade vs verify. Context-aware onboarding shows the right next command for your project state.\n\nExample use cases:\n• /setup — scan an existing project, detect stack + domain + scale, fill CLAUDE.md, generate project-specific skills and agents automatically\n• /copilot \"Build a compliance SaaS with trilingual support\" — walk away, come back to working code across multiple sessions\n• /sentinel — run a scored security audit (0–100, grade A–F) across hooks, permissions, MCP servers, agent configs, and secrets\n• /evolve — detect gaps in the environment, generate new skills and agents from git co-change evidence, report score delta (e.g. 42/100 → 68/100)\n• /constitute — write your project's constitution (non-negotiables, architectural commitments, definition of done) — gates all future AI actions\n• /analyze — cross-artifact consistency check: ghost milestones, spec vs. code drift, unplanned commits\n• /reflect — find stale, missing, or contradicting rules in CLAUDE.md and propose exact fixes\n• /debate \"REST vs GraphQL for this project\" — adversarial evidence-based decision with order-independent scoring, logged to decisions.md",
|
|
5
|
-
"author": {
|
|
6
|
-
"name": "haytamAroui",
|
|
7
|
-
"url": "https://github.com/haytamAroui"
|
|
8
|
-
},
|
|
9
|
-
"homepage": "https://github.com/haytamAroui/AZ-CLAUDE-COPILOT/blob/main/DOCS.md",
|
|
10
|
-
"repository": "https://github.com/haytamAroui/AZ-CLAUDE-COPILOT",
|
|
11
|
-
"license": "MIT",
|
|
12
|
-
"keywords": ["memory", "setup", "agents", "commands", "context", "lazy-loading", "hooks", "domain-aware"],
|
|
13
|
-
"commands": "./templates/commands/",
|
|
14
|
-
"skills": "./templates/skills/",
|
|
15
|
-
"agents": "./templates/agents/",
|
|
16
|
-
"hooks": "./templates/hooks/hooks.json"
|
|
17
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "azclaude",
|
|
3
|
+
"version": "0.4.19",
|
|
4
|
+
"description": "AZCLAUDE is a complete AI coding environment for Claude Code. It installs 33 commands, 8 auto-invoked skills, 13 specialized agents, 4 hooks, and a persistent memory system — in one command.\n\nKey features:\n• Memory across sessions — goals.md + checkpoints injected automatically before every session\n• Self-improving loop — /reflect fixes stale CLAUDE.md rules, /reflexes learns from tool-use patterns, /evolve creates agents from git evidence\n• Autonomous copilot mode — /copilot runs a three-tier team (orchestrator → problem-architect → milestone-builder) across sessions until the product ships\n• Spec-driven workflow — /constitute writes project rules, /spec writes structured ACs, /analyze detects plan drift and ghost milestones, /blueprint traces every milestone to a spec\n• Security layer — 102-rule environment scan (/sentinel), pre-write secret blocking, pre-ship credential audit\n• Progressive levels 0–10 — start with CLAUDE.md, grow into multi-agent pipelines and self-evolving environments\n• Zero dependencies — no npm packages, no external APIs, no vector databases. Plain markdown files and Claude Code's native architecture.\n• Smart install — npx azclaude-copilot@latest auto-detects first install vs upgrade vs verify. Context-aware onboarding shows the right next command for your project state.\n\nExample use cases:\n• /setup — scan an existing project, detect stack + domain + scale, fill CLAUDE.md, generate project-specific skills and agents automatically\n• /copilot \"Build a compliance SaaS with trilingual support\" — walk away, come back to working code across multiple sessions\n• /sentinel — run a scored security audit (0–100, grade A–F) across hooks, permissions, MCP servers, agent configs, and secrets\n• /evolve — detect gaps in the environment, generate new skills and agents from git co-change evidence, report score delta (e.g. 42/100 → 68/100)\n• /constitute — write your project's constitution (non-negotiables, architectural commitments, definition of done) — gates all future AI actions\n• /analyze — cross-artifact consistency check: ghost milestones, spec vs. code drift, unplanned commits\n• /reflect — find stale, missing, or contradicting rules in CLAUDE.md and propose exact fixes\n• /debate \"REST vs GraphQL for this project\" — adversarial evidence-based decision with order-independent scoring, logged to decisions.md",
|
|
5
|
+
"author": {
|
|
6
|
+
"name": "haytamAroui",
|
|
7
|
+
"url": "https://github.com/haytamAroui"
|
|
8
|
+
},
|
|
9
|
+
"homepage": "https://github.com/haytamAroui/AZ-CLAUDE-COPILOT/blob/main/DOCS.md",
|
|
10
|
+
"repository": "https://github.com/haytamAroui/AZ-CLAUDE-COPILOT",
|
|
11
|
+
"license": "MIT",
|
|
12
|
+
"keywords": ["memory", "setup", "agents", "commands", "context", "lazy-loading", "hooks", "domain-aware"],
|
|
13
|
+
"commands": "./templates/commands/",
|
|
14
|
+
"skills": "./templates/skills/",
|
|
15
|
+
"agents": "./templates/agents/",
|
|
16
|
+
"hooks": "./templates/hooks/hooks.json"
|
|
17
|
+
}
|
package/README.md
CHANGED
|
@@ -807,11 +807,11 @@ Run `/level-up` at any time to see your current level and build the next one.
|
|
|
807
807
|
|
|
808
808
|
## Verified
|
|
809
809
|
|
|
810
|
-
|
|
810
|
+
1366 tests. Every template, command, capability, agent, hook, and CLI feature verified.
|
|
811
811
|
|
|
812
812
|
```bash
|
|
813
813
|
bash tests/test-features.sh
|
|
814
|
-
# Results:
|
|
814
|
+
# Results: 1366 passed, 0 failed, 1366 total
|
|
815
815
|
```
|
|
816
816
|
|
|
817
817
|
---
|
package/bin/cli.js
CHANGED
|
@@ -373,7 +373,7 @@ function installCommands(projectDir, cfg) {
|
|
|
373
373
|
|
|
374
374
|
// ─── Skills (SKILL.md — model-auto-invoked) ──────────────────────────────────
|
|
375
375
|
|
|
376
|
-
const SKILLS = ['session-guard', 'test-first', 'env-scanner', 'debate', 'security', 'skill-creator', 'agent-creator', 'architecture-advisor'];
|
|
376
|
+
const SKILLS = ['session-guard', 'test-first', 'env-scanner', 'debate', 'security', 'skill-creator', 'agent-creator', 'architecture-advisor', 'frontend-design'];
|
|
377
377
|
|
|
378
378
|
function installSkills(projectDir, cfg) {
|
|
379
379
|
const skillsDir = path.join(projectDir, cfg, 'skills');
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "azclaude-copilot",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.21",
|
|
4
4
|
"description": "AI coding environment — 33 commands, 8 skills, 13 agents, memory, reflexes, evolution. Install: npx azclaude-copilot@latest, then open Claude Code.",
|
|
5
5
|
"bin": {
|
|
6
6
|
"azclaude": "bin/cli.js",
|
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: frontend-design
|
|
3
|
+
description: >
|
|
4
|
+
Production-grade, visually distinctive frontend interfaces. Use when building
|
|
5
|
+
a landing page, creating a dashboard, designing a React component, making a
|
|
6
|
+
website, building something visually striking, creating a UI, designing a
|
|
7
|
+
poster, or when the user says "build me a site", "make this look good",
|
|
8
|
+
"design a page", "create a frontend", "visually striking", "beautiful UI",
|
|
9
|
+
"modern design", or any task where the primary deliverable is a rendered
|
|
10
|
+
interface. Also fires when /copilot reaches a milestone whose files include
|
|
11
|
+
index.html, .jsx, .tsx, .css, or .scss.
|
|
12
|
+
Do NOT trigger when: user asks to review existing UI (use code-reviewer),
|
|
13
|
+
request is code-only with no visual deliverable, or a strict brand guide
|
|
14
|
+
already defines all visual decisions.
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
# Frontend Design Skill
|
|
18
|
+
|
|
19
|
+
Produces interfaces that are visually distinctive and production-ready.
|
|
20
|
+
The core constraint: every design choice must be intentional, not default.
|
|
21
|
+
|
|
22
|
+
## Step 0: Context Detection
|
|
23
|
+
|
|
24
|
+
Before writing any code, read three sources.
|
|
25
|
+
|
|
26
|
+
**1. Project stack and domain**
|
|
27
|
+
Read `CLAUDE.md` — find `Domain:` and `Stack:` fields.
|
|
28
|
+
If stack contains React/Next/Vue/Svelte: use component file structure.
|
|
29
|
+
If stack is plain HTML: single index.html with embedded or linked CSS/JS.
|
|
30
|
+
|
|
31
|
+
**2. Existing design system or brand guide**
|
|
32
|
+
```bash
|
|
33
|
+
ls .claude/constitution.md 2>/dev/null
|
|
34
|
+
find . -name "design-tokens*" -o -name "brand-guide*" -o -name "theme.*" 2>/dev/null | head -5
|
|
35
|
+
```
|
|
36
|
+
If `constitution.md` exists: read `## Visual Identity` section — it is non-negotiable.
|
|
37
|
+
If design tokens exist: import them. Do not invent conflicting values.
|
|
38
|
+
|
|
39
|
+
**3. Prior aesthetic decisions**
|
|
40
|
+
```bash
|
|
41
|
+
grep -i "font\|color\|aesthetic\|palette" .claude/memory/decisions.md 2>/dev/null | head -10
|
|
42
|
+
```
|
|
43
|
+
If prior decisions exist: stay consistent with them unless the user explicitly wants a change.
|
|
44
|
+
|
|
45
|
+
---
|
|
46
|
+
|
|
47
|
+
## Step 1: Pick an Aesthetic Direction
|
|
48
|
+
|
|
49
|
+
Choose ONE direction before writing any code.
|
|
50
|
+
Intentionality beats intensity — a minimal design executed with conviction beats a
|
|
51
|
+
maximalist design that hedges.
|
|
52
|
+
|
|
53
|
+
See `references/aesthetic-directions.md` for fonts, colors, and techniques per direction.
|
|
54
|
+
|
|
55
|
+
| Direction | Core signal |
|
|
56
|
+
|-----------|-------------|
|
|
57
|
+
| Brutally Minimal | Extreme whitespace, single weight, silence as design element |
|
|
58
|
+
| Maximalist Chaos | Layers, collisions, overflow, density as aesthetic |
|
|
59
|
+
| Retro-Futuristic | CRT nostalgia meets speculative UI — scanlines, phosphor glow |
|
|
60
|
+
| Organic/Natural | Irregular shapes, earth palette, no mechanical grids |
|
|
61
|
+
| Luxury/Refined | Restraint, gold/cream/black, editorial spacing |
|
|
62
|
+
| Playful/Toy-like | Rounded, saturated, bouncy, tactile affordances |
|
|
63
|
+
| Editorial/Magazine | Strong typographic hierarchy, column grids, pull quotes |
|
|
64
|
+
| Brutalist/Raw | Exposed structure, default-looking-but-intentional, harsh juxtapositions |
|
|
65
|
+
| Art Deco/Geometric | Symmetry, chevrons, gilt details, high contrast geometry |
|
|
66
|
+
| Soft/Pastel | Muted saturation, gentle gradients, airy spacing |
|
|
67
|
+
| Industrial/Utilitarian | Monospace, grid lines, data-forward, no decoration |
|
|
68
|
+
| Cyberpunk/Dark | Dark base, neon accent, glitch effects, terminal aesthetics |
|
|
69
|
+
|
|
70
|
+
State the chosen direction explicitly before proceeding. Example:
|
|
71
|
+
`Direction: Retro-Futuristic — scanline overlays, phosphor green on near-black, monospace headline`
|
|
72
|
+
|
|
73
|
+
---
|
|
74
|
+
|
|
75
|
+
## Step 2: Implement
|
|
76
|
+
|
|
77
|
+
### Typography rules
|
|
78
|
+
- NEVER use: Inter, Roboto, Arial, Helvetica, system fonts without intentional treatment
|
|
79
|
+
- NEVER use: Space Grotesk (convergence signal — indicates no aesthetic thinking)
|
|
80
|
+
- DO use: characterful fonts from Google Fonts matched to the chosen direction
|
|
81
|
+
- Set: `font-display: swap` on all imported fonts
|
|
82
|
+
|
|
83
|
+
### Color rules
|
|
84
|
+
- NEVER use: purple-to-pink gradient on white
|
|
85
|
+
- NEVER use: evenly distributed hues without hierarchy
|
|
86
|
+
- NEVER use: high-saturation rainbow palettes
|
|
87
|
+
- DO use: 1 dominant + 1-2 accent colors, committed to the direction
|
|
88
|
+
- DO use: a defined background treatment (texture, grain overlay, gradient mesh) — not flat solid color
|
|
89
|
+
|
|
90
|
+
### Layout rules
|
|
91
|
+
- NEVER use: centered hero + 3-column feature grid without modification
|
|
92
|
+
- NEVER use: standard nav with no customization
|
|
93
|
+
- DO use: asymmetry, overlap, diagonal flow, or grid-breaking elements
|
|
94
|
+
- DO use: visual hierarchy that guides the eye in a deliberate path
|
|
95
|
+
|
|
96
|
+
### Motion rules
|
|
97
|
+
- Prefer CSS transitions over JS animation libraries
|
|
98
|
+
- Scroll-triggered animations must serve comprehension, not decorate it
|
|
99
|
+
- Hover states must be thoughtful — not just opacity change
|
|
100
|
+
- Glassmorphism only if the direction calls for it (Luxury, Cyberpunk) — never as default
|
|
101
|
+
|
|
102
|
+
### Detail rules
|
|
103
|
+
- Rounded corners only where intentional — not applied globally by default
|
|
104
|
+
- Micro-interactions must have a reason: confirm action, guide attention, indicate state
|
|
105
|
+
- Every spacing value must belong to a scale (4px, 8px, 16px, 24px, 32px, 48px, 64px)
|
|
106
|
+
|
|
107
|
+
---
|
|
108
|
+
|
|
109
|
+
## Step 3: Complexity Budget
|
|
110
|
+
|
|
111
|
+
Match animation/visual code ratio to the chosen direction.
|
|
112
|
+
|
|
113
|
+
| Direction type | Animation/visual code | Semantic structure |
|
|
114
|
+
|---|---|---|
|
|
115
|
+
| Maximalist (Chaos, Retro, Cyberpunk) | 60-70% | 30-40% |
|
|
116
|
+
| Minimalist (Minimal, Luxury, Soft) | 20-30% | 70-80% |
|
|
117
|
+
| Mid-complexity (Editorial, Deco, Industrial) | 40-50% | 50-60% |
|
|
118
|
+
|
|
119
|
+
Do not apply maximalist code budget to a minimalist direction. The restraint IS the design.
|
|
120
|
+
|
|
121
|
+
---
|
|
122
|
+
|
|
123
|
+
## Ambiguity Protocol
|
|
124
|
+
|
|
125
|
+
If the request is vague (no content, no purpose stated):
|
|
126
|
+
→ Ask: "What does this interface do, and who uses it? One sentence."
|
|
127
|
+
|
|
128
|
+
If no framework is specified and CLAUDE.md has no stack:
|
|
129
|
+
→ Default to vanilla HTML/CSS/JS. State this assumption before writing.
|
|
130
|
+
|
|
131
|
+
If the user asks for "something beautiful" with no further constraint:
|
|
132
|
+
→ Pick a direction from the aesthetic table, state it explicitly ("Going with Brutally Minimal — here's why"), then proceed. Do not ask for permission.
|
|
133
|
+
|
|
134
|
+
If a request conflicts with constitution.md visual constraints:
|
|
135
|
+
→ Flag the conflict: "constitution.md restricts X — I'll use Y instead." Do not silently override.
|
|
136
|
+
|
|
137
|
+
---
|
|
138
|
+
|
|
139
|
+
## Step 4: Production Requirements
|
|
140
|
+
|
|
141
|
+
- Entry file: `index.html` (always — even for React, the build output target is index.html)
|
|
142
|
+
- Cross-browser: test mental model against Chrome, Firefox, Safari rendering differences for any CSS used
|
|
143
|
+
- Mobile-responsive: no horizontal scroll on 375px viewport, tap targets >= 44px
|
|
144
|
+
- No broken links, placeholder `#` hrefs without intent, or `TODO` comments in shipped code
|
|
145
|
+
- Images: use aspect-ratio, width/height attributes, or explicit dimensions to prevent layout shift
|
|
146
|
+
|
|
147
|
+
---
|
|
148
|
+
|
|
149
|
+
## Completion
|
|
150
|
+
|
|
151
|
+
When done, output:
|
|
152
|
+
|
|
153
|
+
```
|
|
154
|
+
Direction: {chosen direction}
|
|
155
|
+
Entry file: {absolute path to index.html}
|
|
156
|
+
Line count: {wc -l output}
|
|
157
|
+
Files created: {list}
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
Run:
|
|
161
|
+
```bash
|
|
162
|
+
wc -l index.html
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
Show the actual line count. Do not estimate.
|
|
166
|
+
|
|
167
|
+
## References
|
|
168
|
+
|
|
169
|
+
For the full aesthetic directions reference: `references/aesthetic-directions.md`
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
# Aesthetic Directions — Quick Reference
|
|
2
|
+
|
|
3
|
+
12 directions for the frontend-design skill. Pick one before writing code.
|
|
4
|
+
|
|
5
|
+
| Direction | Vibe | Key Techniques | Example Fonts | Example Colors |
|
|
6
|
+
|-----------|------|---------------|---------------|----------------|
|
|
7
|
+
| **Brutally Minimal** | Silence as design. One element per screen. Every pixel earns its place. | Extreme whitespace, single typeface weight, monochrome or near-monochrome, no decoration | Garamond, Cormorant, DM Serif Display | #FFFFFF + #0A0A0A, or #F5F0EB + #1A1A1A |
|
|
8
|
+
| **Maximalist Chaos** | Density, layering, visual noise as deliberate statement. | Overlapping elements, competing type sizes, mixed media, bleed-to-edge images, stacked layers | Bebas Neue + handwritten mix, Display + body contrast | Saturated contrasting hues — no single dominant |
|
|
9
|
+
| **Retro-Futuristic** | Nostalgia for a future that never arrived. CRT terminals, tape decks, space-age UI. | Scanline overlays, phosphor glow, CRT curve, terminal cursor blink, VHS distortion | Share Tech Mono, VT323, Orbitron | #0D1B0D (near-black) + #00FF41 (phosphor green) or amber #FFB300 |
|
|
10
|
+
| **Organic/Natural** | Nature-sourced — irregular, warm, living. Rejects the mechanical grid. | Blob shapes, hand-drawn SVG borders, irregular column widths, grain textures, leaf/soil palette | Playfair Display, Lora, Newsreader | #3D2B1F, #8B7355, #E8DCC8, #4A7C59 |
|
|
11
|
+
| **Luxury/Refined** | Restraint that signals expense. Negative space is the product. | Wide letter-spacing on display type, rule lines instead of borders, gold/cream/black palette, no rounded corners | Cormorant Garamond, Bodoni Moda, Cinzel | #1A1208, #C9A84C (gold), #F5F0E8 (cream) |
|
|
12
|
+
| **Playful/Toy-like** | Tactile, bouncy, joyful. Designed to invite touch. | High border-radius, drop shadows with color, spring/bounce animations, illustrated elements, sticker-style badges | Nunito, Fredoka One, Baloo 2 | #FF6B6B, #4ECDC4, #FFE66D, #FFFFFF |
|
|
13
|
+
| **Editorial/Magazine** | Type IS the design. Grid discipline with deliberate breaks. | Strong typographic hierarchy, 12-column grid, pull quotes, dropcaps, ruled sections, photo crops | Libre Baskerville + Source Sans, Playfair + Inter (editorial exception), Fraunces | #F4F1EC (paper), #1C1C1C, red accent #D62828 |
|
|
14
|
+
| **Brutalist/Raw** | Deliberately anti-polished. The exposed skeleton is the aesthetic. | Default-looking elements styled with intent, visible borders, stark backgrounds, aggressive whitespace or none | Courier New (intentional), Times New Roman (reclaimed), monospace | #FFFFFF + #000000 + primary color blocks |
|
|
15
|
+
| **Art Deco/Geometric** | Symmetry, repetition, gilt geometry. Machine-age glamour. | Chevron patterns, radial symmetry, thin geometric ornaments, fan motifs, high contrast | Poiret One, Josefin Sans, Italiana | #1A1209, #C9A84C (gold), #F5E6C8, #1A2639 |
|
|
16
|
+
| **Soft/Pastel** | Gentle, airy, approachable. Saturation turned below 50%. | Muted gradients (analogous hues), cloud-like shapes, generous padding, soft shadows | Poppins (light weight only), Nunito Light, DM Sans | #F2E8FF, #E8F4F8, #FFF4E8, #E8F5E9 |
|
|
17
|
+
| **Industrial/Utilitarian** | Function first. Decoration is a bug. Data is the interface. | Monospace typefaces, visible grid lines, data tables as primary UI, tight spacing, no gradients | JetBrains Mono, IBM Plex Mono, Roboto Mono | #1A1A1A, #2D2D2D, #4A4A4A, #00CC66 (status green) |
|
|
18
|
+
| **Cyberpunk/Dark** | Dark base, neon accent, the city at 3am. Glitch is a feature. | Dark near-black base, neon accent (1 color only), glitch text effect, scanlines optional, terminal feel | Rajdhani, Exo 2, Orbitron | #0A0A0F, #FF2D78 (neon pink) or #00F5FF (cyan), #1A1A2E |
|
|
19
|
+
|
|
20
|
+
## Usage Notes
|
|
21
|
+
|
|
22
|
+
- Pick exactly one direction per project. Mixing directions without a deliberate concept produces visual noise.
|
|
23
|
+
- The font column lists examples — always verify availability on Google Fonts before using.
|
|
24
|
+
- Color values are starting points. Adjust lightness to pass WCAG AA contrast (4.5:1 for body text).
|
|
25
|
+
- Maximalist directions (Chaos, Retro, Cyberpunk) allow more motion budget — see SKILL.md Step 3.
|
|
26
|
+
- Brutalist/Raw requires the most discipline: it looks like no thought went into it, which requires the most thought.
|
|
@@ -62,16 +62,30 @@ description: >
|
|
|
62
62
|
|
|
63
63
|
### The formula:
|
|
64
64
|
```
|
|
65
|
-
description =
|
|
65
|
+
description =
|
|
66
66
|
WHAT it does (1 sentence)
|
|
67
67
|
+ ACTIONS that trigger it (write, review, fix, audit, check, scan...)
|
|
68
68
|
+ OBJECTS it applies to (keys, tokens, passwords, .env, connections...)
|
|
69
69
|
+ PATTERNS it detects (injection, XSS, CSRF, eval, exec...)
|
|
70
70
|
+ COMMANDS that invoke it (/audit, /ship, security...)
|
|
71
|
+
+ INPUT CONSTRAINTS where it does NOT apply (e.g., "not for non-JS projects")
|
|
71
72
|
+ CONTEXTS where it should fire even without explicit request
|
|
72
73
|
+ "Even if the user doesn't explicitly mention X, use this skill when Y"
|
|
74
|
+
+ "Do NOT trigger when: [anti-triggers — prevents false positives]"
|
|
73
75
|
```
|
|
74
76
|
|
|
77
|
+
### Input constraints (stolen from production skill templates):
|
|
78
|
+
Most skills trigger too broadly without explicit boundaries.
|
|
79
|
+
Add a `Do NOT trigger when:` line to the frontmatter description:
|
|
80
|
+
```yaml
|
|
81
|
+
description: >
|
|
82
|
+
...all the trigger keywords...
|
|
83
|
+
Do NOT trigger when: user is asking a conceptual question (not building),
|
|
84
|
+
when a design system already exists in the project (defer to it),
|
|
85
|
+
or when the request is a code review (use code-reviewer instead).
|
|
86
|
+
```
|
|
87
|
+
This prevents false positive triggering that wastes context and confuses the user.
|
|
88
|
+
|
|
75
89
|
The last line is critical. Anthropic's own docs say:
|
|
76
90
|
"Claude has a tendency to undertrigger skills. Make descriptions pushy."
|
|
77
91
|
|
|
@@ -116,8 +130,23 @@ Numbered steps. Imperative form. What Claude DOES, not what Claude SHOULD do.
|
|
|
116
130
|
- Written as positive directives: "Always X" not "Don't do Y"
|
|
117
131
|
- Specific, testable, unambiguous
|
|
118
132
|
|
|
133
|
+
## Ambiguity Protocol
|
|
134
|
+
*Every skill should define what happens when input is unclear.*
|
|
135
|
+
|
|
136
|
+
If input is vague (no framework specified, no target stated):
|
|
137
|
+
→ Ask: "[specific question, e.g., 'Which framework — React, Vue, or vanilla HTML?']"
|
|
138
|
+
|
|
139
|
+
If input is malformed or out of scope:
|
|
140
|
+
→ Say: "[specific message, e.g., 'This skill handles UI creation. For code review, use /audit instead.']"
|
|
141
|
+
|
|
142
|
+
If a required prerequisite is missing (e.g., no CLAUDE.md, no design system):
|
|
143
|
+
→ Do: "[specific fallback, e.g., 'Assume stack from package.json, proceed with default aesthetic']"
|
|
144
|
+
|
|
145
|
+
**Rule:** Never silently fail or produce partial output. Either ask, redirect, or state the assumption explicitly.
|
|
146
|
+
|
|
119
147
|
## Examples
|
|
120
148
|
One concrete input → output example that shows the expected behavior.
|
|
149
|
+
Include at least one edge case / failure case: what happens when input is ambiguous, malformed, or out of scope.
|
|
121
150
|
|
|
122
151
|
## References
|
|
123
152
|
For detailed [topic], read: `references/detailed-guide.md`
|
|
@@ -266,6 +295,8 @@ From Anthropic's skill-development skill + AZCLAUDE's debate engine research:
|
|
|
266
295
|
```
|
|
267
296
|
□ Description has 30+ trigger keywords (pushy, not modest)
|
|
268
297
|
□ Description ends with "even if the user doesn't explicitly ask"
|
|
298
|
+
□ Description includes "Do NOT trigger when:" anti-trigger line
|
|
299
|
+
□ Ambiguity Protocol defined: what to ask/do when input is vague, malformed, or missing prereqs
|
|
269
300
|
□ SKILL.md body is under 2,000 words
|
|
270
301
|
□ All detailed content is in references/, not SKILL.md
|
|
271
302
|
□ Workflow uses imperative form ("Run X" not "You should run X")
|