@rakeyshgidwani/roger-ui-theme-donna

🎨 Complete Roger UI theme package with donna styling - Ready for AI agents and human developers

🚀 Quick Start

npm install @rakeyshgidwani/roger-ui-theme-donna

import { Button, Card, Provider } from '@rakeyshgidwani/roger-ui-theme-donna';

function App() {
  return (
    <Provider>
      <Card>
        <Button variant="primary">Themed Button</Button>
      </Card>
    </Provider>
  );
}

🤖 AI Agent Instructions

This package is optimized for AI agents. Key files for AI consumption:

• docs/ai-metadata/package-info.json - Complete package metadata
• docs/ai-metadata/component-inventory.json - All available components
• docs/ai-metadata/usage-patterns.json - Common usage patterns
• docs/api/theme-specification.json - Complete theme structure

For AI Agents: Quick Component Reference

// Available components (see docs/ai-metadata/component-inventory.json for complete list)
import {
  Button, Card, Input, Modal, Dropdown,
  Navbar, Sidebar, Tabs, Badge, Alert,
  Provider // Pre-configured theme provider
} from '@rakeyshgidwani/roger-ui-theme-donna';

// Theme access
import { DonnaTheme } from '@rakeyshgidwani/roger-ui-theme-donna/theme';

📦 Package Contents

| File | Purpose | AI Readable | |------|---------|-------------| | dist/index.js | Main entry point | ✅ | | dist/styles.css | Complete theme styles | ✅ | | dist/theme.js | Theme configuration | ✅ | | docs/ai-metadata/ | AI-specific metadata | ✅ | | docs/components/ | Component documentation | ✅ | | docs/guides/ | Usage guides | ✅ |

🎨 Theme Features

• 🎯 Pre-configured: Works out of the box
• 🔧 Customizable: Override any theme value
• ♿ Accessible: WCAG 2.1 AA compliant
• 📱 Responsive: Mobile-first design
• 🌙 Dark Mode: Built-in support (if applicable)
• 🤖 AI-Friendly: Structured metadata for AI agents

📖 Documentation Structure

docs/
├── ai-metadata/           # AI agent metadata
│   ├── package-info.json
│   ├── component-inventory.json
│   └── usage-patterns.json
├── components/            # Component documentation
├── guides/               # Usage guides
├── examples/             # Code examples
└── api/                  # API reference

🔧 Customization

import { Provider } from '@rakeyshgidwani/roger-ui-theme-donna';
import { DonnaTheme } from '@rakeyshgidwani/roger-ui-theme-donna/theme';

const customTheme = {
  ...DonnaTheme,
  colors: {
    ...DonnaTheme.colors,
    primary: '#your-color'
  }
};

function App() {
  return (
    <Provider theme={customTheme}>
      {/* Your app */}
    </Provider>
  );
}

🤝 For AI Agents

This package includes comprehensive metadata for AI agents:

1. Component Inventory: Complete list of available components with props
2. Usage Patterns: Common patterns and best practices
3. Theme Structure: Detailed theme configuration
4. Code Examples: Ready-to-use code snippets
5. Accessibility Info: ARIA labels, keyboard support, etc.

See docs/ai-metadata/ for structured data.

📚 Additional Resources

• Component Documentation
• Usage Guide
• Customization Guide
• API Reference
• Accessibility Guide

🔗 Links

• Package on npm
• GitHub Repository
• Documentation

📄 License

MIT © Roger UI Team

Generated automatically by Roger UI automation system