@auto-engineer/react-gen 1.134.0

package/skills/ui-styling/SKILL.md

@@ -0,0 +1,324 @@
+---
+name: ui-styling
+description: Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
+argument-hint: "[component or layout]"
+license: MIT
+metadata:
+  author: claudekit
+  version: "1.0.0"
+---
+
+# UI Styling Skill
+
+Comprehensive skill for creating beautiful, accessible user interfaces combining shadcn/ui components, Tailwind CSS utility styling, and canvas-based visual design systems.
+
+## Reference
+
+- shadcn/ui: https://ui.shadcn.com/llms.txt
+- Tailwind CSS: https://tailwindcss.com/docs
+
+## When to Use This Skill
+
+Use when:
+- Building UI with React-based frameworks (Next.js, Vite, Remix, Astro)
+- Implementing accessible components (dialogs, forms, tables, navigation)
+- Styling with utility-first CSS approach
+- Creating responsive, mobile-first layouts
+- Implementing dark mode and theme customization
+- Building design systems with consistent tokens
+- Generating visual designs, posters, or brand materials
+- Rapid prototyping with immediate visual feedback
+- Adding complex UI patterns (data tables, charts, command palettes)
+
+## Core Stack
+
+### Component Layer: shadcn/ui
+- Pre-built accessible components via Radix UI primitives
+- Copy-paste distribution model (components live in your codebase)
+- TypeScript-first with full type safety
+- Composable primitives for complex UIs
+- CLI-based installation and management
+
+### Styling Layer: Tailwind CSS
+- Utility-first CSS framework
+- Build-time processing with zero runtime overhead
+- Mobile-first responsive design
+- Consistent design tokens (colors, spacing, typography)
+- Automatic dead code elimination
+
+### Visual Design Layer: Canvas
+- Museum-quality visual compositions
+- Philosophy-driven design approach
+- Sophisticated visual communication
+- Minimal text, maximum visual impact
+- Systematic patterns and refined aesthetics
+
+## Quick Start
+
+### Component + Styling Setup
+
+**Install shadcn/ui with Tailwind:**
+```bash
+npx shadcn@latest init
+```
+
+CLI prompts for framework, TypeScript, paths, and theme preferences. This configures both shadcn/ui and Tailwind CSS.
+
+**Add components:**
+```bash
+npx shadcn@latest add button card dialog form
+```
+
+**Use components with utility styling:**
+```tsx
+import { Button } from "@/components/ui/button"
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
+
+export function Dashboard() {
+  return (
+    <div className="container mx-auto p-6 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+      <Card className="hover:shadow-lg transition-shadow">
+        <CardHeader>
+          <CardTitle className="text-2xl font-bold">Analytics</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <p className="text-muted-foreground">View your metrics</p>
+          <Button variant="default" className="w-full">
+            View Details
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+```
+
+### Alternative: Tailwind-Only Setup
+
+**Vite projects:**
+```bash
+npm install -D tailwindcss @tailwindcss/vite
+```
+
+```javascript
+// vite.config.ts
+import tailwindcss from '@tailwindcss/vite'
+export default { plugins: [tailwindcss()] }
+```
+
+```css
+/* src/index.css */
+@import "tailwindcss";
+```
+
+## Component Library Guide
+
+**Comprehensive component catalog with usage patterns, installation, and composition examples.**
+
+See: `references/shadcn-components.md`
+
+Covers:
+- Form & input components (Button, Input, Select, Checkbox, Date Picker, Form validation)
+- Layout & navigation (Card, Tabs, Accordion, Navigation Menu)
+- Overlays & dialogs (Dialog, Drawer, Popover, Toast, Command)
+- Feedback & status (Alert, Progress, Skeleton)
+- Display components (Table, Data Table, Avatar, Badge)
+
+## Theme & Customization
+
+**Theme configuration, CSS variables, dark mode implementation, and component customization.**
+
+See: `references/shadcn-theming.md`
+
+Covers:
+- Dark mode setup with next-themes
+- CSS variable system
+- Color customization and palettes
+- Component variant customization
+- Theme toggle implementation
+
+## Accessibility Patterns
+
+**ARIA patterns, keyboard navigation, screen reader support, and accessible component usage.**
+
+See: `references/shadcn-accessibility.md`
+
+Covers:
+- Radix UI accessibility features
+- Keyboard navigation patterns
+- Focus management
+- Screen reader announcements
+- Form validation accessibility
+
+## Tailwind Utilities
+
+**Core utility classes for layout, spacing, typography, colors, borders, and shadows.**
+
+See: `references/tailwind-utilities.md`
+
+Covers:
+- Layout utilities (Flexbox, Grid, positioning)
+- Spacing system (padding, margin, gap)
+- Typography (font sizes, weights, alignment, line height)
+- Colors and backgrounds
+- Borders and shadows
+- Arbitrary values for custom styling
+
+## Responsive Design
+
+**Mobile-first breakpoints, responsive utilities, and adaptive layouts.**
+
+See: `references/tailwind-responsive.md`
+
+Covers:
+- Mobile-first approach
+- Breakpoint system (sm, md, lg, xl, 2xl)
+- Responsive utility patterns
+- Container queries
+- Max-width queries
+- Custom breakpoints
+
+## Tailwind Customization
+
+**Config file structure, custom utilities, plugins, and theme extensions.**
+
+See: `references/tailwind-customization.md`
+
+Covers:
+- @theme directive for custom tokens
+- Custom colors and fonts
+- Spacing and breakpoint extensions
+- Custom utility creation
+- Custom variants
+- Layer organization (@layer base, components, utilities)
+- Apply directive for component extraction
+
+## Visual Design System
+
+**Canvas-based design philosophy, visual communication principles, and sophisticated compositions.**
+
+See: `references/canvas-design-system.md`
+
+Covers:
+- Design philosophy approach
+- Visual communication over text
+- Systematic patterns and composition
+- Color, form, and spatial design
+- Minimal text integration
+- Museum-quality execution
+- Multi-page design systems
+
+## Utility Scripts
+
+**Python automation for component installation and configuration generation.**
+
+### shadcn_add.py
+Add shadcn/ui components with dependency handling:
+```bash
+python scripts/shadcn_add.py button card dialog
+```
+
+### tailwind_config_gen.py
+Generate tailwind.config.js with custom theme:
+```bash
+python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter
+```
+
+## Best Practices
+
+1. **Component Composition**: Build complex UIs from simple, composable primitives
+2. **Utility-First Styling**: Use Tailwind classes directly; extract components only for true repetition
+3. **Mobile-First Responsive**: Start with mobile styles, layer responsive variants
+4. **Accessibility-First**: Leverage Radix UI primitives, add focus states, use semantic HTML
+5. **Design Tokens**: Use consistent spacing scale, color palettes, typography system
+6. **Dark Mode Consistency**: Apply dark variants to all themed elements
+7. **Performance**: Leverage automatic CSS purging, avoid dynamic class names
+8. **TypeScript**: Use full type safety for better DX
+9. **Visual Hierarchy**: Let composition guide attention, use spacing and color intentionally
+10. **Expert Craftsmanship**: Every detail matters - treat UI as a craft
+
+## Reference Navigation
+
+**Component Library**
+- `references/shadcn-components.md` - Complete component catalog
+- `references/shadcn-theming.md` - Theming and customization
+- `references/shadcn-accessibility.md` - Accessibility patterns
+
+**Styling System**
+- `references/tailwind-utilities.md` - Core utility classes
+- `references/tailwind-responsive.md` - Responsive design
+- `references/tailwind-customization.md` - Configuration and extensions
+
+**Visual Design**
+- `references/canvas-design-system.md` - Design philosophy and canvas workflows
+
+**Automation**
+- `scripts/shadcn_add.py` - Component installation
+- `scripts/tailwind_config_gen.py` - Config generation
+
+## Common Patterns
+
+**Form with validation:**
+```tsx
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import * as z from "zod"
+import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+
+const schema = z.object({
+  email: z.string().email(),
+  password: z.string().min(8)
+})
+
+export function LoginForm() {
+  const form = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: { email: "", password: "" }
+  })
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(console.log)} className="space-y-6">
+        <FormField control={form.control} name="email" render={({ field }) => (
+          <FormItem>
+            <FormLabel>Email</FormLabel>
+            <FormControl>
+              <Input type="email" {...field} />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )} />
+        <Button type="submit" className="w-full">Sign In</Button>
+      </form>
+    </Form>
+  )
+}
+```
+
+**Responsive layout with dark mode:**
+```tsx
+<div className="min-h-screen bg-white dark:bg-gray-900">
+  <div className="container mx-auto px-4 py-8">
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      <Card className="bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700">
+        <CardContent className="p-6">
+          <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
+            Content
+          </h3>
+        </CardContent>
+      </Card>
+    </div>
+  </div>
+</div>
+```
+
+## Resources
+
+- shadcn/ui Docs: https://ui.shadcn.com
+- Tailwind CSS Docs: https://tailwindcss.com
+- Radix UI: https://radix-ui.com
+- Tailwind UI: https://tailwindui.com
+- Headless UI: https://headlessui.com
+- v0 (AI UI Generator): https://v0.dev

package/skills/ui-styling/canvas-fonts/ArsenalSC-OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2012 The Arsenal Project Authors (andrij.design@gmail.com)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/skills/ui-styling/canvas-fonts/BigShoulders-OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2019 The Big Shoulders Project Authors (https://github.com/xotypeco/big_shoulders)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/skills/ui-styling/canvas-fonts/Boldonse-OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2024 The Boldonse Project Authors (https://github.com/googlefonts/boldonse)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.