@manhnv319/codexkit 0.1.0

package/.agents/skills/shader/references/glsl-shapes-sdf-circles-rectangles-polar-distance-fields.md

@@ -0,0 +1,106 @@
+# Shapes in GLSL
+
+Drawing shapes using Signed Distance Fields (SDF) and distance calculations.
+
+## Distance Fields Concept
+
+SDF returns distance from any point to shape edge:
+- **Negative**: Inside shape
+- **Zero**: On edge
+- **Positive**: Outside shape
+
+## Circle
+
+```glsl
+// Basic circle
+float circle(vec2 st, vec2 center, float radius) {
+    float d = distance(st, center);
+    return 1.0 - step(radius, d);
+}
+
+// Smooth edge circle
+float circleSDF(vec2 st, vec2 center, float radius) {
+    return length(st - center) - radius;
+}
+
+// Usage
+float d = circleSDF(st, vec2(0.5), 0.3);
+vec3 color = vec3(1.0 - smoothstep(0.0, 0.01, d));
+```
+
+## Rectangle
+
+```glsl
+// Basic rectangle
+float rect(vec2 st, vec2 pos, vec2 size) {
+    vec2 bl = step(pos, st);
+    vec2 tr = step(1.0 - pos - size, 1.0 - st);
+    return bl.x * bl.y * tr.x * tr.y;
+}
+
+// Rectangle SDF
+float rectSDF(vec2 st, vec2 center, vec2 size) {
+    vec2 d = abs(st - center) - size * 0.5;
+    return length(max(d, 0.0)) + min(max(d.x, d.y), 0.0);
+}
+
+// Rounded rectangle SDF
+float roundedRectSDF(vec2 st, vec2 center, vec2 size, float radius) {
+    vec2 d = abs(st - center) - size * 0.5 + radius;
+    return length(max(d, 0.0)) + min(max(d.x, d.y), 0.0) - radius;
+}
+```
+
+## Line
+
+```glsl
+// Line segment SDF
+float lineSDF(vec2 p, vec2 a, vec2 b) {
+    vec2 pa = p - a;
+    vec2 ba = b - a;
+    float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
+    return length(pa - ba * h);
+}
+
+// Draw line with thickness
+float line(vec2 st, vec2 a, vec2 b, float thickness) {
+    float d = lineSDF(st, a, b);
+    return 1.0 - smoothstep(0.0, thickness, d);
+}
+```
+
+## Shape Outlines
+
+```glsl
+// Outline only
+float outline(float d, float thickness) {
+    return 1.0 - smoothstep(0.0, thickness, abs(d));
+}
+
+// Fill with outline
+vec3 fillWithOutline(float d, vec3 fill, vec3 stroke, float thick) {
+    float fillMask = 1.0 - smoothstep(0.0, 0.01, d);
+    float edge = 1.0 - smoothstep(0.0, thick, abs(d));
+    return mix(fill * fillMask, stroke, edge * (1.0 - fillMask));
+}
+```
+
+## 2D Transformations
+
+```glsl
+// Rotate point around center
+vec2 rotate(vec2 st, vec2 center, float angle) {
+    st -= center;
+    float c = cos(angle);
+    float s = sin(angle);
+    st = mat2(c, -s, s, c) * st;
+    return st + center;
+}
+
+// Scale from center
+vec2 scale(vec2 st, vec2 center, vec2 s) {
+    return (st - center) / s + center;
+}
+```
+
+See also: `glsl-shapes-polygon-star-polar-sdf-combinations.md`

package/.agents/skills/shader/references/glsl-shaping-functions-step-smoothstep-curves-interpolation.md

@@ -0,0 +1,141 @@
+# Shaping Functions
+
+Control value interpolation for smooth transitions and effects.
+
+## Core Functions
+
+### step(edge, x)
+Hard threshold - returns 0.0 if x < edge, else 1.0.
+
+```glsl
+float y = step(0.5, st.x);  // Black left, white right
+```
+
+### smoothstep(edge0, edge1, x)
+Smooth Hermite interpolation between edges.
+
+```glsl
+float y = smoothstep(0.2, 0.8, st.x);  // Gradual transition
+```
+
+Internally: `t = clamp((x-edge0)/(edge1-edge0), 0.0, 1.0); return t*t*(3.0-2.0*t);`
+
+### mix(a, b, t)
+Linear interpolation: `a*(1-t) + b*t`
+
+```glsl
+vec3 color = mix(colorA, colorB, st.x);  // Gradient
+```
+
+## Power Functions
+
+```glsl
+float y = pow(st.x, 5.0);     // Exponential curve
+float y = sqrt(st.x);         // Square root
+float y = exp(st.x);          // Natural exponential
+float y = log(st.x);          // Natural logarithm
+```
+
+Exponent controls curve shape:
+- `pow(x, n)` where n > 1: Slow start, fast end
+- `pow(x, n)` where n < 1: Fast start, slow end
+
+## Trigonometric Functions
+
+```glsl
+float y = sin(st.x * PI);           // Wave (0 to 1 to 0)
+float y = cos(st.x * TWO_PI);       // Full cycle
+float y = sin(st.x * 10.0 + u_time); // Animated wave
+```
+
+Normalize sin/cos from [-1,1] to [0,1]:
+```glsl
+float y = sin(x) * 0.5 + 0.5;
+```
+
+## Fractional & Modulo
+
+```glsl
+float y = fract(st.x * 5.0);  // Sawtooth wave (0 to 1 repeating)
+float y = mod(st.x, 0.2);     // Modulo, repeats every 0.2
+float y = floor(st.x * 5.0);  // Integer part (0,1,2,3,4...)
+float y = ceil(st.x * 5.0);   // Round up
+```
+
+## Absolute & Sign
+
+```glsl
+float y = abs(st.x - 0.5);    // V-shape centered at 0.5
+float y = sign(st.x - 0.5);   // -1.0, 0.0, or 1.0
+```
+
+## Clamping
+
+```glsl
+float y = clamp(x, 0.0, 1.0);         // Constrain range
+float y = min(a, b);                   // Smaller value
+float y = max(a, b);                   // Larger value
+```
+
+## Custom Shaping Curves
+
+### Polynomial smoothstep (quintic)
+```glsl
+float smootherStep(float x) {
+    return x * x * x * (x * (x * 6.0 - 15.0) + 10.0);
+}
+```
+
+### Exponential impulse
+```glsl
+float impulse(float k, float x) {
+    float h = k * x;
+    return h * exp(1.0 - h);
+}
+```
+
+### Parabola
+```glsl
+float parabola(float x, float k) {
+    return pow(4.0 * x * (1.0 - x), k);
+}
+```
+
+### Cubic pulse
+```glsl
+float cubicPulse(float c, float w, float x) {
+    x = abs(x - c);
+    if (x > w) return 0.0;
+    x /= w;
+    return 1.0 - x * x * (3.0 - 2.0 * x);
+}
+```
+
+## Combining Functions
+
+Create band with two smoothsteps:
+```glsl
+float y = smoothstep(0.2, 0.4, st.x) - smoothstep(0.6, 0.8, st.x);
+```
+
+Smooth edges on shapes:
+```glsl
+float edge = 0.01;
+float circle = smoothstep(radius + edge, radius - edge, dist);
+```
+
+## Animation Patterns
+
+```glsl
+// Oscillate 0-1
+float t = sin(u_time) * 0.5 + 0.5;
+
+// Sawtooth
+float t = fract(u_time);
+
+// Triangle wave
+float t = abs(fract(u_time) * 2.0 - 1.0);
+
+// Ping-pong
+float t = abs(mod(u_time, 2.0) - 1.0);
+```

package/.agents/skills/shopify/README.md

@@ -0,0 +1,66 @@
+# Shopify API Research Documentation
+
+This directory contains comprehensive research and analysis of various APIs for integration purposes.
+
+## Contents
+
+### Shopify GraphQL Admin API Analysis
+**File:** `shopify-graphql-admin-api-analysis.md`  
+**Date:** 2025-10-25  
+**Status:** Complete  
+**Thoroughness:** Very Thorough
+
+A comprehensive analysis of Shopify's GraphQL Admin API covering:
+- API overview and capabilities
+- Key features and operations
+- Common query and mutation patterns
+- Best practices and optimization strategies
+- Authentication and security considerations
+- Rate limiting and performance optimization
+- Typical use cases and implementation patterns
+- Troubleshooting guide
+- Code examples in multiple languages
+- Resources and further learning
+
+**Key Sections:**
+1. Executive Summary
+2. API Overview
+3. Key Features
+4. Common Operations (Queries & Mutations)
+5. API Structure (Types, Connections, Errors)
+6. Best Practices
+7. Typical Use Cases
+8. API Versions and Deprecation
+9. Tools and SDKs
+10. Security Considerations
+11. Performance Optimization
+12. Common Patterns
+13. Troubleshooting
+14. Resources and Further Learning
+
+**Size:** 1,348 lines, ~26KB
+
+---
+
+## Usage
+
+These documents are intended for:
+- Development planning and architecture decisions
+- Team onboarding and training
+- Integration implementation reference
+- Best practices guidance
+- Troubleshooting support
+
+---
+
+## Maintenance
+
+- Documents should be reviewed quarterly
+- Update when API versions change
+- Add new findings from implementation experience
+- Keep code examples current with latest SDK versions
+
+---
+
+**Last Updated:** 2025-10-25  
+**Maintained By:** Claude Code Engineering Team

package/.agents/skills/shopify/SKILL.md

@@ -0,0 +1,320 @@
+---
+name: ck:shopify
+description: Build Shopify apps, extensions, themes with Shopify CLI. Use for GraphQL/REST APIs, Polaris UI, Liquid templates, checkout customization, webhooks, billing integration.
+argument-hint: "[extension-type] [feature]"
+---
+
+# Shopify Development
+
+Comprehensive guide for building on Shopify platform: apps, extensions, themes, and API integrations.
+
+## Platform Overview
+
+**Core Components:**
+- **Shopify CLI** - Development workflow tool
+- **GraphQL Admin API** - Primary API for data operations (recommended)
+- **REST Admin API** - Legacy API (maintenance mode)
+- **Polaris UI** - Design system for consistent interfaces
+- **Liquid** - Template language for themes
+
+**Extension Points:**
+- Checkout UI - Customize checkout experience
+- Admin UI - Extend admin dashboard
+- POS UI - Point of Sale customization
+- Customer Account - Post-purchase pages
+- Theme App Extensions - Embedded theme functionality
+
+## Quick Start
+
+### Prerequisites
+
+```bash
+# Install Shopify CLI
+npm install -g @shopify/cli@latest
+
+# Verify installation
+shopify version
+```
+
+### Create New App
+
+```bash
+# Initialize app
+shopify app init
+
+# Start development server
+shopify app dev
+
+# Generate extension
+shopify app generate extension --type checkout_ui_extension
+
+# Deploy
+shopify app deploy
+```
+
+### Theme Development
+
+```bash
+# Initialize theme
+shopify theme init
+
+# Start local preview
+shopify theme dev
+
+# Pull from store
+shopify theme pull --live
+
+# Push to store
+shopify theme push --development
+```
+
+## Development Workflow
+
+### 1. App Development
+
+**Setup:**
+```bash
+shopify app init
+cd my-app
+```
+
+**Configure Access Scopes** (`shopify.app.toml`):
+```toml
+[access_scopes]
+scopes = "read_products,write_products,read_orders"
+```
+
+**Start Development:**
+```bash
+shopify app dev  # Starts local server with tunnel
+```
+
+**Add Extensions:**
+```bash
+shopify app generate extension --type checkout_ui_extension
+```
+
+**Deploy:**
+```bash
+shopify app deploy  # Builds and uploads to Shopify
+```
+
+### 2. Extension Development
+
+**Available Types:**
+- Checkout UI - `checkout_ui_extension`
+- Admin Action - `admin_action`
+- Admin Block - `admin_block`
+- POS UI - `pos_ui_extension`
+- Function - `function` (discounts, payment, delivery, validation)
+
+**Workflow:**
+```bash
+shopify app generate extension
+# Select type, configure
+shopify app dev  # Test locally
+shopify app deploy  # Publish
+```
+
+### 3. Theme Development
+
+**Setup:**
+```bash
+shopify theme init
+# Choose Dawn (reference theme) or start fresh
+```
+
+**Local Development:**
+```bash
+shopify theme dev
+# Preview at localhost:9292
+# Auto-syncs to development theme
+```
+
+**Deployment:**
+```bash
+shopify theme push --development  # Push to dev theme
+shopify theme publish --theme=123  # Set as live
+```
+
+## When to Build What
+
+### Build an App When:
+- Integrating external services
+- Adding functionality across multiple stores
+- Building merchant-facing admin tools
+- Managing store data programmatically
+- Implementing complex business logic
+- Charging for functionality
+
+### Build an Extension When:
+- Customizing checkout flow
+- Adding fields/features to admin pages
+- Creating POS actions for retail
+- Implementing discount/payment/shipping rules
+- Extending customer account pages
+
+### Build a Theme When:
+- Creating custom storefront design
+- Building unique shopping experiences
+- Customizing product/collection pages
+- Implementing brand-specific layouts
+- Modifying homepage/content pages
+
+### Combination Approach:
+**App + Theme Extension:**
+- App handles backend logic and data
+- Theme extension provides storefront UI
+- Example: Product reviews, wishlists, size guides
+
+## Essential Patterns
+
+### GraphQL Product Query
+
+```graphql
+query GetProducts($first: Int!) {
+  products(first: $first) {
+    edges {
+      node {
+        id
+        title
+        handle
+        variants(first: 5) {
+          edges {
+            node {
+              id
+              price
+              inventoryQuantity
+            }
+          }
+        }
+      }
+    }
+    pageInfo {
+      hasNextPage
+      endCursor
+    }
+  }
+}
+```
+
+### Checkout Extension (React)
+
+```javascript
+import { reactExtension, BlockStack, TextField, Checkbox } from '@shopify/ui-extensions-react/checkout';
+
+export default reactExtension('purchase.checkout.block.render', () => <Extension />);
+
+function Extension() {
+  const [message, setMessage] = useState('');
+
+  return (
+    <BlockStack>
+      <TextField label="Gift Message" value={message} onChange={setMessage} />
+    </BlockStack>
+  );
+}
+```
+
+### Liquid Product Display
+
+```liquid
+{% for product in collection.products %}
+  <div class="product-card">
+    <img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}">
+    <h3>{{ product.title }}</h3>
+    <p>{{ product.price | money }}</p>
+    <a href="{{ product.url }}">View Details</a>
+  </div>
+{% endfor %}
+```
+
+## Best Practices
+
+**API Usage:**
+- Prefer GraphQL over REST for new development
+- Request only needed fields to reduce costs
+- Implement pagination for large datasets
+- Use bulk operations for batch processing
+- Respect rate limits (cost-based for GraphQL)
+
+**Security:**
+- Store API credentials in environment variables
+- Verify webhook signatures
+- Use OAuth for public apps
+- Request minimal access scopes
+- Implement session tokens for embedded apps
+
+**Performance:**
+- Cache API responses when appropriate
+- Optimize images in themes
+- Minimize Liquid logic complexity
+- Use async loading for extensions
+- Monitor query costs in GraphQL
+
+**Testing:**
+- Use development stores for testing
+- Test across different store plans
+- Verify mobile responsiveness
+- Check accessibility (keyboard, screen readers)
+- Validate GDPR compliance
+
+## Reference Documentation
+
+Detailed guides for advanced topics:
+
+- **[App Development](references/app-development.md)** - OAuth, APIs, webhooks, billing
+- **[Extensions](references/extensions.md)** - Checkout, Admin, POS, Functions
+- **[Themes](references/themes.md)** - Liquid, sections, deployment
+
+## Scripts
+
+**[shopify_init.py](scripts/shopify_init.py)** - Initialize Shopify projects interactively
+```bash
+python scripts/shopify_init.py
+```
+
+## Troubleshooting
+
+**Rate Limit Errors:**
+- Monitor `X-Shopify-Shop-Api-Call-Limit` header
+- Implement exponential backoff
+- Use bulk operations for large datasets
+
+**Authentication Failures:**
+- Verify access token validity
+- Check required scopes granted
+- Ensure OAuth flow completed
+
+**Extension Not Appearing:**
+- Verify extension target correct
+- Check extension published
+- Ensure app installed on store
+
+**Webhook Not Receiving:**
+- Verify webhook URL accessible
+- Check signature validation
+- Review logs in Partner Dashboard
+
+## Resources
+
+**Official Documentation:**
+- Shopify Docs: https://shopify.dev/docs
+- GraphQL API: https://shopify.dev/docs/api/admin-graphql
+- Shopify CLI: https://shopify.dev/docs/api/shopify-cli
+- Polaris: https://polaris.shopify.com
+
+**Tools:**
+- GraphiQL Explorer (Admin → Settings → Apps → Develop apps)
+- Partner Dashboard (app management)
+- Development stores (free testing)
+
+**API Versioning:**
+- Quarterly releases (YYYY-MM format)
+- Current: 2025-01
+- 12-month support per version
+- Test before version updates
+
+---
+
+**Note:** This skill covers Shopify platform as of January 2025. Refer to official documentation for latest updates.