@kienha/anti-chaotic 1.0.2 → 1.0.5

package/.agent/workflows/ui-ux-design.md

@@ -1,77 +1,98 @@
 ---
-description: Transform a requirements document into a comprehensive UI/UX design.
+description: Transform requirement into UI/UX design (System → Components → Prototypes)
 ---
 
 # UI/UX Design Workflow
 
-This workflow guides the process of creating a UI/UX design from a requirements document.
+Transform requirements into comprehensive UI/UX design deliverables.
 
-## Step 1: Analyze Requirements
+> [!IMPORTANT]
+> **MANDATORY**: Apply `.agent/rules/documentation.md` for all documentation structure.
 
-**Goal**: Extract core design drivers from the input document.
+---
+
+## MCP Usage Guidelines
+
+| MCP Tool                  | When to Use                                     |
+| ------------------------- | ----------------------------------------------- |
+| `mcp_context7_query-docs` | Research UI libraries (shadcn, radix, tailwind) |
+| `generate_image`          | Create low-fi wireframes or conceptual assets   |
+
+---
+
+## Step 0: Discovery & Context
+
+// turbo
+
+1. **Invoke `[designer]` skill** to:
+   - Check if Design System exists in `docs/`
+   - Analyze requirements/PRD
+   - Determine design scope (New System vs New Feature)
+2. **WAIT** for analysis result
 
-1.  **Read the Document**: Use `read_file` or `view_file` to inspect the target requirements document.
-2.  **Identify Key Elements**:
-    - **Target Audience**: Who is this for?
-    - **Problem Statement**: What are we solving?
-    - **Core Features**: What functionality is required?
-    - **Constraints**: Technical, brand, or platform limitations?
-3.  **Synthesize**: Create a brief summary of the design goals.
+---
+
+## Step 1: Design System (If Needed)
+
+// turbo
+
+**Skip if**: Design system already exists.
 
-## Step 2: Define Design System
+> 💡 **MCP**: Use `context7` with `/tailwindcss/tailwindcss` or `/shadcn/ui` for config
 
-**Goal**: Establish the visual language. **Prioritize the specific design requirements found in the document.**
+1. **Invoke `[designer]` skill** to define:
+   - Typography, Colors, Spacing scale
+   - Component primitives (Buttons, Inputs, Cards)
+   - Motion principles
+2. Create/Update Design System documentation
+3. **WAIT** for user approval
 
-1.  **Check Existing Codebase**:
-    - Scan for existing styles (`app.css`, `tailwind.config.ts`, `globals.css`) or UI components.
-    - **Condition**:
-      - **IF Codebase has Design System**: Analyze and extract the current design system (tokens, colors, typography). Use this as the foundation. Then, apply specific user requirements or overrides from the document on top of this existing system.
-      - **IF New/Empty Codebase**: Create the design system from scratch based strictly on the requirements document.
+---
 
-2.  **Consult Designer Skill**: Use `designer` skill for principles to ensure high quality (Premium, Distinctive), but ensure strict adherence to the document's specific constraints.
+## Step 2: Component & Flow Design
 
-3.  **Determine Aesthetic** (derived from Doc or Codebase):
-    - **Visual Style**: Minimal/Clean vs. Bold/Playful (as defined in Doc).
-    - **Theme**: Light vs. Dark mode preference.
+// turbo
 
-4.  **Select Foundations**:
-    - **Typography**: Adhere to existing fonts if present; otherwise select based on Doc (e.g., Inter, Roboto, Outfit).
-    - **Color Palette**: Extract from codebase or define new primary/secondary/neutral colors based on Doc.
-    - **Spacing/Layout**: Harmonize with existing grid or define a new one (e.g., 4px/8px grid).
+1. **Invoke `[designer]` skill** to:
+   - Map user flows based on User Stories
+   - Define necessary components (Reuse vs New)
+   - Create component specifications
+2. Create flow and component documentation
+3. **WAIT** for user review
 
-## Step 3: Map User Flows
+---
 
-**Goal**: Outline how users interact with the system.
+## Step 3: Prototyping
 
-1.  **Identify Critical Paths**: What are the main tasks (e.g., "Sign Up", "Checkout", "Create Post")?
-2.  **Step-by-Step Flow**: List the screens or states users will encounter for each path.
-3.  **Information Architecture**: Structure the navigation and hierarchy suitable for the flows.
+// turbo
 
-## Step 4: Create Rapid Prototypes
+> 💡 **MCP**: Use `generate_image` for visual concept validation if needed
 
-**Goal**: Create high-fidelity HTML/CSS prototypes for user approval. **Focus on "Look & Feel" and "Flow" rather than production component code.**
+1. **Invoke `[frontend-developer]` skill** to:
+   - Build HTML/CSS prototypes in `prototype/` (keep it simple)
+   - Or create interactive mockups
+2. **Invoke `[designer]` skill** to:
+   - Review for accessibility (Contrast, Semantic HTML)
+   - Check alignment with Design System
 
-1.  **Orchestrate Project Structure**:
-    - All design artifacts must be contained within a `prototype/` directory at the project root.
-    - Sub-assets (images, icons, illustrations) must be stored in `prototype/assets/`.
+---
 
-2.  **Generate Assets First**:
-    - **Proactively use "Nano Banana" (`generate_image`)** to create high-fidelity demo images, icons, or UI backgrounds.
-    - **Asset Storage**: Save these generated images directly into `prototype/assets/`.
+## Step 4: Review & Handoff
 
-3.  **Build Interactive Prototypes**:
-    - Create functional **HTML/CSS files** (e.g., `prototype/home.html`, `prototype/dashboard.html`).
-    - **Focus**: Visual impact, layout, spacing, and responsiveness.
-    - **Do NOT**: Break down into complex React/Vue components (e.g., `.tsx`, `.vue`) at this stage. Keep it as raw HTML/CSS for easy iteration.
-    - **Resource Linking**: Ensure all image `src` paths correctly reference the `./assets/` folder relative to the prototype file.
+// turbo
 
-4.  **Review against Principles**: Check against the designer skill's "Core Design Principles" (Intentionality, Distinction, Technical Excellence).
+1. Present prototypes to user
+2. Collect and apply feedback
+3. Update MOC files and finalize docs
+4. **Handoff**: Trigger `/implement-feature` if approved
 
-## Step 5: Verification & Approval
+---
 
-**Goal**: Get user buy-in on the design directives.
+## Quick Reference
 
-1.  **Present Prototypes**: Show the `prototype/*.html` files to the user for review.
-2.  **Iterate**: Refine the HTML/CSS based on feedback.
-3.  **Approval Gate**: Explicitly ask: _"Does this prototype meet your expectations?"_
-4.  **Handoff Prep**: **ONLY after approval**, verify technical feasibility and prepare for the developer to convert into production components.
+| Step | Skill              | Output              |
+| ---- | ------------------ | ------------------- |
+| 0    | designer           | Scope analysis      |
+| 1    | designer           | Design System docs  |
+| 2    | designer           | Flow/Component docs |
+| 3    | frontend-developer | HTML Prototypes     |

package/README.md

@@ -37,16 +37,6 @@
 | **rules-workflows**     | Create and manage rules, workflows                    |
 | **skill-creator**       | Create new skills for the framework                   |
 
-### 🔄 Automated Workflows
-
-| Workflow                       | Description                                   | Trigger                      |
-| ------------------------------ | --------------------------------------------- | ---------------------------- |
-| `/requirement-analysis`        | Analyze requirements → PRD, SDD, User Stories | Starting a new project       |
-| `/generate-docs-from-codebase` | Generate documentation from existing code     | Project without docs         |
-| `/ui-ux-design-from-doc`       | Transform requirements → UI/UX design         | After having PRD             |
-| `/workflow-rule-from-codebase` | Create project rules from code                | Onboarding to a project      |
-| `/workflow-rule-from-feedback` | Update rules based on feedback                | Fixing recurring AI mistakes |
-
 ### 📜 Smart Rules Engine
 
 - **Documentation Rules**: Standard document structure and formatting
@@ -55,56 +45,21 @@
 
 ---
 
-## 📁 Directory Structure
-
-```
-anti-chaotic/
-├── .agent/
-│   ├── skills/           # 12 AI skills with detailed instructions
-│   │   ├── product-manager/
-│   │   ├── business-analysis/
-│   │   ├── lead-architect/
-│   │   ├── designer/
-│   │   ├── frontend-developer/
-│   │   ├── backend-developer/
-│   │   ├── devops-engineer/
-│   │   ├── qa-tester/
-│   │   ├── ai-engineer/
-│   │   ├── blockchain-engineer/
-│   │   ├── rules-workflows/
-│   │   └── skill-creator/
-│   ├── workflows/        # Automated workflows
-│   │   ├── requirement-analysis.md
-│   │   ├── generate-docs-from-codebase.md
-│   │   ├── ui-ux-design-from-doc.md
-│   │   ├── workflow-rule-from-codebase.md
-│   │   └── workflow-rule-from-feedback.md
-│   └── rules/            # Project & documentation rules
-│       ├── documentation.md
-│       └── clean-code.md
-├── bin/                  # CLI utilities
-├── docs/                 # Generated documentation
-└── README.md
-```
-
----
-
 ## 🚀 Quick Start
 
-### 1. Clone Repository
+### 1. Initialize in your project
+
+Run the following command in your project root to install the Agent Kit:
 
 ```bash
-git clone https://github.com/kienhaminh/anti-chaotic.git
-cd anti-chaotic
+npx @kienha/anti-chaotic init
 ```
 
-### 2. Install Dependencies
+This will download the `.agent` folder containing all skills, rules, and workflows into your project.
 
-```bash
-npm install
-```
+### 2. Using the Agent Kit
 
-### 3. Using the Framework
+Once initialized, start a new chat with your AI IDE (Cursor, Windsurf, etc.) and reference the installed rules/workflows.
 
 #### Start a new project with AI:
 
@@ -124,6 +79,14 @@ npm install
 /ui-ux-design-from-doc docs/020-Requirements/PRD-YourProject.md
 ```
 
+### 3. Updating the Kit
+
+To update your Agent Kit to the latest version:
+
+```bash
+npx @kienha/anti-chaotic update
+```
+
 ---
 
 ## 📖 Workflow Guide
@@ -148,293 +111,19 @@ Please run the requirement-analysis workflow to analyze requirements for an e-co
 Read and execute the workflow at .agent/workflows/requirement-analysis.md
 ```
 
-### Special Annotations
-
-| Annotation     | Meaning                                  |
-| -------------- | ---------------------------------------- |
-| `// turbo`     | Auto-run this step without user approval |
-| `// turbo-all` | Auto-run ALL steps in the workflow       |
-
----
-
-## 🔗 Workflow Chaining
-
-Workflows can be chained together to create a complete process:
-
-```
-┌──────────────────────────────────────────────────────────────┐
-│                    🔄 FULL PROJECT LIFECYCLE                 │
-├──────────────────────────────────────────────────────────────┤
-│                                                              │
-│  1. /requirement-analysis                                    │
-│     │                                                        │
-│     ▼                                                        │
-│  2. /ui-ux-design-from-doc (with the generated PRD)          │
-│     │                                                        │
-│     ▼                                                        │
-│  3. [Development Phase - implement code]                     │
-│     │                                                        │
-│     ▼                                                        │
-│  4. /generate-docs-from-codebase                             │
-│     │                                                        │
-│     ▼                                                        │
-│  5. /workflow-rule-from-feedback (if needed)                 │
-│                                                              │
-└──────────────────────────────────────────────────────────────┘
-```
-
 ---
 
 ## 🎓 Workflow Details
 
-### `/requirement-analysis`
-
-> **Description**: Analyze requirements from raw ideas → complete documentation
-
-#### 🎯 When to Use?
+## 🔄 Automated Workflows
 
-- Starting a new project from scratch
-- Converting ideas into technical documentation
-- Need to create PRD, SDD, Epics, User Stories
-
-#### 📊 Process Flow
-
-```
-┌─────────────────────────────────────────────────────┐
-│ Step 0: Clarification & Understanding (PM)          │
-│         → Create clarification-questions.md         │
-├─────────────────────────────────────────────────────┤
-│ Step 1: Create Roadmap (PM)                         │
-│         → docs/010-Planning/Roadmap-{Project}.md    │
-├─────────────────────────────────────────────────────┤
-│ Step 2: Create PRD (PM)                             │
-│         → docs/020-Requirements/PRD-{Project}.md    │
-├─────────────────────────────────────────────────────┤
-│ Step 3: Create SDD (Architect)                      │
-│         → docs/030-Specs/Architecture/SDD-{...}.md  │
-├─────────────────────────────────────────────────────┤
-│ Step 4: Create Epics (BA)                           │
-│         → docs/022-User-Stories/Epics/*.md          │
-├─────────────────────────────────────────────────────┤
-│ Step 5: Create Use Cases (BA)                       │
-│         → docs/020-Requirements/Use-Cases/*.md      │
-├─────────────────────────────────────────────────────┤
-│ Step 6: Create User Stories (BA)                    │
-│         → docs/022-User-Stories/Backlog/*.md        │
-├─────────────────────────────────────────────────────┤
-│ Step 7: Create ADRs (Architect) - Optional          │
-│         → docs/030-Specs/Architecture/ADR-*.md      │
-├─────────────────────────────────────────────────────┤
-│ Step 8: Finalize & Summary (PM)                     │
-│         → Update MOC files & Index                  │
-└─────────────────────────────────────────────────────┘
-```
-
-#### 💡 Example
-
-```
-/requirement-analysis Create a personal finance management app with features:
-- Income/expense tracking
-- Budget planning
-- Analytics reports
-- Bank synchronization
-```
-
----
-
-### `/generate-docs-from-codebase`
-
-> **Description**: Automatically generate documentation from an existing codebase
-
-#### 🎯 When to Use?
-
-- Onboarding to an existing project without documentation
-- Updating docs after significant code changes
-- Need to create API docs, schema docs, architecture overview
-
-#### 📊 Process Flow
-
-```
-┌─────────────────────────────────────────────────────┐
-│ Step 1: Codebase Discovery & Analysis               │
-│         → Scan package.json, config files           │
-│         → Analyze folder structure                  │
-├─────────────────────────────────────────────────────┤
-│ Step 2: Determine Documentation Scope               │
-│         → Choose: Architecture, API, Schema, etc.   │
-├─────────────────────────────────────────────────────┤
-│ Step 3: Generate System Architecture                │
-│         → C4 diagrams, component relationships      │
-├─────────────────────────────────────────────────────┤
-│ Step 4: Generate API Documentation                  │
-│         → Endpoint specs, request/response schemas  │
-├─────────────────────────────────────────────────────┤
-│ Step 5: Generate Database Schema Documentation      │
-│         → Entity descriptions, ERD diagram          │
-├─────────────────────────────────────────────────────┤
-│ Step 6: Generate MOC Files                          │
-│         → Index files for navigation                │
-├─────────────────────────────────────────────────────┤
-│ Step 7: Validation & Linking                        │
-│         → Check frontmatter, wiki-links             │
-├─────────────────────────────────────────────────────┤
-│ Step 8: Summary & Next Steps                        │
-│         → Report generated files                    │
-└─────────────────────────────────────────────────────┘
-```
-
-#### 💡 Example
-
-```
-/generate-docs-from-codebase
-
-Or specify a specific scope:
-/generate-docs-from-codebase Only create API documentation and Database Schema
-```
-
----
-
-### `/ui-ux-design-from-doc`
-
-> **Description**: Transform requirements documents into UI/UX designs
-
-#### 🎯 When to Use?
-
-- Already have PRD/requirements and need interface design
-- Need to create a design system for the project
-- Want to quickly prototype main screens
-
-#### 📊 Process Flow
-
-```
-┌─────────────────────────────────────────────────────┐
-│ Step 1: Analyze Requirements                        │
-│         → Extract target audience, features         │
-├─────────────────────────────────────────────────────┤
-│ Step 2: Define Design System                        │
-│         → Typography, colors, spacing               │
-├─────────────────────────────────────────────────────┤
-│ Step 3: Map User Flows                              │
-│         → Critical paths, screen sequences          │
-├─────────────────────────────────────────────────────┤
-│ Step 4: Create Visual Artifacts                     │
-│         → Components, page layouts                  │
-├─────────────────────────────────────────────────────┤
-│ Step 5: Verification                                │
-│         → Req check, usability check                │
-└─────────────────────────────────────────────────────┘
-```
-
-#### 💡 Example
-
-```
-/ui-ux-design-from-doc docs/020-Requirements/PRD-ShopManagement.md
-```
-
----
-
-### `/workflow-rule-from-codebase`
-
-> **Description**: Analyze codebase to create project rules file
-
-#### 🎯 When to Use?
-
-- Newly joining an existing project
-- Want AI Agent to "learn" project conventions
-- Need to document coding standards
-
-#### 📊 Process Flow
-
-```
-┌─────────────────────────────────────────────────────┐
-│ Step 1: Discovery Scan                              │
-│         → Read config, analyze structure            │
-├─────────────────────────────────────────────────────┤
-│ Step 2: Synthesize Observations                     │
-│         → Tech stack, conventions, directories      │
-├─────────────────────────────────────────────────────┤
-│ Step 3: Create Project Rules                        │
-│         → .agent/rules/project-rules.md             │
-├─────────────────────────────────────────────────────┤
-│ Step 4: Write the File                              │
-│         → Save with standard format                 │
-├─────────────────────────────────────────────────────┤
-│ Step 5: Validation                                  │
-│         → Check alignment with package.json         │
-└─────────────────────────────────────────────────────┘
-```
-
-#### 💡 Example
-
-```
-/workflow-rule-from-codebase
-```
-
----
-
-### `/workflow-rule-from-feedback`
-
-> **Description**: Create/update rules based on user feedback
-
-#### 🎯 When to Use?
-
-- Want AI Agent to remember a specific rule
-- Fixing mistakes that AI frequently makes
-- Adding preferences for the project
-
-#### 📊 Process Flow
-
-```
-┌─────────────────────────────────────────────────────┐
-│ Step 1: Analyze Feedback & Existing Rules           │
-│         → Check conflicts, determine action         │
-├─────────────────────────────────────────────────────┤
-│ Step 2: Determine Target Rule File                  │
-│         → project-rules.md or new file?             │
-├─────────────────────────────────────────────────────┤
-│ Step 3: Update Project Content                      │
-│         → Append/update the rule                    │
-├─────────────────────────────────────────────────────┤
-│ Step 4: Write the File                              │
-│         → Save changes                              │
-├─────────────────────────────────────────────────────┤
-│ Step 5: Confirmation                                │
-│         → Notify user                               │
-└─────────────────────────────────────────────────────┘
-```
-
-#### 💡 Example
-
-```
-/workflow-rule-from-feedback Always use Zod for validation instead of Yup
-
-/workflow-rule-from-feedback Never use any type in TypeScript
-```
-
----
-
-## 💡 Tips & Best Practices
-
-### ✅ Do's
-
-1. **Read output carefully before approving** - Each step has a checkpoint for review
-2. **Use artifacts for comments** - AI will create draft files for you to review first
-3. **Provide complete context** - Describe requirements in detail from the start
-4. **Chain workflows** - Combine multiple workflows for a complete process
-
-### ❌ Don'ts
-
-1. **Skip clarification step** - The clarification step is crucial
-2. **Approve without reading** - Always review before confirming
-3. **Run inappropriate workflows** - Choose the right workflow for the right use case
-
-### 🔧 Troubleshooting
-
-| Issue                      | Solution                                      |
-| -------------------------- | --------------------------------------------- |
-| Workflow doesn't run       | Check slash command syntax                    |
-| Output has wrong format    | Ensure `.agent/rules/documentation.md` exists |
-| AI asks too many questions | Provide more context in the initial request   |
+| Workflow                           | Description                                                                                                   | Use Case                                                                        |
+| :--------------------------------- | :------------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------ |
+| **`/requirement-analysis`**        | Analyzes raw requirements and generates detailed documentation (Roadmap, PRD, SDD, Epics, User Stories).      | Start of a new project or feature when you only have a rough idea.              |
+| **`/generate-docs-from-codebase`** | Scans the current codebase and generates comprehensive documentation (Architecture, API, Schema).             | Onboarding to a legacy project or updating docs after development.              |
+| **`/ui-ux-design-from-doc`**       | Transforms PRD/requirements documents into UI/UX design specifications, design systems, and visual artifacts. | After requirements are finalized, before coding.                                |
+| **`/workflow-rule-from-codebase`** | Analyzes the codebase to identify patterns and conventions, creating a project-specific rules file.           | Establishing coding standards for a new or existing team.                       |
+| **`/workflow-rule-from-feedback`** | Updates or creates rules based on user feedback to prevent recurring AI errors.                               | When the Agent makes repeated mistakes or you want to enforce a new preference. |
 
 ---
 
@@ -452,15 +141,6 @@ We welcome all contributions! See [CONTRIBUTING.md](CONTRIBUTING.md) for detaile
 
 ---
 
-## 📚 Additional Resources
-
-- **Documentation Rules**: `.agent/rules/documentation.md`
-- **Available Skills**: `.agent/skills/`
-- **Project Rules**: `.agent/rules/project-rules.md` (if exists)
-- **Agent Skills Specification**: [agentskills.io/specification](https://agentskills.io/specification)
-
----
-
 ## 📄 License
 
 This project is released under the [MIT License](LICENSE).

package/bin/{ag.js → anti-chaotic.js}

@@ -41,8 +41,25 @@ program
   .description("Update .agent configuration from GitHub")
   .action(async () => {
     const targetAgentDir = path.join(process.cwd(), ".agent");
+    const { default: inquirer } = await import("inquirer");
 
     try {
+      if (await fs.pathExists(targetAgentDir)) {
+        const { confirm } = await inquirer.prompt([
+          {
+            type: "confirm",
+            name: "confirm",
+            message: `Directory ${targetAgentDir} already exists. Do you want to overwrite it?`,
+            default: false,
+          },
+        ]);
+
+        if (!confirm) {
+          console.log(chalk.yellow("Operation cancelled by user."));
+          return;
+        }
+      }
+
       console.log(
         chalk.blue(`Updating Anti-Chaotic Agent Kit from ${REPO_URI}...`),
       );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kienha/anti-chaotic",
-  "version": "1.0.2",
+  "version": "1.0.5",
   "description": "Anti-Chaotic - An agent kit for Antigravity to standardize the software development process",
   "main": "index.js",
   "publishConfig": {
@@ -26,8 +26,8 @@
   "license": "ISC",
   "type": "commonjs",
   "bin": {
-    "ag": "bin/ag.js",
-    "anti-chaotic": "bin/ag.js"
+    "ac": "bin/anti-chaotic.js",
+    "anti-chaotic": "bin/anti-chaotic.js"
   },
   "files": [
     ".agent",
@@ -37,6 +37,7 @@
     "chalk": "^4.1.2",
     "commander": "^14.0.2",
     "fs-extra": "^11.3.3",
-    "giget": "^2.0.0"
+    "giget": "^2.0.0",
+    "inquirer": "^13.2.0"
   }
 }