# LockNKey UX Designer Plugin

Expert UX/UI designer plugin for LockNKey password manager development.

## Features

### 🎨 Design Tools
- **shadcn/ui Integration**: Access to modern React component library with Tailwind CSS
- **Chrome DevTools**: Browser automation for testing, screenshots, and accessibility validation
- **Pieces LTM**: Long-term memory for design decisions and patterns

### 🎯 Specializations
- User-centered interface design
- WCAG 2.1 AA accessibility compliance
- Responsive design across devices
- Component architecture with shadcn/ui
- User journey testing and validation
- Educational UX for technical concepts

### 🔧 MCP Servers
- `shadcn` (registry): Component library with registry-based access to 443+ components, examples, and blocks - **FULLY FUNCTIONAL**
- `@ai-elements` (registry): 60 AI-specific components from Vercel (message, conversation, code-block, reasoning, etc.) - **FULLY FUNCTIONAL via CLI**
- `kibo-ui`: Specialized UI components (contribution-graph, gantt, kanban, qr-code, etc.) - **PARTIAL: Only `getComponents()` works, `getComponent()` has schema bug**
- `chrome-devtools`: Browser automation and testing
- `basic-memory`: Design decision memory and context (Obsidian vault)

## Agent: ux-designer

The `ux-designer` agent provides:
- User research and persona development
- Information architecture and user flows
- Visual design and component specifications
- Accessibility testing and WCAG compliance validation
- Browser-based usability testing
- Design documentation and implementation guidance

### Use Cases
- "Design a quantum security indicator component"
- "Test the vault unlock flow for accessibility"
- "Create a responsive password entry form"
- "Validate keyboard navigation for password manager"
- "Design onboarding flow for quantum security concepts"

## Installation

```bash
/plugin marketplace add ./claude-marketplace
/plugin install lockkey-ux@lockkey-marketplace
```

After installation, restart Claude Code to activate the `ux-designer` agent.

## Verify Installation

```bash
/agents      # Should show ux-designer
/mcp         # Should show shadcn, kibo-ui, chrome-devtools, basic-memory servers
```

### Component Registries

**@ai-elements (Vercel AI SDK):**
- ✅ 60 AI-specific components available via CLI
- Install: `npx shadcn@latest add https://registry.ai-sdk.dev/{component-name}.json`
- Examples: `message`, `conversation`, `prompt-input`, `code-block`, `reasoning`, `artifact`, `chain-of-thought`
- Perfect for LockNKey's quantum security educational components!

**Kibo UI MCP Limitations:**
- ✅ `getComponents()` - Works, returns 41 component names
- ❌ `getComponent(name)` - Broken due to schema bug (missing parameter declaration)
- **Workaround:** Use component list for discovery, then visit https://www.kibo-ui.com for details

**Useful Kibo UI Components:**
- `contribution-graph` - GitHub-style activity visualization
- `qr-code` - QR code generator (2FA setup)
- `status` - Status indicators (quantum protection levels)
- `gantt`, `kanban` - Project/task visualizations
- `credit-card` - Card input with validation

## Usage

The ux-designer agent is available for design tasks:

```
@ux-designer Design a password strength indicator that shows quantum protection level
```

The agent will:
1. Research user needs and accessibility requirements
2. Design component using shadcn/ui patterns
3. Create implementation specifications
4. Test in browser using Chrome DevTools
5. Validate WCAG compliance
6. Provide design documentation

## LockNKey Context

The agent is pre-configured with LockNKey password manager context:
- Quantum security UX patterns
- Developer-focused user base
- Technical transparency requirements
- Browser extension integration needs
- Educational components for quantum concepts

## Development

Plugin structure:
```
lockkey-ux/
├── .mcp.json                      # MCP server configurations
├── .claude-plugin/
│   └── plugin.json                # Plugin metadata
├── agents/
│   └── ux-designer.md            # Agent definition
└── README.md                      # This file
```

## License

MIT License - LockNKey Team
