myaiforone 1.0.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/README.md +113 -0
- package/agents/_template/CLAUDE.md +18 -0
- package/agents/_template/agent.json +7 -0
- package/agents/platform/agentcreator/CLAUDE.md +300 -0
- package/agents/platform/appcreator/CLAUDE.md +158 -0
- package/agents/platform/gym/CLAUDE.md +486 -0
- package/agents/platform/gym/agent.json +40 -0
- package/agents/platform/gym/programs/agent-building/program.json +160 -0
- package/agents/platform/gym/programs/automations-mastery/program.json +129 -0
- package/agents/platform/gym/programs/getting-started/program.json +124 -0
- package/agents/platform/gym/programs/mcp-integrations/program.json +116 -0
- package/agents/platform/gym/programs/multi-model-strategy/program.json +115 -0
- package/agents/platform/gym/programs/prompt-engineering/program.json +136 -0
- package/agents/platform/gym/souls/alex.md +12 -0
- package/agents/platform/gym/souls/jordan.md +12 -0
- package/agents/platform/gym/souls/morgan.md +12 -0
- package/agents/platform/gym/souls/riley.md +12 -0
- package/agents/platform/gym/souls/sam.md +12 -0
- package/agents/platform/hub/CLAUDE.md +372 -0
- package/agents/platform/promptcreator/CLAUDE.md +130 -0
- package/agents/platform/skillcreator/CLAUDE.md +163 -0
- package/bin/cli.js +566 -0
- package/config.example.json +310 -0
- package/dist/agent-registry.d.ts +32 -0
- package/dist/agent-registry.d.ts.map +1 -0
- package/dist/agent-registry.js +144 -0
- package/dist/agent-registry.js.map +1 -0
- package/dist/channels/discord.d.ts +17 -0
- package/dist/channels/discord.d.ts.map +1 -0
- package/dist/channels/discord.js +114 -0
- package/dist/channels/discord.js.map +1 -0
- package/dist/channels/imessage.d.ts +23 -0
- package/dist/channels/imessage.d.ts.map +1 -0
- package/dist/channels/imessage.js +214 -0
- package/dist/channels/imessage.js.map +1 -0
- package/dist/channels/slack.d.ts +19 -0
- package/dist/channels/slack.d.ts.map +1 -0
- package/dist/channels/slack.js +167 -0
- package/dist/channels/slack.js.map +1 -0
- package/dist/channels/telegram.d.ts +19 -0
- package/dist/channels/telegram.d.ts.map +1 -0
- package/dist/channels/telegram.js +274 -0
- package/dist/channels/telegram.js.map +1 -0
- package/dist/channels/types.d.ts +44 -0
- package/dist/channels/types.d.ts.map +1 -0
- package/dist/channels/types.js +18 -0
- package/dist/channels/types.js.map +1 -0
- package/dist/channels/whatsapp.d.ts +23 -0
- package/dist/channels/whatsapp.d.ts.map +1 -0
- package/dist/channels/whatsapp.js +189 -0
- package/dist/channels/whatsapp.js.map +1 -0
- package/dist/config.d.ts +134 -0
- package/dist/config.d.ts.map +1 -0
- package/dist/config.js +127 -0
- package/dist/config.js.map +1 -0
- package/dist/cron.d.ts +8 -0
- package/dist/cron.d.ts.map +1 -0
- package/dist/cron.js +35 -0
- package/dist/cron.js.map +1 -0
- package/dist/decrypt-keys.d.ts +7 -0
- package/dist/decrypt-keys.d.ts.map +1 -0
- package/dist/decrypt-keys.js +53 -0
- package/dist/decrypt-keys.js.map +1 -0
- package/dist/encrypt-keys.d.ts +8 -0
- package/dist/encrypt-keys.d.ts.map +1 -0
- package/dist/encrypt-keys.js +62 -0
- package/dist/encrypt-keys.js.map +1 -0
- package/dist/executor.d.ts +31 -0
- package/dist/executor.d.ts.map +1 -0
- package/dist/executor.js +2009 -0
- package/dist/executor.js.map +1 -0
- package/dist/gemini-executor.d.ts +27 -0
- package/dist/gemini-executor.d.ts.map +1 -0
- package/dist/gemini-executor.js +160 -0
- package/dist/gemini-executor.js.map +1 -0
- package/dist/goals.d.ts +24 -0
- package/dist/goals.d.ts.map +1 -0
- package/dist/goals.js +189 -0
- package/dist/goals.js.map +1 -0
- package/dist/gym/activity-digest.d.ts +30 -0
- package/dist/gym/activity-digest.d.ts.map +1 -0
- package/dist/gym/activity-digest.js +506 -0
- package/dist/gym/activity-digest.js.map +1 -0
- package/dist/gym/dimension-scorer.d.ts +76 -0
- package/dist/gym/dimension-scorer.d.ts.map +1 -0
- package/dist/gym/dimension-scorer.js +236 -0
- package/dist/gym/dimension-scorer.js.map +1 -0
- package/dist/gym/gym-router.d.ts +7 -0
- package/dist/gym/gym-router.d.ts.map +1 -0
- package/dist/gym/gym-router.js +718 -0
- package/dist/gym/gym-router.js.map +1 -0
- package/dist/gym/index.d.ts +11 -0
- package/dist/gym/index.d.ts.map +1 -0
- package/dist/gym/index.js +11 -0
- package/dist/gym/index.js.map +1 -0
- package/dist/heartbeat.d.ts +21 -0
- package/dist/heartbeat.d.ts.map +1 -0
- package/dist/heartbeat.js +163 -0
- package/dist/heartbeat.js.map +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +254 -0
- package/dist/index.js.map +1 -0
- package/dist/keystore.d.ts +22 -0
- package/dist/keystore.d.ts.map +1 -0
- package/dist/keystore.js +178 -0
- package/dist/keystore.js.map +1 -0
- package/dist/logger.d.ts +9 -0
- package/dist/logger.d.ts.map +1 -0
- package/dist/logger.js +45 -0
- package/dist/logger.js.map +1 -0
- package/dist/memory/daily.d.ts +22 -0
- package/dist/memory/daily.d.ts.map +1 -0
- package/dist/memory/daily.js +82 -0
- package/dist/memory/daily.js.map +1 -0
- package/dist/memory/embeddings.d.ts +15 -0
- package/dist/memory/embeddings.d.ts.map +1 -0
- package/dist/memory/embeddings.js +154 -0
- package/dist/memory/embeddings.js.map +1 -0
- package/dist/memory/index.d.ts +32 -0
- package/dist/memory/index.d.ts.map +1 -0
- package/dist/memory/index.js +159 -0
- package/dist/memory/index.js.map +1 -0
- package/dist/memory/search.d.ts +21 -0
- package/dist/memory/search.d.ts.map +1 -0
- package/dist/memory/search.js +77 -0
- package/dist/memory/search.js.map +1 -0
- package/dist/memory/store.d.ts +23 -0
- package/dist/memory/store.d.ts.map +1 -0
- package/dist/memory/store.js +144 -0
- package/dist/memory/store.js.map +1 -0
- package/dist/ollama-executor.d.ts +17 -0
- package/dist/ollama-executor.d.ts.map +1 -0
- package/dist/ollama-executor.js +112 -0
- package/dist/ollama-executor.js.map +1 -0
- package/dist/openai-executor.d.ts +38 -0
- package/dist/openai-executor.d.ts.map +1 -0
- package/dist/openai-executor.js +197 -0
- package/dist/openai-executor.js.map +1 -0
- package/dist/router.d.ts +11 -0
- package/dist/router.d.ts.map +1 -0
- package/dist/router.js +185 -0
- package/dist/router.js.map +1 -0
- package/dist/test-message.d.ts +2 -0
- package/dist/test-message.d.ts.map +1 -0
- package/dist/test-message.js +60 -0
- package/dist/test-message.js.map +1 -0
- package/dist/utils/imsg-db-reader.d.ts +24 -0
- package/dist/utils/imsg-db-reader.d.ts.map +1 -0
- package/dist/utils/imsg-db-reader.js +92 -0
- package/dist/utils/imsg-db-reader.js.map +1 -0
- package/dist/utils/imsg-rpc.d.ts +25 -0
- package/dist/utils/imsg-rpc.d.ts.map +1 -0
- package/dist/utils/imsg-rpc.js +149 -0
- package/dist/utils/imsg-rpc.js.map +1 -0
- package/dist/utils/message-formatter.d.ts +3 -0
- package/dist/utils/message-formatter.d.ts.map +1 -0
- package/dist/utils/message-formatter.js +69 -0
- package/dist/utils/message-formatter.js.map +1 -0
- package/dist/web-ui.d.ts +12 -0
- package/dist/web-ui.d.ts.map +1 -0
- package/dist/web-ui.js +5784 -0
- package/dist/web-ui.js.map +1 -0
- package/dist/whatsapp-chats.d.ts +2 -0
- package/dist/whatsapp-chats.d.ts.map +1 -0
- package/dist/whatsapp-chats.js +76 -0
- package/dist/whatsapp-chats.js.map +1 -0
- package/dist/whatsapp-login.d.ts +2 -0
- package/dist/whatsapp-login.d.ts.map +1 -0
- package/dist/whatsapp-login.js +90 -0
- package/dist/whatsapp-login.js.map +1 -0
- package/dist/wiki-sync.d.ts +21 -0
- package/dist/wiki-sync.d.ts.map +1 -0
- package/dist/wiki-sync.js +147 -0
- package/dist/wiki-sync.js.map +1 -0
- package/docs/AddNewAgentGuide.md +100 -0
- package/docs/AddNewMcpGuide.md +72 -0
- package/docs/Architecture.md +795 -0
- package/docs/CLAUDE-AI-SETUP.md +166 -0
- package/docs/Setup.md +297 -0
- package/docs/ai-gym-architecture.md +1040 -0
- package/docs/ai-gym-build-plan.md +343 -0
- package/docs/ai-gym-onboarding.md +122 -0
- package/docs/appcreator_plan.md +348 -0
- package/docs/platform-mcp-audit.md +320 -0
- package/docs/server-deployment-plan.md +503 -0
- package/docs/superpowers/plans/2026-03-25-marketplace.md +1281 -0
- package/docs/superpowers/specs/2026-03-25-marketplace-design.md +287 -0
- package/docs/user-guide.md +2016 -0
- package/mcp-catalog.json +628 -0
- package/package.json +63 -0
- package/public/MyAIforOne-logomark-512.svg +16 -0
- package/public/MyAIforOne-logomark-transparent.svg +15 -0
- package/public/activity.html +314 -0
- package/public/admin.html +1674 -0
- package/public/agent-dashboard.html +670 -0
- package/public/api-docs.html +1106 -0
- package/public/automations.html +722 -0
- package/public/canvas.css +223 -0
- package/public/canvas.js +588 -0
- package/public/changelog.html +231 -0
- package/public/gym.html +2766 -0
- package/public/home.html +1930 -0
- package/public/index.html +2809 -0
- package/public/lab.html +1643 -0
- package/public/library.html +1442 -0
- package/public/marketplace.html +1101 -0
- package/public/mcp-docs.html +441 -0
- package/public/mini.html +390 -0
- package/public/monitor.html +584 -0
- package/public/org.html +4304 -0
- package/public/projects.html +734 -0
- package/public/settings.html +645 -0
- package/public/tasks.html +932 -0
- package/public/trainers/alex.svg +12 -0
- package/public/trainers/jordan.svg +12 -0
- package/public/trainers/morgan.svg +12 -0
- package/public/trainers/riley.svg +12 -0
- package/public/trainers/sam.svg +12 -0
- package/public/user-guide.html +218 -0
- package/registry/agents.json +3 -0
- package/registry/apps.json +20 -0
- package/registry/installed-drafts.json +3 -0
- package/registry/mcps.json +1084 -0
- package/registry/prompts/personal/mcp-test-prompt.md +6 -0
- package/registry/prompts/personal/memory-recall.md +6 -0
- package/registry/prompts/platform/brainstorm.md +15 -0
- package/registry/prompts/platform/code-review.md +16 -0
- package/registry/prompts/platform/explain.md +16 -0
- package/registry/prompts.json +58 -0
- package/registry/skills/external/brainstorming.md +5 -0
- package/registry/skills/external/code-review.md +40 -0
- package/registry/skills/external/frontend-patterns.md +642 -0
- package/registry/skills/external/frontend-slides.md +184 -0
- package/registry/skills/external/systematic-debugging.md +5 -0
- package/registry/skills/external/tdd.md +328 -0
- package/registry/skills/external/verification-before-completion.md +5 -0
- package/registry/skills/external/writing-plans.md +5 -0
- package/registry/skills/platform/ai41_app_build.md +930 -0
- package/registry/skills/platform/ai41_app_deploy.md +168 -0
- package/registry/skills/platform/ai41_app_orchestrator.md +239 -0
- package/registry/skills/platform/ai41_app_patterns.md +359 -0
- package/registry/skills/platform/ai41_app_register.md +85 -0
- package/registry/skills/platform/ai41_app_scaffold.md +421 -0
- package/registry/skills/platform/ai41_app_verify.md +107 -0
- package/registry/skills/platform/opProjectCreate.md +239 -0
- package/registry/skills/platform/op_devbrowser.md +136 -0
- package/registry/skills/platform/sop_brandguidelines.md +103 -0
- package/registry/skills/platform/sop_docx.md +117 -0
- package/registry/skills/platform/sop_frontenddesign.md +44 -0
- package/registry/skills/platform/sop_frontenddesign_v2.md +659 -0
- package/registry/skills/platform/sop_mcpbuilder.md +133 -0
- package/registry/skills/platform/sop_pdf.md +172 -0
- package/registry/skills/platform/sop_pptx.md +133 -0
- package/registry/skills/platform/sop_skillcreator.md +104 -0
- package/registry/skills/platform/sop_themefactory.md +128 -0
- package/registry/skills/platform/sop_webapptesting.md +75 -0
- package/registry/skills/platform/sop_webartifactsbuilder.md +97 -0
- package/registry/skills/platform/sop_xlsx.md +134 -0
- package/registry/skills.json +1055 -0
- package/scripts/discover-chats.sh +11 -0
- package/scripts/install-service-windows.ps1 +87 -0
- package/scripts/install-service.sh +52 -0
- package/scripts/seed-registry.ts +195 -0
- package/scripts/test-send.sh +5 -0
- package/scripts/tray-indicator.ps1 +35 -0
- package/scripts/uninstall-service-windows.ps1 +23 -0
- package/scripts/uninstall-service.sh +15 -0
- package/scripts/xbar-myagent.5s.sh +32 -0
- package/server/mcp-server/dist/index.d.ts +11 -0
- package/server/mcp-server/dist/index.js +1332 -0
- package/server/mcp-server/dist/lib/api-client.d.ts +165 -0
- package/server/mcp-server/dist/lib/api-client.js +241 -0
- package/server/mcp-server/index.ts +1545 -0
- package/server/mcp-server/lib/api-client.ts +366 -0
- package/server/mcp-server/tsconfig.json +14 -0
- package/src/agent-registry.ts +180 -0
- package/src/channels/discord.ts +129 -0
- package/src/channels/imessage.ts +261 -0
- package/src/channels/slack.ts +208 -0
- package/src/channels/telegram.ts +307 -0
- package/src/channels/types.ts +62 -0
- package/src/channels/whatsapp.ts +227 -0
- package/src/config.ts +281 -0
- package/src/cron.ts +43 -0
- package/src/decrypt-keys.ts +60 -0
- package/src/encrypt-keys.ts +70 -0
- package/src/executor.ts +2190 -0
- package/src/gemini-executor.ts +212 -0
- package/src/goals.ts +240 -0
- package/src/gym/activity-digest.ts +546 -0
- package/src/gym/dimension-scorer.ts +297 -0
- package/src/gym/gym-router.ts +801 -0
- package/src/gym/index.ts +19 -0
- package/src/heartbeat.ts +220 -0
- package/src/index.ts +275 -0
- package/src/keystore.ts +190 -0
- package/src/logger.ts +51 -0
- package/src/memory/daily.ts +101 -0
- package/src/memory/embeddings.ts +185 -0
- package/src/memory/index.ts +218 -0
- package/src/memory/search.ts +124 -0
- package/src/memory/store.ts +189 -0
- package/src/ollama-executor.ts +126 -0
- package/src/openai-executor.ts +259 -0
- package/src/router.ts +230 -0
- package/src/test-message.ts +72 -0
- package/src/utils/imsg-db-reader.ts +109 -0
- package/src/utils/imsg-rpc.ts +178 -0
- package/src/utils/message-formatter.ts +90 -0
- package/src/web-ui.ts +5778 -0
- package/src/whatsapp-chats.ts +91 -0
- package/src/whatsapp-login.ts +110 -0
- package/src/wiki-sync.ts +199 -0
- package/tsconfig.json +19 -0
|
@@ -0,0 +1,239 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: opProjectCreate
|
|
3
|
+
description: >-
|
|
4
|
+
Create and execute a cross-agent project from a high-level description. Dialogues to refine scope, breaks down into tasks, creates the project entity with linked agents/artifacts, and optionally kicks off autonomous background execution. Use when a user says "build me a project for X" or "I want to start a new initiative".
|
|
5
|
+
allowed-tools: Read Write Edit Glob Grep Bash
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# Project Create & Execute
|
|
9
|
+
|
|
10
|
+
Take a high-level objective from the user, plan it, create the project, and optionally execute it autonomously.
|
|
11
|
+
|
|
12
|
+
**Arguments:** User message describes what they want to achieve. Extract the objective, scope, and any specific requirements.
|
|
13
|
+
|
|
14
|
+
If no description provided, ask: "What do you want this project to achieve?"
|
|
15
|
+
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
## Phase 1: Understand & Plan
|
|
19
|
+
|
|
20
|
+
### Step 1: Extract the Objective
|
|
21
|
+
|
|
22
|
+
From the user's description, identify:
|
|
23
|
+
- **Project name** — short, descriptive
|
|
24
|
+
- **Description** — 1-2 sentence summary of what this project achieves
|
|
25
|
+
- **Deliverables** — what artifacts, agents, apps, content, or infrastructure will be created
|
|
26
|
+
- **Owner agent** — who owns this project (default: the agent running this skill)
|
|
27
|
+
- **Team members** — other agents that will participate
|
|
28
|
+
|
|
29
|
+
### Step 2: Break Down into Tasks
|
|
30
|
+
|
|
31
|
+
Create a task list. Each task should be:
|
|
32
|
+
- **Actionable** — clear what "done" looks like
|
|
33
|
+
- **Ordered** — dependencies respected (can't deploy before building)
|
|
34
|
+
- **Assigned** — which agent will do this task
|
|
35
|
+
- **Sized** — no task should be bigger than a single agent session
|
|
36
|
+
|
|
37
|
+
Categories to consider for every project:
|
|
38
|
+
- **Build tasks** — create the actual thing (website, app, content, agents)
|
|
39
|
+
- **Platform tasks** — create agents, orgs, register apps
|
|
40
|
+
- **Marketing tasks** — LinkedIn posts, outreach messages, PDFs
|
|
41
|
+
- **Deployment tasks** — Railway, domain setup, DNS
|
|
42
|
+
- **Review task** — final checklist verification (always include this as the last task)
|
|
43
|
+
|
|
44
|
+
### Step 3: Identify Credentials Needed
|
|
45
|
+
|
|
46
|
+
Check if the project will need:
|
|
47
|
+
- GitHub token (for repo creation/push)
|
|
48
|
+
- Railway token (for deployment)
|
|
49
|
+
- Namecheap credentials (for domain registration)
|
|
50
|
+
- Resend API key (for email/contact forms)
|
|
51
|
+
- LinkedIn MCP (for posting)
|
|
52
|
+
- Any other API keys or tokens
|
|
53
|
+
|
|
54
|
+
### Step 4: Present the Plan
|
|
55
|
+
|
|
56
|
+
Show the user:
|
|
57
|
+
```
|
|
58
|
+
## Project: {name}
|
|
59
|
+
|
|
60
|
+
**Description:** {description}
|
|
61
|
+
**Owner:** {agent}
|
|
62
|
+
**Team:** {agents}
|
|
63
|
+
|
|
64
|
+
### Tasks:
|
|
65
|
+
1. {task 1} — {agent} — {priority}
|
|
66
|
+
2. {task 2} — {agent} — {priority}
|
|
67
|
+
...
|
|
68
|
+
N. Project review — verify all deliverables — high
|
|
69
|
+
|
|
70
|
+
### Credentials Needed:
|
|
71
|
+
- {credential 1}: {what for}
|
|
72
|
+
- {credential 2}: {what for}
|
|
73
|
+
|
|
74
|
+
### Shall I create this project and start executing?
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
Wait for user approval before proceeding.
|
|
78
|
+
|
|
79
|
+
---
|
|
80
|
+
|
|
81
|
+
## Phase 2: Create the Project
|
|
82
|
+
|
|
83
|
+
Once approved, execute in this order:
|
|
84
|
+
|
|
85
|
+
### Step 5: Create the Project Entity
|
|
86
|
+
|
|
87
|
+
Use the `create_initiative` MCP tool:
|
|
88
|
+
```
|
|
89
|
+
create_initiative(
|
|
90
|
+
name: "{project name}",
|
|
91
|
+
description: "{description}",
|
|
92
|
+
owner: "{owner agent ID}",
|
|
93
|
+
teamMembers: ["{agent1}", "{agent2}"],
|
|
94
|
+
plan: "{markdown plan with all tasks as checkboxes}",
|
|
95
|
+
notes: "{any context, references, or notes from the conversation}"
|
|
96
|
+
)
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
Save the returned `projectId`.
|
|
100
|
+
|
|
101
|
+
### Step 6: Create Tasks
|
|
102
|
+
|
|
103
|
+
For each task, use `create_task`:
|
|
104
|
+
```
|
|
105
|
+
create_task(
|
|
106
|
+
agentId: "{assigned agent}",
|
|
107
|
+
title: "{task title}",
|
|
108
|
+
description: "{detailed description}",
|
|
109
|
+
priority: "{high|medium|low}",
|
|
110
|
+
project: "{project-slug}" // per-agent task board grouping
|
|
111
|
+
)
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
Save each `taskId`.
|
|
115
|
+
|
|
116
|
+
### Step 7: Link Tasks to Project
|
|
117
|
+
|
|
118
|
+
For each task, use `link_to_project`:
|
|
119
|
+
```
|
|
120
|
+
link_to_project(
|
|
121
|
+
projectId: "{projectId}",
|
|
122
|
+
type: "task",
|
|
123
|
+
value: { agentId: "{agent}", taskId: "{taskId}" }
|
|
124
|
+
)
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
### Step 8: Link Agents to Project
|
|
128
|
+
|
|
129
|
+
For each team member agent:
|
|
130
|
+
```
|
|
131
|
+
link_to_project(
|
|
132
|
+
projectId: "{projectId}",
|
|
133
|
+
type: "agent",
|
|
134
|
+
value: "{agentId}"
|
|
135
|
+
)
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
### Step 9: Save Credentials
|
|
139
|
+
|
|
140
|
+
If credentials were provided, write them to the project's credentials file:
|
|
141
|
+
```
|
|
142
|
+
Path: PersonalAgents/projects/{projectId}/credentials.json
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
Write only the credentials relevant to this project. Format:
|
|
146
|
+
```json
|
|
147
|
+
{
|
|
148
|
+
"github_token": "ghp_...",
|
|
149
|
+
"railway_token": "...",
|
|
150
|
+
"resend_api_key": "re_..."
|
|
151
|
+
}
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
### Step 10: Save Context
|
|
155
|
+
|
|
156
|
+
Write any reference notes, design decisions, or links to:
|
|
157
|
+
```
|
|
158
|
+
Path: PersonalAgents/projects/{projectId}/context.md
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
Use `update_project` with the `notes` field to update context.
|
|
162
|
+
|
|
163
|
+
---
|
|
164
|
+
|
|
165
|
+
## Phase 3: Execute (Optional)
|
|
166
|
+
|
|
167
|
+
### Step 11: Ask About Execution
|
|
168
|
+
|
|
169
|
+
Ask the user:
|
|
170
|
+
```
|
|
171
|
+
Project "{name}" is set up with {N} tasks. How would you like to proceed?
|
|
172
|
+
|
|
173
|
+
1. **Execute now** — I'll work through all tasks in this conversation
|
|
174
|
+
2. **Execute in background** — I'll set up autonomous execution (runs on a schedule, notifies you when done or blocked)
|
|
175
|
+
3. **Manual** — You'll direct me task by task
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
### If "Execute now" (Option 1):
|
|
179
|
+
Work through tasks sequentially in the conversation. For each task:
|
|
180
|
+
1. Update status to `in_progress` via `update_task`
|
|
181
|
+
2. Execute the task
|
|
182
|
+
3. Update status to `done` via `update_task`
|
|
183
|
+
4. If blocked, update to `blocked` and explain why
|
|
184
|
+
5. Move to the next task
|
|
185
|
+
|
|
186
|
+
### If "Execute in background" (Option 2):
|
|
187
|
+
Use `execute_project` MCP tool:
|
|
188
|
+
```
|
|
189
|
+
execute_project(
|
|
190
|
+
projectId: "{projectId}",
|
|
191
|
+
schedule: "*/15 * * * *", // or ask user preference
|
|
192
|
+
reportTo: "slack:{owner's slack channel}"
|
|
193
|
+
)
|
|
194
|
+
```
|
|
195
|
+
|
|
196
|
+
Report to the user:
|
|
197
|
+
```
|
|
198
|
+
Project is now executing autonomously.
|
|
199
|
+
- Schedule: every 15 minutes
|
|
200
|
+
- Notifications: {channel}
|
|
201
|
+
- To check status: ask me "what's the status of {project name}?"
|
|
202
|
+
- To pause: ask me to pause the project
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
### If "Manual" (Option 3):
|
|
206
|
+
Report the project is ready and wait for the user to direct.
|
|
207
|
+
|
|
208
|
+
---
|
|
209
|
+
|
|
210
|
+
## Phase 4: Review
|
|
211
|
+
|
|
212
|
+
### Step 12: Final Checklist
|
|
213
|
+
|
|
214
|
+
When all tasks are done (or user asks for status), run through the review task checklist:
|
|
215
|
+
- Verify each deliverable exists
|
|
216
|
+
- Verify deployments are live
|
|
217
|
+
- Verify agents are created and connected
|
|
218
|
+
- Verify artifacts are linked to the project
|
|
219
|
+
- Report pass/fail for each item
|
|
220
|
+
|
|
221
|
+
Use `get_project_status` to pull the current rollup.
|
|
222
|
+
|
|
223
|
+
---
|
|
224
|
+
|
|
225
|
+
## Quick Reference: MCP Tools Used
|
|
226
|
+
|
|
227
|
+
| Tool | When |
|
|
228
|
+
|------|------|
|
|
229
|
+
| `create_initiative` | Create the project entity |
|
|
230
|
+
| `create_task` | Create each task |
|
|
231
|
+
| `link_to_project` | Link tasks, agents, orgs, apps, artifacts |
|
|
232
|
+
| `update_task` | Update task status during execution |
|
|
233
|
+
| `update_project` | Update project status, plan, notes |
|
|
234
|
+
| `get_project_status` | Check progress |
|
|
235
|
+
| `execute_project` | Start autonomous background execution |
|
|
236
|
+
| `pause_project` | Pause autonomous execution |
|
|
237
|
+
| `create_agent` | Create agents needed by the project |
|
|
238
|
+
| `add_agent_route` | Connect agents to channels |
|
|
239
|
+
| `create_project` | Create per-agent task board grouping |
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: op_devbrowser
|
|
3
|
+
description: Use when controlling a browser programmatically — navigating pages, clicking, filling forms, scraping content, taking screenshots, or automating any web workflow. Trigger when user asks to visit a URL, interact with a site, extract web data, or automate browser tasks.
|
|
4
|
+
allowed-tools: Bash
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# op_devbrowser
|
|
8
|
+
|
|
9
|
+
Control a real Chromium browser from the CLI. Scripts run via `dev-browser` against a persistent background daemon.
|
|
10
|
+
|
|
11
|
+
## When to Use
|
|
12
|
+
|
|
13
|
+
- Navigate to a URL and read/interact with its content
|
|
14
|
+
- Scrape headlines, prices, data from any site
|
|
15
|
+
- Fill forms, click buttons, automate web workflows
|
|
16
|
+
- Take screenshots for visual inspection
|
|
17
|
+
- Connect to the user's running Chrome instance
|
|
18
|
+
|
|
19
|
+
## Quick Start
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
dev-browser <<'EOF'
|
|
23
|
+
const page = await browser.getPage("main");
|
|
24
|
+
await page.goto("https://example.com");
|
|
25
|
+
console.log(await page.title());
|
|
26
|
+
EOF
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
Named pages (`"main"`, `"login"`, etc.) **persist between runs** — no need to re-navigate.
|
|
30
|
+
|
|
31
|
+
## Core Browser API
|
|
32
|
+
|
|
33
|
+
```js
|
|
34
|
+
browser.getPage("name") // Get or create a named persistent page
|
|
35
|
+
browser.newPage() // Anonymous page (cleaned up after script)
|
|
36
|
+
browser.listPages() // All open tabs: [{id, url, title, name}]
|
|
37
|
+
browser.closePage("name") // Close a named page
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## Key Page Methods (Playwright)
|
|
41
|
+
|
|
42
|
+
```js
|
|
43
|
+
await page.goto("https://...")
|
|
44
|
+
await page.title()
|
|
45
|
+
await page.url()
|
|
46
|
+
await page.click("selector")
|
|
47
|
+
await page.fill("selector", "value")
|
|
48
|
+
await page.press("selector", "Enter")
|
|
49
|
+
await page.waitForSelector(".results")
|
|
50
|
+
await page.waitForURL("**/success")
|
|
51
|
+
await page.textContent("selector")
|
|
52
|
+
await page.evaluate(() => document.body.innerText) // plain JS only
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## AI Snapshot (element discovery)
|
|
56
|
+
|
|
57
|
+
```js
|
|
58
|
+
const result = await page.snapshotForAI();
|
|
59
|
+
console.log(result.full);
|
|
60
|
+
// Then use page.getByRole("button", { name: "Submit" }).click()
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
Use `snapshotForAI()` to discover elements on unknown pages. Skip it when you already know selectors.
|
|
64
|
+
|
|
65
|
+
## Screenshots & File I/O
|
|
66
|
+
|
|
67
|
+
```js
|
|
68
|
+
// Screenshot
|
|
69
|
+
const buf = await page.screenshot();
|
|
70
|
+
const path = await saveScreenshot(buf, "debug.png");
|
|
71
|
+
console.log(path); // ~/.dev-browser/tmp/debug.png
|
|
72
|
+
|
|
73
|
+
// Write / read temp files
|
|
74
|
+
await writeFile("data.json", JSON.stringify(result));
|
|
75
|
+
const raw = await readFile("data.json");
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
## Sandbox Constraints
|
|
79
|
+
|
|
80
|
+
Scripts run in QuickJS — NOT Node.js:
|
|
81
|
+
- No `require()` / `import()`
|
|
82
|
+
- No `process`, `fs`, `path`, `fetch`
|
|
83
|
+
- No TypeScript syntax inside `page.evaluate()`
|
|
84
|
+
|
|
85
|
+
## Connect to Existing Chrome
|
|
86
|
+
|
|
87
|
+
```bash
|
|
88
|
+
# Auto-discover Chrome with --remote-debugging-port=9222
|
|
89
|
+
dev-browser --connect <<'EOF'
|
|
90
|
+
const tabs = await browser.listPages();
|
|
91
|
+
console.log(JSON.stringify(tabs, null, 2));
|
|
92
|
+
EOF
|
|
93
|
+
|
|
94
|
+
# Specific endpoint
|
|
95
|
+
dev-browser --connect http://localhost:9222 <<'EOF'
|
|
96
|
+
const page = await browser.getPage("TARGET_ID");
|
|
97
|
+
console.log(await page.title());
|
|
98
|
+
EOF
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
## CLI Reference
|
|
102
|
+
|
|
103
|
+
```bash
|
|
104
|
+
dev-browser run script.js # Run a script file
|
|
105
|
+
dev-browser --headless <<'EOF' # Headless mode
|
|
106
|
+
dev-browser --timeout 10 <<'EOF' # Fail fast (default 30s)
|
|
107
|
+
dev-browser status # Daemon status
|
|
108
|
+
dev-browser browsers # List browser instances
|
|
109
|
+
dev-browser stop # Stop daemon + all browsers
|
|
110
|
+
dev-browser install # Install Playwright + Chromium
|
|
111
|
+
dev-browser install-skill # Install skill into agent dirs
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
## Common Patterns
|
|
115
|
+
|
|
116
|
+
**Scrape data:**
|
|
117
|
+
```js
|
|
118
|
+
const page = await browser.getPage("scrape");
|
|
119
|
+
await page.goto("https://news.ycombinator.com");
|
|
120
|
+
const titles = await page.$$eval(".titleline > a", els => els.map(e => e.textContent));
|
|
121
|
+
console.log(JSON.stringify(titles));
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
**Error recovery:**
|
|
125
|
+
```js
|
|
126
|
+
const page = await browser.getPage("checkout");
|
|
127
|
+
const path = await saveScreenshot(await page.screenshot(), "debug.png");
|
|
128
|
+
console.log(JSON.stringify({ screenshot: path, url: page.url(), title: await page.title() }));
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
## Tips
|
|
132
|
+
|
|
133
|
+
- Use short `--timeout 10` so scripts fail fast instead of hanging
|
|
134
|
+
- Keep page names stable (`"login"`, `"results"`) — resume after failures
|
|
135
|
+
- One script = one action. Log state at end for the next decision.
|
|
136
|
+
- `--browser my-project` gives isolated browser state per project
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: sop_brandguidelines
|
|
3
|
+
description: Apply consistent Anthropic brand identity styling to artifacts including colors, typography, and visual elements. Use when creating branded materials or applying company styling.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Brand Styling Guide
|
|
7
|
+
|
|
8
|
+
Apply consistent brand identity guidelines for visual styling of artifacts.
|
|
9
|
+
|
|
10
|
+
## Brand Elements
|
|
11
|
+
|
|
12
|
+
### Color Palette
|
|
13
|
+
|
|
14
|
+
| Name | Hex | Usage |
|
|
15
|
+
|------|-----|-------|
|
|
16
|
+
| Dark | #141413 | Primary text |
|
|
17
|
+
| Light | #faf9f5 | Backgrounds |
|
|
18
|
+
| Orange | #d97757 | Accent |
|
|
19
|
+
| Blue | #6a9bcc | Accent |
|
|
20
|
+
| Green | #788c5d | Accent |
|
|
21
|
+
|
|
22
|
+
### Typography
|
|
23
|
+
|
|
24
|
+
**Headings**: Poppins (with Arial fallback)
|
|
25
|
+
- Apply to headings 24pt and larger
|
|
26
|
+
- Clean, modern sans-serif
|
|
27
|
+
|
|
28
|
+
**Body Text**: Lora (with Georgia fallback)
|
|
29
|
+
- Apply to body copy
|
|
30
|
+
- Elegant serif for readability
|
|
31
|
+
|
|
32
|
+
### Implementation
|
|
33
|
+
|
|
34
|
+
The system automatically:
|
|
35
|
+
- Applies Poppins to headings (24pt+)
|
|
36
|
+
- Applies Lora to body text
|
|
37
|
+
- Selects colors based on background context
|
|
38
|
+
- Rotates accent colors for visual variety
|
|
39
|
+
|
|
40
|
+
### Font Fallbacks
|
|
41
|
+
|
|
42
|
+
If preferred fonts aren't available:
|
|
43
|
+
- Headings: Arial
|
|
44
|
+
- Body: Georgia
|
|
45
|
+
|
|
46
|
+
Pre-installation optimizes results, but fallbacks maintain consistency.
|
|
47
|
+
|
|
48
|
+
## Application Guidelines
|
|
49
|
+
|
|
50
|
+
### Text Hierarchy
|
|
51
|
+
|
|
52
|
+
```
|
|
53
|
+
H1: Poppins, 32pt, Dark (#141413)
|
|
54
|
+
H2: Poppins, 24pt, Dark (#141413)
|
|
55
|
+
Body: Lora, 14pt, Dark (#141413)
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### Accent Usage
|
|
59
|
+
|
|
60
|
+
Rotate through accent colors for:
|
|
61
|
+
- Buttons and CTAs
|
|
62
|
+
- Highlights
|
|
63
|
+
- Decorative elements
|
|
64
|
+
- Data visualization
|
|
65
|
+
|
|
66
|
+
### Background Patterns
|
|
67
|
+
|
|
68
|
+
- Primary background: Light (#faf9f5)
|
|
69
|
+
- Cards/panels: White (#ffffff) on Light background
|
|
70
|
+
- Dark sections: Dark (#141413) with Light text
|
|
71
|
+
|
|
72
|
+
### Contrast Requirements
|
|
73
|
+
|
|
74
|
+
- Ensure sufficient contrast for accessibility
|
|
75
|
+
- Test text on colored backgrounds
|
|
76
|
+
- Use Dark text on Light backgrounds
|
|
77
|
+
- Use Light text on Dark backgrounds
|
|
78
|
+
|
|
79
|
+
## CSS Variables
|
|
80
|
+
|
|
81
|
+
```css
|
|
82
|
+
:root {
|
|
83
|
+
--color-dark: #141413;
|
|
84
|
+
--color-light: #faf9f5;
|
|
85
|
+
--color-accent-orange: #d97757;
|
|
86
|
+
--color-accent-blue: #6a9bcc;
|
|
87
|
+
--color-accent-green: #788c5d;
|
|
88
|
+
|
|
89
|
+
--font-heading: 'Poppins', Arial, sans-serif;
|
|
90
|
+
--font-body: 'Lora', Georgia, serif;
|
|
91
|
+
}
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
## Quick Reference
|
|
95
|
+
|
|
96
|
+
| Element | Font | Size | Color |
|
|
97
|
+
|---------|------|------|-------|
|
|
98
|
+
| H1 | Poppins | 32pt | Dark |
|
|
99
|
+
| H2 | Poppins | 24pt | Dark |
|
|
100
|
+
| H3 | Poppins | 20pt | Dark |
|
|
101
|
+
| Body | Lora | 14pt | Dark |
|
|
102
|
+
| Caption | Lora | 12pt | Dark |
|
|
103
|
+
| Button | Poppins | 14pt | Light on accent |
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: sop_docx
|
|
3
|
+
description: Comprehensive Word document operations - content analysis, document creation, and editing. Use when working with .docx files including reading, creating, or modifying Word documents.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# DOCX Processing Guide
|
|
7
|
+
|
|
8
|
+
## Core Capabilities
|
|
9
|
+
|
|
10
|
+
1. **Content Analysis**: Extract text via pandoc or access raw XML for comments, formatting, and metadata
|
|
11
|
+
2. **Document Creation**: Build new .docx files using docx-js library
|
|
12
|
+
3. **Document Editing**: Modify existing files using Python-based Document library for OOXML manipulation
|
|
13
|
+
|
|
14
|
+
## Reading Documents
|
|
15
|
+
|
|
16
|
+
### Text Extraction (Simple)
|
|
17
|
+
```bash
|
|
18
|
+
# Convert to markdown - preserves structure and tracked changes
|
|
19
|
+
pandoc document.docx -o document.md
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
### Raw XML Access
|
|
23
|
+
For comments, formatting, metadata, and complex structures:
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
# Unpack document
|
|
27
|
+
python ooxml/scripts/unpack.py document.docx output_dir/
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
Key XML files:
|
|
31
|
+
- `word/document.xml` - Main content
|
|
32
|
+
- `word/comments.xml` - Comments
|
|
33
|
+
- `word/styles.xml` - Style definitions
|
|
34
|
+
- `word/settings.xml` - Document settings
|
|
35
|
+
|
|
36
|
+
## Creating Documents (docx-js)
|
|
37
|
+
|
|
38
|
+
Read the complete docx-js.md documentation before implementing.
|
|
39
|
+
|
|
40
|
+
```javascript
|
|
41
|
+
import { Document, Paragraph, TextRun, Packer } from "docx";
|
|
42
|
+
|
|
43
|
+
const doc = new Document({
|
|
44
|
+
sections: [{
|
|
45
|
+
properties: {},
|
|
46
|
+
children: [
|
|
47
|
+
new Paragraph({
|
|
48
|
+
children: [
|
|
49
|
+
new TextRun("Hello World"),
|
|
50
|
+
new TextRun({
|
|
51
|
+
text: "Bold text",
|
|
52
|
+
bold: true,
|
|
53
|
+
}),
|
|
54
|
+
],
|
|
55
|
+
}),
|
|
56
|
+
],
|
|
57
|
+
}],
|
|
58
|
+
});
|
|
59
|
+
|
|
60
|
+
// Save document
|
|
61
|
+
Packer.toBuffer(doc).then((buffer) => {
|
|
62
|
+
fs.writeFileSync("output.docx", buffer);
|
|
63
|
+
});
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
## Editing Documents (Python)
|
|
67
|
+
|
|
68
|
+
### Workflow
|
|
69
|
+
1. Unpack: `python ooxml/scripts/unpack.py document.docx unpacked/`
|
|
70
|
+
2. Edit XML files via Document library API
|
|
71
|
+
3. Repack: `python ooxml/scripts/pack.py unpacked/ edited.docx`
|
|
72
|
+
|
|
73
|
+
## Tracked Changes (Redlining)
|
|
74
|
+
|
|
75
|
+
For legal, academic, business, or government documents:
|
|
76
|
+
|
|
77
|
+
### Principles
|
|
78
|
+
- Make minimal, precise edits
|
|
79
|
+
- Mark only changed text, not entire passages
|
|
80
|
+
- Group changes into batches of 3-10 related modifications
|
|
81
|
+
- Validate after each batch
|
|
82
|
+
|
|
83
|
+
### XML Structure for Changes
|
|
84
|
+
```xml
|
|
85
|
+
<!-- Insertion -->
|
|
86
|
+
<w:ins w:author="Author" w:date="2024-01-15T10:00:00Z">
|
|
87
|
+
<w:r><w:t>New text</w:t></w:r>
|
|
88
|
+
</w:ins>
|
|
89
|
+
|
|
90
|
+
<!-- Deletion -->
|
|
91
|
+
<w:del w:author="Author" w:date="2024-01-15T10:00:00Z">
|
|
92
|
+
<w:r><w:delText>Removed text</w:delText></w:r>
|
|
93
|
+
</w:del>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
## Document Visualization
|
|
97
|
+
|
|
98
|
+
Convert to images for visual analysis:
|
|
99
|
+
|
|
100
|
+
```bash
|
|
101
|
+
# DOCX to PDF (LibreOffice)
|
|
102
|
+
soffice --headless --convert-to pdf document.docx
|
|
103
|
+
|
|
104
|
+
# PDF to JPEG
|
|
105
|
+
pdftoppm -jpeg -r 150 document.pdf page
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
## Quick Reference
|
|
109
|
+
|
|
110
|
+
| Task | Tool | Method |
|
|
111
|
+
|------|------|--------|
|
|
112
|
+
| Extract text | pandoc | `pandoc doc.docx -o doc.md` |
|
|
113
|
+
| Read XML | unpack.py | Access raw OOXML |
|
|
114
|
+
| Create new | docx-js | Document + Packer |
|
|
115
|
+
| Edit existing | Python OOXML | Unpack, modify, repack |
|
|
116
|
+
| Track changes | OOXML | `<w:ins>`, `<w:del>` elements |
|
|
117
|
+
| Visualize | LibreOffice + pdftoppm | Convert to images |
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: frontend-design
|
|
3
|
+
description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
|
|
7
|
+
|
|
8
|
+
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
|
|
9
|
+
|
|
10
|
+
## Design Thinking
|
|
11
|
+
|
|
12
|
+
Before coding, understand the context and commit to a BOLD aesthetic direction:
|
|
13
|
+
|
|
14
|
+
- **Purpose**: What problem does this interface solve? Who uses it?
|
|
15
|
+
- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
|
|
16
|
+
- **Constraints**: Technical requirements (framework, performance, accessibility).
|
|
17
|
+
- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
|
|
18
|
+
|
|
19
|
+
**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
|
|
20
|
+
|
|
21
|
+
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
|
|
22
|
+
|
|
23
|
+
- Production-grade and functional
|
|
24
|
+
- Visually striking and memorable
|
|
25
|
+
- Cohesive with a clear aesthetic point-of-view
|
|
26
|
+
- Meticulously refined in every detail
|
|
27
|
+
|
|
28
|
+
## Frontend Aesthetics Guidelines
|
|
29
|
+
|
|
30
|
+
Focus on:
|
|
31
|
+
|
|
32
|
+
- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
|
|
33
|
+
- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
|
|
34
|
+
- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
|
|
35
|
+
- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
|
|
36
|
+
- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
|
|
37
|
+
|
|
38
|
+
NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
|
|
39
|
+
|
|
40
|
+
Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
|
|
41
|
+
|
|
42
|
+
**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
|
|
43
|
+
|
|
44
|
+
Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.
|