Color-to-Component Generator for Claude Skills

Devourer is a Claude skill that transforms color palettes into production-ready UI components.

• Accepts color palettes from Hexed or any color source
• Generates themed UI components in React, Vue, or HTML+CSS
• Creates complete component code with:
  • Multiple variants (primary, secondary, outline, ghost)
  • Interactive states (hover, active, focus, disabled)
  • Size variations (xs, sm, md, lg, xl)
  • Full TypeScript types
  • WCAG AA/AAA accessibility compliance
• Exports production-ready, copy-paste code

Install Devourer from the Claude Skills marketplace:

1. Go to Settings → Skills
2. Search for "Devourer"
3. Click "Add Skill"

See INSTALLATION.md for detailed instructions.

To use the color utilities locally:

pip install pillow
python scripts/color_utils.py variants "#3B82F6"

• SKILL.md - Instructions for Claude on how to use the skill
• scripts/color_utils.py - Color variant generation and WCAG contrast checking
• references/component_patterns.md - Detailed React/Vue implementation patterns
• assets/theme-template.css - CSS custom properties template
• assets/types-template.ts - TypeScript type definitions

When a user requests a themed component:

1. Parse the color palette (Hexed output, hex values, or named colors)
2. Generate the component with proper theming
3. Include all variants, states, and accessibility features
4. Save to /mnt/user-data/outputs/ and present to user

See SKILL.md for complete usage instructions.

1. Parse: Accept color palette in any format (Hexed JSON, hex array, named colors)
2. Map: Assign colors to component roles (primary, secondary, accent, neutrals)
3. Generate: Create state variants (hover, active, focus, disabled)
4. Validate: Check WCAG contrast ratios for accessibility
5. Output: Production-ready component code with types and examples

• Interactive: Button, Input, Select, Checkbox, Radio, Switch, Slider
• Container: Card, Modal, Panel, Alert, Toast
• Navigation: NavBar, Tabs, Breadcrumb, Pagination
• Data Display: Table, Badge, Avatar, Progress

export const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  size = 'md',
  ...props
}) => {
  // Production-ready component
};

<script setup lang="ts">
interface Props {
  variant?: 'primary' | 'secondary'
  size?: 'sm' | 'md' | 'lg'
}
</script>

Clean semantic HTML with CSS custom properties for theming.

• Components are single-file (CSS/JS inline for React/Vue)
• Default framework is React if not specified
• Requires color input (doesn't generate palettes)
• Each component request is independent
• No state management or routing included

Current version: 1.0.0

Created by Heathen (@heathenft)

MIT License

Copyright (c) 2026 Heathen

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.