@geckoui/geckoui 2.0.0-beta-0 → 2.0.0

package/README.md

@@ -8,7 +8,7 @@
   The only thing our Gecko 🦎 eats is bugs! 🐛<br />
 </p>
 
-📚 **Documentation**: [Gecko](https://gecko.productionbug.com)
+📚 **Documentation**: [Gecko](https://geckoui.dev)
 
 ## Installation
 
@@ -74,64 +74,49 @@ function App() {
 
 ## Theming
 
-GeckoUI uses a powerful CSS variable-based theming system that automatically adapts all components when you change the theme class.
+GeckoUI uses [OKLCH](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch) color values with CSS custom properties (`--color-*`) powered by Tailwind CSS v4. You can override colors using **any CSS color format** — oklch, hex, rgb, hsl, etc.
 
-### Applying Themes
+### Dark Mode
 
-Simply add a theme class to your root element:
+Add the `.dark` class to your root element:
 
 ```tsx
-// Light theme (default)
-<div className="light">
-  <App />
-</div>
-
-// Dark theme
 <div className="dark">
   <App />
 </div>
-
-// Custom theme
-<div className="neon">
-  <App />
-</div>
 ```
 
-### Built-in Themes
-
-- **Light** (default) - Clean, bright interface
-- **Dark** - Easy on the eyes
-
-### Creating Custom Themes
+### Customizing Colors
 
-Create a CSS file with your theme:
+Override CSS variables to match your brand:
 
 ```css
-/* my-theme.css */
-.my-theme {
-  /* Override any other CSS variables as needed */
+:root {
+  --color-primary-500: oklch(0.65 0.24 330);
+  --color-primary-600: oklch(0.55 0.22 330);
+
+  /* hex works too */
+  --color-primary-700: #6d28d9;
 }
 ```
 
-Import it and use it:
+Import after the base styles:
 
 ```tsx
-import "./my-theme.css";
+import "@geckoui/geckoui/styles.css";
 
-<div className="my-theme">
-  <App />
-</div>;
+import "./my-theme.css";
 ```
 
 ## Advanced Usage
 
-### Custom Styling with BEM
+### Custom Styling with Data Attributes
 
-All components use BEM (Block Element Modifier) naming for easy customization:
+Components use `data-*` attributes for variant/state styling:
 
 ```css
-/* Target specific component parts */
-.GeckoUIButton--contained-primary {
+/* Target specific variants */
+.GeckoUIButton[data-variant="filled"][data-color="primary"] {
   /* Your custom styles */
 }
 
@@ -148,6 +133,16 @@ All components are fully typed. Import types as needed:
 import type { ButtonProps, InputProps } from "@geckoui/geckoui";
 ```
 
+## AI Skills
+
+Install the GeckoUI skill to help AI assistants (Claude Code, etc.) generate accurate component code and themes:
+
+```
+npx skills add GeckoUI/skills
+```
+
+The skill provides component API references, theming variables, and class name mappings so AI agents can generate correct GeckoUI code without hallucination.
+
 ## License
 
 This project is licensed under the MIT License.