### Example: Using Additional Instructions with /build

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/README.md

Examples of using the /build command with additional instructions to guide implementation, such as prioritizing security, performance, or test coverage.

```bash
/build REQ-123 prioritize security and add comprehensive error handling
/build REQ-123 focus on performance optimization
/build REQ-123 ensure full test coverage with unit and integration tests
```

--------------------------------

### Example 1: Creating a Feature from Scratch

Source: https://github.com/braingridai/braingrid/blob/main/cursor/README.md

Walkthrough for creating a new feature, including specifying requirements, breaking them down, creating a git branch, and getting a build plan with specific instructions.

```bash
# In Cursor Agent (Cmd+K)
/specify Implement user profile page with avatar upload, bio editing, and privacy settings

# Output: ✅ Created requirement REQ-234: User Profile Management

# Break down into tasks
/breakdown REQ-234

# Output: ✅ Created 6 tasks for REQ-234

# Create git branch (in terminal)
git checkout -b feature/REQ-234-user-profile

# Get build plan with security focus (in Cursor Agent)
/build focus on input validation and XSS prevention

# Start implementing with Cursor
# Cursor understands the task context and helps implement

# Update statuses (in terminal)
braingrid task update TASK-1 -r REQ-234 --status COMPLETED
```

--------------------------------

### Force Setup with Overwrite

Source: https://github.com/braingridai/braingrid/blob/main/README.md

Skip prompts and overwrite all existing integration files during setup. Use with caution to avoid unintended data loss.

```bash
braingrid setup claude-code --force
```

--------------------------------

### Typical Workflow: Starting a New Feature

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/README.md

This workflow outlines the steps for starting a new feature, from creating a specification and git branch to getting the build plan and implementing tasks.

```bash
# 1. Create specification from idea
/specify Add dark mode toggle in settings with theme persistence

# 2. Create git branch (enables auto-detection)
git checkout -b feature/REQ-1-dark-mode

# 3. Get complete build plan (creates tasks and implementation plan)
/build

# 4. Start implementing tasks
# Claude Code will help implement each task

# 5. Update task status as you progress
braingrid task update TASK-1 -r REQ-1 --status IN_PROGRESS
braingrid task update TASK-1 -r REQ-1 --status COMPLETED
```

--------------------------------

### Example: Creating User Authentication Requirement

Source: https://github.com/braingridai/braingrid/blob/main/cursor/commands/save-requirement.md

An example demonstrating the creation of a 'User Authentication System' requirement with specific details.

```bash
braingrid requirement create --name "User Authentication System" --description "Add OAuth2 authentication with password reset and email verification. Include JWT token management and session handling."
```

--------------------------------

### Example: Writing a Good Prompt for /specify

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/README.md

An example demonstrating how to structure a prompt for the /specify command, including problem statement, context, constraints, users, and success criteria.

```bash
/specify Add real-time collaboration to our document editor. Users should see
others' cursors and edits instantly. We use WebSockets already for chat. Must
support 50+ concurrent users per document. Success means <200ms latency for
cursor updates and no conflicts in concurrent edits.
```

--------------------------------

### Example: Next Steps for User Authentication Requirement

Source: https://github.com/braingridai/braingrid/blob/main/cursor/commands/specify.md

This example shows the specific commands to use for breaking down and branching for the 'User Authentication System' requirement.

```bash
braingrid requirement breakdown REQ-234
```

```bash
git checkout -b feature/REQ-234-user-auth
```

--------------------------------

### Preview BrainGrid Installation

Source: https://github.com/braingridai/braingrid/blob/main/README.md

Use the `--dry-run` option to preview installation changes without modifying files. This is useful for understanding what will be installed and how conflicts will be handled.

```bash
braingrid setup cursor --dry-run
```

--------------------------------

### Example: Creating a Feature from Scratch

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/README.md

This example demonstrates the end-to-end process of creating a new feature, from initial requirement specification and branch creation to building the plan and updating task statuses.

```bash
# Create requirement
/specify Implement user profile page with avatar upload, bio editing, and privacy settings

# Output: ✅ Created requirement REQ-234: User Profile Management

# Create git branch
git checkout -b feature/REQ-234-user-profile

# Get build plan with security focus
/build REQ-234 focus on input validation and XSS prevention

# Start implementing with Claude Code
# ... implement tasks ...

# Update statuses
braingrid task update TASK-1 -r REQ-234 --status COMPLETED
```

--------------------------------

### Setup Cursor Integration

Source: https://github.com/braingridai/braingrid/blob/main/README.md

Install slash commands, always-on rules, and AGENTS.md integration for BrainGrid workflows in Cursor's Agent mode.

```bash
braingrid setup cursor
```

--------------------------------

### Example: Specify Requirement with User Prompt

Source: https://github.com/braingridai/braingrid/blob/main/cursor/commands/specify.md

This example demonstrates how to specify a requirement for user authentication using a detailed prompt and shows the expected output.

```bash
braingrid requirement specify --prompt "Add user authentication with OAuth2, password reset, and email verification"
```

--------------------------------

### QuickStart: Show Requirement

Source: https://github.com/braingridai/braingrid/blob/main/README.md

Display a specific requirement with all its associated tasks in Markdown format. This helps visualize the implementation plan.

```bash
braingrid requirement show REQ-1 --format markdown
```

--------------------------------

### BrainGrid QuickStart Flow

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-cli/references/README.md

Initialize your project, create a requirement with AI refinement, and show the requirement details.

```bash
# 1. Initialize your project
braingrid init

# 2. Create a requirement with AI refinement
braingrid specify --prompt "Add user authentication"

# 3. Show requirement with all tasks (markdown with full content)
braingrid requirement show REQ-1 --format markdown
```

--------------------------------

### Progress Bar with Steps Example

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-ux-design/references/patterns-feedback.md

Example of a progress bar indicating determinate progress with a textual step description and percentage.

```text
Processing data...
Step 2 of 4: Validating records
████████████░░░░░░░░ 60%
```

--------------------------------

### Example: Creating a Specification with BrainGrid

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-cli/SKILL.md

An example interaction showing how to use the `specify` command to create a detailed requirement specification, followed by commands to view the requirement and its tasks.

```bash
braingrid specify --prompt "Add user authentication with email/password login, \
JWT tokens, password reset flow, and account verification. Must integrate with \
existing Express.js backend and React frontend. Security requirements: bcrypt \
for passwords, secure HTTP-only cookies for tokens, rate limiting on auth \
endpoints."
```

```bash
braingrid requirement show REQ-1 --format markdown
```

--------------------------------

### Dependency Context Example

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/commands/specify.md

Lists key dependencies, their versions, and constraints relevant to the feature.

```text
[Dependencies: zod@3.22 for validation, axios@1.6 for HTTP,
@tanstack/react-query@5 for data fetching]
```

--------------------------------

### BrainGrid Workflow Example

Source: https://github.com/braingridai/braingrid/blob/main/cursor/AGENTS.md

Demonstrates the typical command-line workflow for using BrainGrid to process an idea into an implementation plan.

```bash
braingrid specify --prompt "Add auth"  # → REQ-123
braingrid requirement breakdown REQ-123 # → tasks
braingrid requirement build REQ-123     # → plan
```

--------------------------------

### Typical Workflow: Starting a New Feature

Source: https://github.com/braingridai/braingrid/blob/main/cursor/README.md

This snippet outlines the steps for starting a new feature using BrainGrid, from specification and breakdown to git branching and implementation.

```bash
# 1. Create specification from idea (in Cursor Agent)
/specify Add dark mode toggle in settings with theme persistence

# 2. Review and break down into tasks
/breakdown REQ-1

# 3. Create git branch (enables auto-detection)
git checkout -b feature/REQ-1-dark-mode

# 4. Get complete build plan (in Cursor Agent)
/build

# 5. Start implementing tasks with Cursor
# Cursor will help implement each task with full context

# 6. Update task status as you progress (in terminal)
braingrid task update TASK-1 -r REQ-1 --status IN_PROGRESS
braingrid task update TASK-1 -r REQ-1 --status COMPLETED
```

--------------------------------

### Setup Claude Code Integration

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/README.md

Install the BrainGrid integration for Claude Code. This command sets up slash commands, skills, and the status line.

```bash
braingrid setup claude-code
```

--------------------------------

### BrainGrid Workflow Example

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/CLAUDE.md

Demonstrates the basic workflow of specifying a requirement and then building an implementation plan using BrainGrid slash commands.

```bash
/specify "Add auth"  # → REQ-123
/build REQ-123       # → plan
```

--------------------------------

### Prompt Enhancement Composition Example

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/commands/specify.md

Shows how to combine a base prompt with various enhancement contexts into a final prompt structure.

```text
{Base Prompt}

---
## Technical Context (auto-generated)

{Architecture Context}

{Technical Constraints}

{Related Files}

{Conventions}

{Dependencies}

```

--------------------------------

### QuickStart: Create Requirement

Source: https://github.com/braingridai/braingrid/blob/main/README.md

Create a new requirement using an AI-refined prompt. This is part of the one-minute flow to quickly define project features.

```bash
braingrid specify --prompt "Add user authentication"
```

--------------------------------

### Show CLI Version and Help

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-cli/references/README.md

Displays the installed version of the BrainGrid CLI and provides help information for using the CLI.

```bash
braingrid --version
braingrid --help
```

--------------------------------

### Install BrainGrid CLI

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/commands/save-requirement.md

If the BrainGrid CLI is not installed, use this command to install it globally via npm. This is a prerequisite for using BrainGrid commands.

```bash
npm install -g @braingrid/cli
```

--------------------------------

### Verify BrainGrid CLI Installation

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/commands/save-requirement.md

After installation, verify that the BrainGrid CLI is correctly installed and accessible by checking its version. This command helps confirm the CLI is ready for use.

```bash
braingrid --version
```

--------------------------------

### Deep Linking Examples

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-ux-design/references/patterns-navigation.md

Demonstrates how to support direct navigation to specific states within the application, such as filtered views or modal dialogs.

```text
Support direct navigation to:
- Specific items: `/projects/123`
- Filtered views: `/projects?status=active`
- Specific tabs: `/projects/123#members`
- Modal states: `/projects/123/edit`
```

--------------------------------

### Selection Prompt for User Choice

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-ux-design/references/patterns-cli.md

Shows an example of a selection prompt where users can navigate and choose from a list of options.

```bash
Select environment:
  > production
    staging
    development
```

--------------------------------

### Example of an Effective User Prompt

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/commands/specify.md

Provides an example of a well-structured prompt that includes essential details like the problem statement, context, constraints, target users, and success criteria for AI processing.

```plaintext
Add user authentication with email/password login, JWT tokens, password
reset flow, and account verification. Must integrate with existing
Express.js backend and React frontend. Security requirements: bcrypt
for passwords, secure HTTP-only cookies for tokens.
```

--------------------------------

### Confirmation Dialog Example

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-ux-design/references/patterns-feedback.md

Example of a confirmation dialog for a destructive action, clearly stating the action, consequences, and providing cancel and confirm options.

```text
┌─────────────────────────────────────┐
│ Delete project?                     │
│                                     │
│ This will permanently delete        │
│ "Project Alpha" and all its data.   │
│ This cannot be undone.              │
│                                     │
│            [Cancel]  [Delete]       │
└─────────────────────────────────────┘
```

--------------------------------

### Related Files and API Endpoints Example

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/commands/specify.md

Lists relevant file paths, components, modules, and API endpoints discussed in the conversation.

```text
[Related files: src/auth/login.ts, src/components/UserProfile.tsx,
API: POST /api/auth/login, GET /api/users/:id]
```

--------------------------------

### Setup Shell Completion

Source: https://github.com/braingridai/braingrid/blob/main/README.md

Command to automatically set up tab completion for the BrainGrid CLI in your current shell.

```bash
braingrid completion --setup
```

--------------------------------

### Convention Adherence Example

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/commands/specify.md

Defines project conventions including naming, directory structure, and testing patterns.

```text
[Conventions: Files use kebab-case, components use PascalCase,
tests colocated with source files, use Vitest for testing]
```

--------------------------------

### Runtime Error Handling

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-ux-design/references/patterns-cli.md

Shows an example of runtime error handling in a CLI, including troubleshooting steps and links to further documentation.

```bash
Error: Connection refused to database

Troubleshooting:
  1. Check if database is running
  2. Verify DATABASE_URL is correct
  3. Check network/firewall settings

See: https://docs.example.com/troubleshooting
```

--------------------------------

### Label, Placeholder, and Help Text Example

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-ux-design/references/patterns-forms.md

Demonstrates the correct usage of labels, placeholders, and help text for form fields. Labels should always be visible, placeholders offer format hints, and help text provides additional guidance.

```text
Email address              ← Label
┌──────────────────────┐
│ name@example.com     │   ← Placeholder (format hint)
└──────────────────────┘
We'll send a confirmation   ← Help text
```

--------------------------------

### Example 2: Saving a Discussed Plan

Source: https://github.com/braingridai/braingrid/blob/main/cursor/README.md

Shows how to save a requirement directly from a discussion in Cursor Agent, followed by breaking it down and building a plan.

```bash
User: "I want to add caching to our API"
Cursor: "Let me help design a caching strategy..."
[Discussion continues with detailed planning]

User (in Cursor Agent): /save-requirement API Caching Layer

# Output: ✅ Saved requirement REQ-345: API Caching Layer

User: /breakdown REQ-345
User: /build REQ-345
```

--------------------------------

### Bulk Actions UI Example

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-ux-design/references/patterns-lists-tables.md

Shows the user interface when multiple items are selected, indicating the selection count and revealing available bulk actions.

```text
┌─────────────────────────────────────┐
│ ☑ 3 selected    [Delete] [Export]  │
├─────────────────────────────────────┤
│ Table/list content...               │
```

--------------------------------

### Architecture Context Example

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/commands/specify.md

Injects architectural details like framework, API pattern, state management, and architecture style.

```text
[Architecture: React 18 + TypeScript, REST API with Express.js backend,
Zustand for state management, monolithic architecture]
```

--------------------------------

### Command Help Structure

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-ux-design/references/patterns-cli.md

Details the standard structure for command-specific help output in a CLI, including usage, arguments, options, and examples.

```bash
Usage: tool deploy [options] <target>

Deploy application to target environment

Arguments:
  target              Deployment target (prod|staging|dev)

Options:
  -e, --env <name>    Environment name
  -d, --dry-run       Preview without executing
  -v, --verbose       Show detailed output
  -h, --help          Show this help

Examples:
  tool deploy prod
  tool deploy staging --dry-run
```

--------------------------------

### Typical Workflow: Working on Existing Requirements

Source: https://github.com/braingridai/braingrid/blob/main/cursor/README.md

Commands for managing existing requirements and tasks, including listing, showing details, getting build plans, and updating statuses.

```bash
# List requirements (in terminal)
braingrid requirement list

# Show specific requirement
braingrid requirement show REQ-123

# In Cursor Agent - get build plan
/build REQ-123

# List tasks (in terminal)
braingrid task list -r REQ-123

# Update requirement status (in terminal)
braingrid requirement update REQ-123 --status IN_PROGRESS
```

--------------------------------

### Summarize and Specify Tasks

Source: https://github.com/braingridai/braingrid/blob/main/README.md

Commands to get a summary of tasks for a requirement and to create a task from a prompt.

```bash
braingrid task summary -r REQ-456
braingrid task specify -r REQ-456 --prompt "Task description"
```

--------------------------------

### Build Implementation Plan with BrainGrid

Source: https://github.com/braingridai/braingrid/blob/main/cursor/README.md

Use the `/build` command in Cursor to get a complete implementation plan in markdown format. This command also takes a requirement ID as input.

```bash
/build REQ-123
```

--------------------------------

### Command Palette UI Example

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-ux-design/references/patterns-search.md

Demonstrates the Command Palette pattern, which is useful for keyboard-centric interfaces. It allows users to quickly find and execute commands or navigate through the application by typing.

```text
┌────────────────────────────────────┐
│ 🔍 Type a command or search...     │
├────────────────────────────────────┤
│ Recent                             │
│   • Open settings          ⌘ ,    │
│   • New project            ⌘ N    │
├────────────────────────────────────┤
│ Actions                            │
│   • Create new...                  │
│   • Import data                    │
│   • Export...                      │
└────────────────────────────────────┘
```

--------------------------------

### Pagination UI Example

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-ux-design/references/patterns-lists-tables.md

Illustrates a common user interface pattern for navigating through paginated data, showing current page, total pages, and result count.

```text
← Previous  1 2 3 ... 10  Next →
Showing 21-40 of 234 results
```

--------------------------------

### Example: Specifying a Requirement with Markdown Context

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/commands/specify.md

Demonstrates how the 'specify' command processes markdown content as a prompt when no explicit arguments are provided. It shows the internal steps Claude takes, including detecting the markdown and calling the BrainGrid API.

```bash
User: /specify
Claude:
1. Detects no $ARGUMENTS provided
2. Searches for ExitPlanMode plans → none found
3. Searches for markdown patterns → finds structured content
4. Extracts markdown as base prompt
5. Runs: braingrid specify --prompt "# User Authentication
- Login with email/password..."
```

--------------------------------

### Header Navigation Example

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-ux-design/references/patterns-navigation.md

Illustrates a typical horizontal header navigation with a logo, main sections, and a user menu. Recommended for up to 5-7 items.

```text
┌─────────────────────────────────────────────┐
│ Logo   Dashboard  Projects  Settings    [U] │
├─────────────────────────────────────────────┤
│ Page content...

```

--------------------------------

### Wizard Step Structure Example

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-ux-design/references/patterns-wizard.md

Illustrates the typical layout of a single step within a multi-step wizard, including progress indication, step title, content area, and navigation buttons.

```text
┌─────────────────────────────────────┐
│ Progress: ● ● ○ ○                   │
│ Step 2 of 4: Choose your plan      │
├─────────────────────────────────────┤
│                                     │
│ [Step content - single decision]    │
│                                     │
├─────────────────────────────────────┤
│ [← Back]              [Continue →]  │
└─────────────────────────────────────┘
```

--------------------------------

### Starting a New Feature Workflow

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-cli/SKILL.md

A sequence of commands to initiate a new feature, from initialization and specification to branching, planning, and task updates.

```bash
# Initialize if needed
braingrid init

# Create specification from a prompt
braingrid specify --prompt "Implement dark mode toggle in settings"

# Create git branch
git checkout -b feature/REQ-1-dark-mode

# Get build plan
braingrid requirement show REQ-1

# Work through tasks, updating status
braingrid task update TASK-1 --status IN_PROGRESS
# ... build the feature ...
braingrid task update TASK-1 --status COMPLETED
```

--------------------------------

### Example 3: Working with Auto-Detection

Source: https://github.com/braingridai/braingrid/blob/main/cursor/README.md

Illustrates how BrainGrid commands automatically detect the requirement ID from the git branch name when not explicitly provided.

```bash
# On branch: feature/REQ-456-notifications
git branch
# * feature/REQ-456-notifications

# Commands auto-detect REQ-456 (in Cursor Agent)
/build
# Or in terminal
braingrid requirement show
braingrid task list

# Update status without specifying ID (in terminal)
braingrid requirement update --status IN_PROGRESS
```

--------------------------------

### Skeleton Screen Placeholder Example

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-ux-design/references/patterns-feedback.md

Visual representation of a skeleton screen used to indicate content loading. It shows the layout structure before actual content is fetched.

```text
┌─────────────────────────────────────┐
│ ████████████                        │  ← Title placeholder
│ ████████████████████████            │  ← Subtitle placeholder
├─────────────────────────────────────┤
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  │  ← Content placeholder
│ ░░░░░░░░░░░░░░░░░░░░░░░░░           │
└─────────────────────────────────────┘
```

--------------------------------

### Example: Saving a Discussed Plan

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/README.md

Illustrates how to save a detailed plan discussed with Claude Code into BrainGrid using the `/save-requirement` command, followed by generating a build plan.

```bash
User: "I want to add caching to our API"
Claude: "Let me help design a caching strategy..."
[Discussion continues with detailed planning]

User: /save-requirement API Caching Layer

# Output: ✅ Saved requirement REQ-345: API Caching Layer

/build REQ-345
```

--------------------------------

### GOOD HTML for Auto-Reflowing Layout

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-frontend-design/references/layout-and-responsive.md

This HTML example shows a responsive layout that uses fluid properties to auto-reflow. It includes a max-width and a grid that adapts to available space.

```html
<div style="width: 100%; max-width: 800px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px">
```

--------------------------------

### Search Input Behavior Example

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-ux-design/references/patterns-search.md

Illustrates the behavior of a search input field, showing the transition from an empty state to displaying recent searches and suggestions upon focus or typing. This pattern is useful for providing quick access to past queries and relevant options.

```text
┌──────────────────────────────┐
│ 🔍 Search projects...        │
└──────────────────────────────┘
         ↓ (on focus or type)
┌──────────────────────────────┐
│ 🔍 proj                    ✕ │
├──────────────────────────────┤
│ Recent searches              │
│ • project alpha              │
│ • project beta               │
├──────────────────────────────┤
│ Suggestions                  │
│ • Projects (12)              │
│ • Project settings           │
└──────────────────────────────┘
```

--------------------------------

### Example Prompt Truncation Scenario

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/commands/specify.md

Demonstrates a specific scenario of prompt truncation, showing the initial character counts of each section and the final state after sections are removed to meet the 5000-character limit.

```plaintext
[Base prompt: 2800 chars]
[Architecture: 500 chars]
[Constraints: 800 chars]
[Files: 700 chars]
[Conventions: 800 chars]
[Dependencies: 600 chars]

After truncation:

[Base prompt: 2800 chars] ← preserved
[Architecture: 500 chars] ← preserved (high priority)
[Constraints: 800 chars] ← preserved
[Files: 700 chars] ← preserved
[Conventions: 800 chars] ← REMOVED (5600 - 800 = 4800 < 5000)
[Dependencies: 600 chars] ← REMOVED first (6200 - 600 = 5600 > 5000)

Final: 4800 chars ✓
```

--------------------------------

### Inline Error Message Example

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-ux-design/references/patterns-feedback.md

Example of an inline error message displayed immediately below a form field, indicating an invalid input and how to fix it.

```text
Email address
┌──────────────────────────────┐
│ invalid@                     │
└──────────────────────────────┘
✗ Please enter a valid email address
```

--------------------------------

### Fetch Complete Implementation Plan

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/README.md

Use the `/build` command to fetch the complete implementation plan in markdown format. It can auto-detect the requirement ID from the git branch name or accept additional instructions.

```bash
/build REQ-123
```

```bash
/build REQ-123 focus on security best practices
```

```bash
/build                  # Auto-detects from git branch name
```

--------------------------------

### BrainGrid Status Line Example

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/README.md

An example of the BrainGrid status line displayed in Claude Code, showing project, requirement, and task progress context.

```text
BrainGrid: PROJ-3 > REQ-128 [2/5]
~/Dropbox/Projects/my-app • ctx: 42k tokens (26%) • Sonnet 4.5
```

--------------------------------

### Show Requirement Implementation Plan

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/commands/specify.md

Retrieve the implementation plan for a specific requirement in markdown format.

```bash
braingrid requirement show REQ-X --format markdown
```

--------------------------------

### Command Hierarchy for Help

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-ux-design/references/patterns-cli.md

Demonstrates how users can access help and usage information at different levels of the command-line tool.

```bash
tool                    → Show help/usage
```

```bash
tool help              → Detailed help
```

```bash
tool <command>          → Run command
```

```bash
tool <command> --help   → Command-specific help
```

--------------------------------

### Technical Constraints Example

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/commands/specify.md

Specifies technical limitations and requirements such as performance targets, security, and compliance.

```text
[Constraints: Must handle 10k concurrent users, HIPAA compliance required,
integrate with existing PostgreSQL database]
```

--------------------------------

### List and Create Tasks

Source: https://github.com/braingridai/braingrid/blob/main/README.md

Commands to list and create tasks associated with a requirement in an initialized project.

```bash
# Working with the initialized project
braingrid task list -r REQ-456 [--format table|json|xml|markdown]
braingrid task create -r REQ-456 --title "Task Title" [--content "Description"] [--external-id <id>]
```

--------------------------------

### Update BrainGrid CLI

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-cli/references/README.md

Commands to update the BrainGrid CLI to the latest version or to check for available updates without installing.

```bash
braingrid update
braingrid update --check
```

--------------------------------

### BAD HTML for Fixed Layout

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-frontend-design/references/layout-and-responsive.md

This HTML example demonstrates a fixed-width layout that will NOT reflow correctly on different screen sizes.

```html
<div style="width: 800px; display: grid; grid-template-columns: 250px 550px">
```

--------------------------------

### List and Create Requirements

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-cli/references/README.md

Commands to list requirements for a specific project or create a new requirement with a name. The project parameter is optional in an initialized repository.

```bash
braingrid requirement list -p PROJ-456 [--status PLANNED]
braingrid requirement create -p PROJ-456 --name "Description"
```

--------------------------------

### Force Reinitialize Project

Source: https://github.com/braingridai/braingrid/blob/main/README.md

Skip the confirmation wizard and force reinitialization of the BrainGrid project. This is useful for scripting and automated setups.

```bash
braingrid init --force
braingrid init --project PROJ-123 --force
```

--------------------------------

### Manual Zsh Shell Completion Installation

Source: https://github.com/braingridai/braingrid/blob/main/README.md

Instructions for manually adding BrainGrid CLI tab completion to your Zsh shell configuration.

```bash
# Option 1: Add to shell config
braingrid completion zsh >> ~/.zshrc

# Option 2: Eval in current session (temporary)
eval "$(braingrid completion zsh)"
```

--------------------------------

### BrainGrid CLI Project Show

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-cli/references/README.md

Show details for the initialized project or a specific project by ID or repository.

```bash
braingrid project show
braingrid project show [<id>] [--repository "owner/repo"]
```

--------------------------------

### Manual Bash Shell Completion Installation

Source: https://github.com/braingridai/braingrid/blob/main/README.md

Instructions for manually adding BrainGrid CLI tab completion to your Bash shell configuration.

```bash
# Option 1: Add to shell config
braingrid completion bash >> ~/.bashrc

# Option 2: Eval in current session (temporary)
eval "$(braingrid completion bash)"
```

--------------------------------

### Smart Defaults for CLI Commands

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-ux-design/references/patterns-cli.md

Shows how to use sensible defaults for common actions and flags, allowing overrides for advanced use cases.

```bash
# Minimal (defaults applied)
deploy
```

```bash
# Explicit (override defaults)
deploy --env=staging --dry-run
```

--------------------------------

### Structured Output Formats

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-ux-design/references/patterns-cli.md

Demonstrates how to provide both human-readable and machine-readable output formats for CLI commands.

```bash
NAME          STATUS    AGE
frontend      Running   2h
backend       Running   2h
```

```bash
tool list --json
```

```bash
tool list --output=yaml
```

--------------------------------

### Next Steps after Interactive Requirement Creation

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/commands/save-requirement.md

After interactive creation, similar next steps are suggested: creating a git branch and building an implementation plan.

```bash
git checkout -b feature/REQ-{id}-{description}
```

```bash
braingrid requirement show REQ-{id} --format markdown
```

--------------------------------

### Error Feedback Pattern

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-ux-design/references/patterns-cli.md

Provides an example of a detailed error message, including the location, cause, suggested fix, and recovery command.

```bash
Error: Invalid configuration file

  → config.yaml line 12: unexpected key 'databse'
    Did you mean 'database'?

Run 'tool validate' to check your config
```

--------------------------------

### Secondary Sidebar Navigation Example

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-ux-design/references/patterns-navigation.md

Demonstrates a secondary sidebar used for complex sections with numerous sub-pages, complementing the global navigation.

```text
┌────────┬─────────────┬───────────────┐
│ Global │ Section nav │ Page content  │
│  nav   │ • Overview  │               │
│        │ • Members   │               │
│        │ • Settings  │               │
└────────┴─────────────┴───────────────┘
```

--------------------------------

### Standard Command Structure

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-ux-design/references/patterns-cli.md

Illustrates the typical format for CLI commands, including the tool name, command, subcommand, arguments, and flags.

```bash
tool <command> [subcommand] [arguments] [--flags]
```

```bash
git commit -m "message"
```

```bash
npm install react --save
```

```bash
kubectl get pods --namespace=prod
```

--------------------------------

### Error Toast/Snackbar Example

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-ux-design/references/patterns-feedback.md

Visual representation of a toast or snackbar notification for a non-field error, such as a network issue, with an optional retry action.

```text
┌─────────────────────────────────────┐
│ ✗ Couldn't save. Check connection   │
│                             [Retry] │
└─────────────────────────────────────┘
```

--------------------------------

### Initialize a BrainGrid Project

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/commands/save-requirement.md

Initialize a new BrainGrid project in the current directory. This command creates a `.braingrid/project.json` file, which is essential for BrainGrid to track the active project context.

```bash
braingrid init
```

--------------------------------

### Sidebar Navigation Example

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-ux-design/references/patterns-navigation.md

Depicts a vertical sidebar navigation, suitable for supporting more items and nested hierarchies. It can be collapsed to an icon-only view.

```text
┌────────┬────────────────────────────┐
│ Logo   │                            │
├────────┤                            │
│ 📊 Dash│  Page content...           │
│ 📁 Proj│                            │
│ ⚙ Sett │                            │
│        │                            │
│ [User] │                            │
└────────┴────────────────────────────┘
```

--------------------------------

### Toast/Snackbar Success Message Example

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-ux-design/references/patterns-feedback.md

Visual representation of a toast or snackbar notification for a successful operation, including an optional action link.

```text
┌─────────────────────────────────────┐
│ ✓ Project created successfully      │
│                              [View] │
└─────────────────────────────────────┘
```

--------------------------------

### Task Creation Guidelines

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-build/SKILL.md

Follow these guidelines for creating tasks, including subject format, valid types, and optional scope or dependency information.

```text
Subject format: TASK N: type: description (lowercase imperative description)
Valid types: feat, fix, docs, style, refactor, perf, test, chore
Optional scope: TASK N: type(scope): description
If task has blockedBy deps, append (blocked by N,N,...) to subject
activeForm = the type: description portion (shown as spinner text)
Commit hash added later on completion: TASK N (hash): type: description
```

--------------------------------

### Create a Task for an Initialized Project

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-cli/references/README.md

Creates a new task for a given requirement within the initialized project. Includes optional content for the task description.

```bash
braingrid task create -r REQ-456 --title "Task Title" [--content "Description"]
```

--------------------------------

### Typical Workflow: Working on Existing Requirements

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/README.md

Commands for managing existing requirements and tasks, including listing, showing, and updating their statuses.

```bash
# List requirements
braingrid requirement list

# Show specific requirement
braingrid requirement show REQ-123

# List tasks
braingrid task list -r REQ-123

# Update requirement status
braingrid requirement update REQ-123 --status IN_PROGRESS
```

--------------------------------

### Get Current Git Branch

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-build/SKILL.md

Retrieves the name of the current git branch. This is used to auto-detect the requirement ID if not provided as an argument.

```bash
git rev-parse --abbrev-ref HEAD
```

--------------------------------

### BrainGrid CLI Initialization

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-cli/references/README.md

Initialize your repository with a BrainGrid project, with options for wizard, specific project ID, or forced reinitialization.

```bash
# Step-by-step wizard to initialize your project
braingrid init

# Manually specify project by ID (short ID or UUID)
braingrid init --project PROJ-123

# Skip wizard and force reinitialization (useful for scripts)
braingrid init --force
braingrid init --project PROJ-123 --force
```

--------------------------------

### Progressive Output for Long Operations

Source: https://github.com/braingridai/braingrid/blob/main/claude-code/skills/bg-ux-design/references/patterns-cli.md

Provides examples of how to display progress for long-running CLI operations using distinct symbols for different states.

```bash
Deploying application...
  ✓ Building image
  ✓ Pushing to registry
  → Running migrations
  ○ Starting containers
```