@mohammadhprp/system-prompt 0.11.0 → 0.11.2

package/framework/skills/create-adr/SKILL.md

@@ -0,0 +1,429 @@
+---
+name: create-adr
+description: Creates Architecture Decision Records (ADRs) to document significant architectural choices and their rationale for future team members. Use when the user says "write an ADR", "document this decision", "record why we chose X", "add an architecture decision record", "create an ADR for", or wants to capture the reasoning behind a technical choice so the team understands it later. Do NOT use when the decision hasn't been made yet (use create-rfc instead), for implementation planning (use technical-design-doc-creator), or for general documentation.
+license: CC-BY-4.0
+metadata:
+  author: Tech Leads Club - github.com/tech-leads-club
+  version: '1.0.0'
+---
+
+# ADR Creator
+
+You are an expert in creating Architecture Decision Records (ADRs) — concise, durable documents that capture the context, decision, and consequences of significant architectural choices so future team members understand *why* things are the way they are.
+
+## When to Use This Skill
+
+Use this skill when:
+
+- User asks to "write an ADR", "create an ADR", "add an architecture decision record"
+- User wants to "document why we chose X", "record this decision", "capture this architectural choice"
+- A significant technical decision has been made (or is being finalized) and needs to be recorded
+- The team wants to preserve the reasoning behind a choice for future engineers
+- User asks "why did we choose X" and the answer should be written down permanently
+
+Do NOT use for:
+
+- Decisions not yet made — use `create-rfc` to drive the decision process first
+- Implementation planning after the decision — use `technical-design-doc-creator`
+- Simple configuration choices or trivial code decisions
+- Meeting notes or general documentation
+
+## ADR vs RFC — Critical Distinction
+
+| Aspect | ADR | RFC |
+|--------|-----|-----|
+| **Timing** | Decision already made (or being finalized) | Before the decision (seeking input) |
+| **Purpose** | Record for future team members | Proposal seeking approval |
+| **Audience** | Engineers joining months or years later | Current stakeholders |
+| **Length** | Short — 200–500 words | Long — thorough comparison |
+| **Mutability** | Immutable — superseded, never edited | Iterative — evolves during review |
+| **Tone** | Historical record | Deliberative proposal |
+
+If the user says "I need to decide whether to do X" → use `create-rfc`.
+If the user says "We decided to do X, let me document it" → use this skill.
+
+## Language Adaptation
+
+**CRITICAL**: Always generate the ADR in the **same language as the user's request**. Detect the language automatically.
+
+- Keep technical terms in English when appropriate (e.g., "ADR", "API", "microservices")
+- All section headers and content should be in the user's language
+- Company/product names remain in original form
+
+## ADR Format Selection
+
+Three formats are widely used. Detect the right one from context, or ask:
+
+| Format | Best For | Length |
+|--------|----------|--------|
+| **MADR** (Markdown ADR) | Teams that want structured options comparison | Medium |
+| **Nygard** (original) | Minimal, fast recording; obvious decisions | Short |
+| **Y-Statement** | Inline documentation, very compact contexts | One paragraph |
+
+Default to **MADR** unless the user specifies otherwise or the decision is very simple.
+
+---
+
+## Interactive Workflow
+
+### Step 1: Gather Context (if not provided)
+
+If the user provides minimal context, use **AskQuestion** to collect essential information:
+
+```json
+{
+  "title": "ADR Information",
+  "questions": [
+    {
+      "id": "adr_decision",
+      "prompt": "What was the decision made? (e.g., 'Use PostgreSQL for primary storage')",
+      "options": [
+        { "id": "free_text", "label": "I'll describe it in my next message" }
+      ]
+    },
+    {
+      "id": "adr_format",
+      "prompt": "Which ADR format would you like to use?",
+      "options": [
+        { "id": "madr", "label": "MADR — structured, with options comparison (recommended)" },
+        { "id": "nygard", "label": "Nygard — minimal: Context / Decision / Consequences" },
+        { "id": "y_statement", "label": "Y-Statement — single paragraph, very compact" }
+      ]
+    },
+    {
+      "id": "adr_status",
+      "prompt": "What is the current status of this decision?",
+      "options": [
+        { "id": "accepted", "label": "Accepted — decision is final" },
+        { "id": "proposed", "label": "Proposed — decision is being finalized" },
+        { "id": "deprecated", "label": "Deprecated — this approach is no longer recommended" },
+        { "id": "superseded", "label": "Superseded — replaced by a newer decision" }
+      ]
+    },
+    {
+      "id": "adr_supersedes",
+      "prompt": "Does this ADR supersede a previous decision?",
+      "options": [
+        { "id": "yes", "label": "Yes — I'll provide the ADR number/title" },
+        { "id": "no", "label": "No — this is a new decision" }
+      ]
+    }
+  ]
+}
+```
+
+### Step 2: Validate Mandatory Fields
+
+**MANDATORY fields — ask if missing**:
+
+- **Decision title** (noun phrase, not a question — e.g., "Use Redis for session storage")
+- **Date** of the decision (or today's date)
+- **Status** (Accepted / Proposed / Deprecated / Superseded)
+- **Context** — the forces, constraints, and situation that made this decision necessary
+- **The decision itself** — what was chosen and why
+- **Consequences** — what becomes easier, harder, or different as a result
+
+**RECOMMENDED fields**:
+- **Decision drivers** — the key criteria or constraints
+- **Options considered** — what alternatives were evaluated
+- **Pros/cons per option** — honest trade-off assessment
+- **Decision outcome rationale** — why this option over the others
+- **Links** — related ADRs, RFCs, tickets, or documentation
+
+If any mandatory fields are missing, ask IN THE USER'S LANGUAGE before generating the document.
+
+### Step 3: Assign ADR Number
+
+Scan the existing ADR directory for the next sequential number:
+
+1. Check if an ADR directory exists (`docs/adr/`, `docs/decisions/`, `.adr/`, or `adr/`)
+2. Find the highest existing number
+3. Assign the next number (e.g., if ADR-007 exists, this becomes ADR-008)
+4. If no directory exists, start at ADR-001 and suggest creating the directory
+
+### Step 4: Generate the ADR
+
+Generate the ADR following the format selected in Step 1.
+
+### Step 5: Offer File Placement
+
+After generating, ask where to save it:
+
+```
+ADR Created: "ADR-{NNN}: {Title}"
+
+Suggested file path: docs/adr/{NNN}-{kebab-case-title}.md
+
+Would you like me to:
+1. Save it to docs/adr/ (recommended convention)
+2. Save it to a different location
+3. Just show the content (I'll place it manually)
+```
+
+---
+
+## Document Templates
+
+### MADR Format (Default)
+
+```markdown
+# ADR-{NNN}: {Title}
+
+- **Date**: YYYY-MM-DD
+- **Status**: Accepted | Proposed | Deprecated | Superseded by [ADR-NNN]({link})
+- **Deciders**: {who was involved in the decision}
+- **Tags**: {optional: architecture, security, performance, database, etc.}
+
+## Context and Problem Statement
+
+{Describe the context and the problem or question that led to this decision.
+2–4 sentences. What situation forced this choice?}
+
+## Decision Drivers
+
+- {Driver 1 — e.g., "Must support 10k concurrent users"}
+- {Driver 2 — e.g., "Team has no Go experience"}
+- {Driver 3 — e.g., "Must be deployable on-premise"}
+
+## Considered Options
+
+- {Option A}
+- {Option B}
+- {Option C — "Do nothing / status quo" when relevant}
+
+## Decision Outcome
+
+Chosen option: **"{Option A}"**, because {concise rationale tied to decision drivers}.
+
+### Positive Consequences
+
+- {Benefit 1}
+- {Benefit 2}
+
+### Negative Consequences
+
+- {Trade-off 1 — be honest}
+- {Trade-off 2}
+
+## Pros and Cons of the Options
+
+### {Option A} ✅ Chosen
+
+- ✅ {Pro 1}
+- ✅ {Pro 2}
+- ❌ {Con 1}
+
+### {Option B}
+
+- ✅ {Pro 1}
+- ❌ {Con 1}
+- ❌ {Con 2}
+
+### {Option C}
+
+- ✅ {Pro 1}
+- ❌ {Con 1}
+
+## Links
+
+- {Related ADR, RFC, ticket, or documentation}
+- Supersedes: [ADR-{NNN}: {Title}]({link}) (if applicable)
+- Superseded by: [ADR-{NNN}: {Title}]({link}) (if applicable)
+```
+
+---
+
+### Nygard Format (Minimal)
+
+```markdown
+# ADR-{NNN}: {Title}
+
+## Status
+
+Accepted | Proposed | Deprecated | Superseded by ADR-{NNN}
+
+## Context
+
+{What is the situation that led to this decision?
+What forces are at play — technical, business, organizational?
+What constraints exist? 2–5 sentences.}
+
+## Decision
+
+{What did we decide to do?
+State it directly, in active voice: "We will use X" or "We decided to adopt Y."
+Include a brief rationale — why this option over the alternatives.}
+
+## Consequences
+
+{What becomes easier or better as a result?}
+{What becomes harder or worse? Be honest about trade-offs.}
+{What new concerns or constraints does this introduce?}
+```
+
+---
+
+### Y-Statement Format (Compact)
+
+```markdown
+# ADR-{NNN}: {Title}
+
+**Date**: YYYY-MM-DD | **Status**: Accepted
+
+In the context of **{situation/use case}**,
+facing **{concern or constraint}**,
+we decided **{the option chosen}**,
+to achieve **{quality attribute or goal}**,
+accepting **{the downside or trade-off}**.
+
+**Deciders**: {names or roles}
+**Links**: {related ADRs, tickets}
+```
+
+---
+
+## ADR Quality Checklist
+
+Before finalizing, verify:
+
+- [ ] **Title** is a noun phrase describing the decision (not a question, not a vague label)
+- [ ] **Date** is included (decisions without dates lose context quickly)
+- [ ] **Status** is set correctly — Accepted, Proposed, Deprecated, or Superseded
+- [ ] **Context** explains the *forces* that made this decision necessary, not just what was done
+- [ ] **Decision** is stated directly and tied to the context
+- [ ] **Consequences** include honest trade-offs — not just positives
+- [ ] **Options** (MADR format) include at least 2 alternatives actually considered
+- [ ] **Supersedes / superseded by** links are included when applicable
+- [ ] **File** follows naming convention: `NNN-kebab-case-title.md`
+- [ ] **Number** is sequential in the ADR directory
+
+---
+
+## ADR File Naming Convention
+
+```
+docs/adr/
+├── 001-use-postgresql-for-primary-storage.md
+├── 002-adopt-event-driven-architecture.md
+├── 003-replace-jenkins-with-github-actions.md   ← supersedes ADR-001 if relevant
+└── README.md                                     ← optional index
+```
+
+- Zero-padded numbers: `001`, `002`, ... `099`, `100`
+- Kebab-case title
+- `.md` extension
+- Common directories: `docs/adr/`, `docs/decisions/`, `adr/`, `.adr/`
+
+---
+
+## Common Anti-Patterns to Avoid
+
+### Title as a Question
+
+**BAD**: `# ADR-001: Should we use PostgreSQL?`
+
+**GOOD**: `# ADR-001: Use PostgreSQL for Primary Storage`
+
+Titles should record the decision, not the question. Future readers need to know *what was decided*, not what was considered.
+
+---
+
+### Vague Context
+
+**BAD**:
+```
+We needed a database and chose PostgreSQL.
+```
+
+**GOOD**:
+```
+Our application requires a relational database with strong ACID guarantees.
+The team has deep PostgreSQL experience. MySQL was evaluated but lacks
+native support for JSONB columns, which our schema design requires.
+Our cloud provider (AWS) offers managed PostgreSQL via RDS at acceptable cost.
+```
+
+Context should explain the *forces* — why wasn't the alternative obviously better?
+
+---
+
+### Consequences Without Trade-offs
+
+**BAD**:
+```
+## Consequences
+PostgreSQL is fast and reliable.
+```
+
+**GOOD**:
+```
+## Consequences
+- Enables JSONB columns and advanced indexing for our query patterns
+- Team expertise means fast onboarding and fewer operational surprises
+- Adds operational burden compared to a managed NoSQL service
+- Schema migrations require careful planning in a relational model
+```
+
+Honest trade-offs are what make ADRs valuable years later.
+
+---
+
+### Editing Instead of Superseding
+
+**BAD**: Editing an old ADR to change the decision after the fact.
+
+**GOOD**: Creating a new ADR with `Status: Superseded by ADR-{NNN}` on the old one and linking back.
+
+ADRs are historical records. The old decision was correct *given what was known at the time*. Superseding preserves that context.
+
+---
+
+### Missing the "Why Not" Rationale
+
+**BAD**:
+```
+## Decision
+We will use Redis for session storage.
+```
+
+**GOOD**:
+```
+## Decision
+We will use Redis for session storage. We considered storing sessions in PostgreSQL
+(already in our stack) but Redis's built-in TTL support and in-memory performance
+make it significantly better suited for high-frequency session reads. The operational
+cost of an additional service is justified by the simplified session expiry logic.
+```
+
+The rationale is *why this option and not the others* — not just what was chosen.
+
+---
+
+## Important Notes
+
+- **ADRs are immutable** — never edit the decision. Supersede with a new ADR.
+- **Short is better** — 200–500 words is ideal. If it needs to be longer, move detail to a linked TDD or RFC.
+- **Context ages** — always date the ADR; what seems obvious now won't be in 3 years.
+- **Honest consequences** — a one-sided ADR loses credibility. Future engineers will hit the downsides regardless.
+- **Link everything** — related ADRs, the RFC that drove the decision, tickets, PR references.
+- **Language adaptation** — always write in the user's language.
+- **Number sequentially** — check the directory before assigning a number.
+
+## Example Prompts that Trigger This Skill
+
+### English
+- "Write an ADR for using PostgreSQL as our primary database"
+- "Document our decision to adopt GraphQL"
+- "Create an ADR for moving our frontend to Next.js"
+- "I need to record why we chose Kafka over RabbitMQ"
+- "Add an architecture decision record for our authentication approach"
+
+### Portuguese
+- "Escreva um ADR sobre a decisão de usar PostgreSQL"
+- "Documente a decisão de adotar GraphQL no projeto"
+- "Crie um ADR explicando por que escolhemos Kafka"
+
+### Spanish
+- "Escribe un ADR sobre la decisión de usar PostgreSQL"
+- "Documenta la decisión de adoptar microservicios"
+- "Crea un ADR explicando por qué elegimos Next.js"

package/framework/skills/create-adr/examples.md

@@ -0,0 +1,35 @@
+# Create ADR Examples
+
+## Record a finalized database decision
+
+User: "Write an ADR for using PostgreSQL as our primary database."
+
+Good agent behavior:
+
+- Detect the user's language and generate the ADR in it, keeping technical terms like "ADR" and "API" in English.
+- Gather the mandatory fields: decision title, date, status, context, decision, and consequences.
+- Scan the ADR directory for the next sequential number before assigning one.
+- Default to the MADR format with a structured comparison of the options considered.
+- Include honest trade-offs in the consequences, not just positives.
+
+## Capture a decision that supersedes an old one
+
+User: "We're replacing Jenkins with GitHub Actions. Document why."
+
+Good agent behavior:
+
+- Create a new ADR with status "Accepted" rather than editing the old one.
+- Link it as superseding the Jenkins decision, and note that the old ADR should be marked "Superseded by ADR-{NNN}".
+- Explain the forces behind the change and why the new choice wins given the current constraints.
+- Follow the file naming convention with a zero-padded sequential number.
+
+## The decision hasn't been made yet
+
+User: "I'm trying to decide whether to adopt GraphQL."
+
+Good agent behavior:
+
+- Recognize this is an RFC situation, not an ADR: the decision is not yet made.
+- Point the user to `create-rfc` to drive the decision process first.
+- Explain that ADRs record decisions that are finalized, while RFCs are proposals seeking input.
+- Offer to create the RFC instead of forcing an ADR before the decision exists.

package/framework/skills/docs-writer/SKILL.md

@@ -0,0 +1,39 @@
+---
+name: docs-writer
+description: Write, review, and edit documentation files with consistent structure, tone, and technical accuracy. Use when creating docs, reviewing markdown files, writing READMEs, updating `/docs` directories, or when user says "write documentation", "review this doc", "improve this README", "create a guide", or "edit markdown". Do NOT use for code comments, inline JSDoc, or API reference generation.
+---
+
+# `docs-writer` skill instructions
+
+As an expert technical writer and editor, your goal is to produce and refine documentation that is accurate, clear, consistent, and easy for users to understand. You must adhere to the documentation contribution process outlined in `CONTRIBUTING.md`.
+
+## Step 1: Understand the goal and create a plan
+
+1. **Clarify the request:** Fully understand the user's documentation request. Identify the core feature, command, or concept that needs work.
+2. **Differentiate the task:** Determine if the request is primarily for **writing** new content or **editing** existing content. If the request is ambiguous (e.g., "fix the docs"), ask the user for clarification.
+3. **Formulate a plan:** Create a clear, step-by-step plan for the required changes.
+
+## Step 2: Investigate and gather information
+
+1. **Read the code:** Thoroughly examine the relevant codebase, primarily within the `packages/` directory, to ensure your work is backed by the implementation and to identify any gaps.
+2. **Identify files:** Locate the specific documentation files in the `docs/` directory that need to be modified. Always read the latest version of a file before you begin work.
+3. **Check for connections:** Consider related documentation. If you change a command's behavior, check for other pages that reference it. If you add a new page, check if `docs/sidebar.json` needs to be updated. Make sure all links are up to date.
+
+## Step 3: Write or edit the documentation
+
+1. **Follow the style guide:** Adhere to the rules in `references/style-guide.md`. Read this file to understand the project's documentation standards.
+2. Ensure the new documentation accurately reflects the features in the code.
+3. **Use `replace` and `write_file`:** Use file system tools to apply your planned changes. For small edits, `replace` is preferred. For new files or large rewrites, `write_file` is more appropriate.
+
+### Sub-step: Editing existing documentation (as clarified in Step 1)
+
+- **Gaps:** Identify areas where the documentation is incomplete or no longer reflects existing code.
+- **Tone:** Ensure the tone is active and engaging, not passive.
+- **Clarity:** Correct awkward wording, spelling, and grammar. Rephrase sentences to make them easier for users to understand.
+- **Consistency:** Check for consistent terminology and style across all edited documents.
+
+## Step 4: Verify and finalize
+
+1. **Review your work:** After making changes, re-read the files to ensure the documentation is well-formatted, and the content is correct based on existing code.
+2. **Link verification:** Verify the validity of all links in the new content. Verify the validity of existing links leading to the page with the new content or deleted content.
+3. **Offer to run npm format:** Once all changes are complete, offer to run the project's formatting script to ensure consistency by proposing the command: `npm run format`

package/framework/skills/docs-writer/examples.md

@@ -0,0 +1,34 @@
+# Docs Writer Examples
+
+## Write a README from scratch
+
+User: "Create a README for the CLI package."
+
+Good agent behavior:
+
+- Read the relevant code to ensure the README is backed by the actual implementation.
+- Follow the project's style guide for structure and tone.
+- Cover install, usage, and configuration with accurate command examples.
+- Verify every link in the new content points at a real target.
+
+## Review and improve existing docs
+
+User: "Improve this markdown file, it reads awkwardly."
+
+Good agent behavior:
+
+- Read the latest version of the file before starting.
+- Fix unclear phrasing, grammar, and passive voice while preserving the technical meaning.
+- Check for consistent terminology across the edited document and related pages.
+- Verify that links leading to the page still resolve after the edits.
+
+## Update docs for a behavior change
+
+User: "We renamed `build` to `compile`. Update the docs."
+
+Good agent behavior:
+
+- Search for every page referencing the command, not just the obvious one.
+- Update the command docs and any tutorial, reference, or sidebar entries that mention it.
+- Keep terminology consistent across all edited pages.
+- Offer to run the project's formatting script to keep things consistent.

package/framework/skills/docs-writer/references/style-guide.md

@@ -0,0 +1,72 @@
+# Documentation style guide
+
+## I. Core principles
+
+1. **Clarity:** Write for easy understanding. Prioritize clear, direct, and simple language.
+2. **Consistency:** Use consistent terminology, formatting, and style throughout the documentation.
+3. **Accuracy:** Ensure all information is technically correct and up-to-date.
+4. **Accessibility:** Design documentation to be usable by everyone. Focus on semantic structure, clear link text, and image alternatives.
+5. **Global audience:** Write in standard US English. Avoid slang, idioms, and cultural references.
+6. **Prescriptive:** Guide the reader by recommending specific actions and paths, especially for complex tasks.
+
+## II. Voice and tone
+
+- **Professional yet friendly:** Maintain a helpful, knowledgeable, and conversational tone without being frivolous.
+- **Direct:** Get straight to the point. Keep paragraphs short and focused.
+- **Second person:** Address the reader as "you."
+- **Present tense:** Use the present tense to describe functionality (e.g., "The API returns a JSON object.").
+- **Avoid:** Jargon, slang, marketing hype, and overly casual language.
+
+## III. Language and grammar
+
+- **Active voice:** Prefer active voice over passive voice.
+  - _Example:_ "The system sends a notification." (Not: "A notification is sent by the system.")
+- **Contractions:** Use common contractions (e.g., "don't," "it's") to maintain a natural tone.
+- **Simple vocabulary:** Use common words. Define technical terms when necessary.
+- **Conciseness:** Keep sentences short and focused, but don't omit helpful information.
+- **"Please":** Avoid using the word "please."
+
+## IV. Procedures and steps
+
+- Start each step with an imperative verb (e.g., "Connect to the database").
+- Number steps sequentially.
+- Introduce lists of steps with a complete sentence.
+- Put conditions before instructions, not after.
+- Provide clear context for where the action takes place (e.g., "In the administration console...").
+- Indicate optional steps clearly (e.g., "Optional: ...").
+
+## V. Formatting and punctuation
+
+- **Text wrap:** Wrap all text at 80 characters, with exceptions for long links or tables.
+- **Headings, titles, and bold text:** Use sentence case. Structure headings hierarchically.
+- **Lists:** Use numbered lists for sequential steps and bulleted lists for all other lists. Keep list items parallel in structure.
+- **Serial comma:** Use the serial comma (e.g., "one, two, and three").
+- **Punctuation:** Use standard American punctuation. Place periods inside quotation marks.
+- **Dates:** Use unambiguous date formatting (e.g., "January 22, 2026").
+
+## VI. UI, code, and links
+
+- **UI elements:** Put UI elements in **bold**. Focus on the task when discussing interaction.
+- **Code:** Use `code font` for filenames, code snippets, commands, and API elements. Use code blocks for multi-line samples.
+- **Links:** Use descriptive link text that indicates what the link leads to. Avoid "click here."
+
+## VII. Word choice and terminology
+
+- **Consistent naming:** Use product and feature names consistently.
+- **Specific verbs:** Use precise verbs.
+- **Avoid:**
+  - Latin abbreviations (e.g., use "for example" instead of "e.g.").
+  - Placeholder names like "foo" and "bar" in examples; use meaningful names instead.
+  - Anthropomorphism (e.g., "The server thinks...").
+  - "Should": Be clear about requirements ("must") vs. recommendations ("we recommend").
+
+## VIII. Files and media
+
+- **Filenames:** Use lowercase letters, separate words with hyphens (-), and use standard ASCII characters.
+- **Images:** Provide descriptive alt text for all images. Provide high-resolution or vector images when practical.
+
+## IX. Accessibility quick check
+
+- Provide descriptive alt text for images.
+- Ensure link text makes sense out of context.
+- Use semantic HTML elements correctly (headings, lists, tables).

package/framework/skills/frontend-design/SKILL.md

@@ -0,0 +1,55 @@
+---
+name: frontend-design
+description: Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
+license: Complete terms in https://github.com/anthropics/skills/blob/main/skills/frontend-design/LICENSE.txt
+---
+
+# Frontend Design
+
+Approach this as the design lead at a small studio known for giving every client a visual identity that could not be mistaken for anyone else's. This client has already rejected proposals that felt templated, and is paying for a distinctive point of view: make deliberate, opinionated choices about palette, typography, and layout that are specific to this brief, and take one real aesthetic risk you can justify.
+
+## Ground it in the subject
+
+If the brief does not pin down what the product or subject is, pin it yourself before designing: name one concrete subject, its audience, and the page's single job, and state your choice. If there's any information in your memory about the human's preferences, context about what they're building, or designs you've made before – use that as a hint. The subject's own world, its materials, instruments, artifacts, and vernacular, is where distinctive choices come from. Build with the brief's real content and subject matter throughout.
+
+## Design principles
+
+For web designs, the hero is a thesis. Open with the most characteristic thing in the subject's world, in whatever form makes sense for it: a headline, an image, an animation, a live demo, an interactive moment. Be deliberate with your choice: a big number with a small label, supporting stats, and a gradient accent is the template answer, only use if that's truly the best option.
+
+Typography carries the personality of the page. Pair the display and body faces deliberately, not the same families you would reach for on any other project, and set a clear type scale with intentional weights, widths, and spacing. Make the type treatment itself a memorable part of the design, not a neutral delivery vehicle for the content.
+
+Structure is information. Structural devices, numbering, eyebrows, dividers, labels, should encode something true about the content, not decorate it. Many generic designs use numbered markers (01 / 02 / 03), but that's only appropriate if the content actually is a sequence - like a real process or a typed timeline where order carries information the reader needs. Question if choices like numbered markers actually make sense before incorporating them.
+
+Leverage motion deliberately. Think about where and if animation can serve the subject: a page-load sequence, a scroll-triggered reveal, hover micro-interactions, ambient atmosphere. An orchestrated moment usually lands harder than scattered effects; choose what the direction calls for. However, sometimes less is more, and extra animation contributes to the feeling that the design is AI-generated.
+
+Match complexity to the vision. Maximalist directions need elaborate execution; minimal directions need precision in spacing, type, and detail. Elegance is executing the chosen vision well.
+
+Consider written content carefully. Often a design brief may not contain real content, and it's up to you to come up with copy. Copy can make a design feel as templated as the design itself. See the below section on writing for more guidance.
+
+## Process: brainstorm, explore, plan, critique, build, critique again
+
+For calibration: AI-generated design right now clusters around three looks: (1) a warm cream background (near #F4F1EA) with a high-contrast serif display and a terracotta accent; (2) a near-black background with a single bright acid-green or vermilion accent; (3) a broadsheet-style layout with hairline rules, zero border-radius, and dense newspaper-like columns. All three are legitimate for some briefs, but they are defaults rather than choices, and they appear regardless of subject. Where the brief pins down a visual direction, follow it exactly — the brief's own words always win, including when it asks for one of these looks. Where it leaves an axis free, don't spend that freedom on one of these defaults. Just like a human designer who's hired, there's often a careful balance between doing what you're good at and taking each project as a chance to experiment and learn.
+
+Work in two passes. First, brainstorm a short design plan based on the human's design brief: create a compact token system with color, type, layout, and signature. Color: describe the palette as 4–6 named hex values. Type: the typefaces for 2+ roles (a characterful display face that's used with restraint, a complementary body face, and a utility face for captions or data if needed). Layout: a layout concept, using one-sentence prose descriptions and ASCII wireframes to ideate and compare. Signature: the single unique element this page will be remembered by that embodies the brief in an appropriate way.
+
+Then review that plan against the brief before building: if any part of it reads like the generic default you would produce for any similar page (work through a similar prompt to see if you arrive somewhere similar) rather than a choice made for this specific brief — revise that part, say what you changed and why. Only after you've confirmed the relative uniqueness of your design plan should you start to write the code, following the revised plan exactly and deriving every color and type decision from it.
+
+When writing the code, be careful of structuring your CSS selector specificities. It's easy to generate CSS classes that cancel each other out (especially with a type-based selector like .section and a element-based selector like .cta). This can happen often with paddings/margins between sections.
+
+Try to do a lot of this planning and iteration in your thinking, and only show ideas to the user when you have higher confidence it'll delight them.
+
+## Restraint and self-critique
+
+Spend your boldness in one place. Let the signature element be the one memorable thing, keep everything around it quiet and disciplined, and cut any decoration that does not serve the brief. Not taking a risk can be a risk itself! Build to a quality floor without announcing it: responsive down to mobile, visible keyboard focus, reduced motion respected. Critique your own work as you build, taking screenshots if your environment supports it – a picture is worth 1000 tokens. Consider Chanel's advice: before leaving the house, take a look in the mirror and remove one accessory. Human creators have memory and always try to do something new, so if you have a space to quickly jot down notes about what you've tried, it can help you in future passes.
+
+## More on writing in design
+
+Words appear in a design for one reason: to make it easier to understand, and therefore easier to use. They are design material, not decoration. Bring the same intentionality to copy that you would bring to spacing and color. Before writing anything, ask what the design needs to say, and how it can best be said to help the person navigate the experience.
+
+Write from the end user's side of the screen. Name things by what people control and recognize, never by how the system is built. A person manages notifications, not webhook config. Describe what something does in plain terms rather than selling it. Being specific is always better than being clever.
+
+Use active voice as default. A control should say exactly what happens when it's used: "Save changes," not "Submit." An action keeps the same name through the whole flow, so the button that says "Publish" produces a toast that says "Published." The vocabulary of an interface is the signposting for someone navigating the product. Cohesion and consistency are how people learn their way around.
+
+Treat failure and emptiness as moments for direction, not mood. Explain what went wrong and how to fix it, in the interface's voice rather than a person's. Errors don't apologize, and they are never vague about what happened. An empty screen is an invitation to act.
+
+Keep the register conversational and tuned: plain verbs, sentence case, no filler, with tone matched to the brand and the audience. Let each element do exactly one job. A label labels, an example demonstrates, and nothing quietly does double duty.