anchi-kit 1.2.2 → 1.2.6

package/.cursor/skills/aesthetic/references/design-principles.md

@@ -0,0 +1,62 @@
+# Design Principles: Beautiful & Right
+
+## BEAUTIFUL: Understanding Aesthetic Principles
+
+### Study Process
+Analyze high-quality designs on Dribbble, Mobbin, Behance. Ask AI to identify:
+- Design styles (Memphis, Flat Design, Glassmorphism, Neo-brutalism, Minimalism)
+- Layout structures & applications
+- Typography systems (font pairing, hierarchy, scaling)
+- Color systems (palettes, contrasts, psychology)
+
+### Visual Hierarchy
+Guide users through interfaces effectively:
+- **Size**: Larger elements draw attention first
+- **Contrast**: High contrast (text/background) boosts readability
+- **Typography**: Use weight, size, style for hierarchy
+- **Placement**: F-pattern (web), Z-pattern (landing pages)
+- **Spacing**: White space improves clarity, reduces cognitive load
+
+### Typography Best Practices
+- Stick to 2-3 typefaces max
+- Clear font hierarchy with proper spacing, sizes, alignment
+- Appropriate font sizes for readability across devices
+- Short, scannable paragraphs
+
+### Color Theory Applications
+- **Blue**: Trust, security, calmness
+- **Red**: Urgency, passion, excitement
+- **Warm colors**: Drive urgency
+- **Cool colors**: Create trust
+- Use color intentionally to direct attention & evoke emotion
+- Ensure WCAG AA contrast ratios (4.5:1 text, 3:1 large text)
+
+### White Space
+Not empty—essential for clarity. Proper spacing between sections, buttons, text improves readability & gives visual breathing room.
+
+## RIGHT: Ensuring Functionality
+
+### Design Systems Research
+Search "Figma Design System + [style]" to understand:
+- Component architecture (atomic design: atoms → molecules → organisms)
+- Layout principles (grid systems, responsive breakpoints)
+- UX patterns & interactions
+
+### Component Library Standards
+- Semantic HTML first (button > div with ARIA roles)
+- Built-in accessibility, focus handling, keyboard interaction
+- Each component tested for accessibility before adding
+- Documentation includes structure, focus order, keyboard expectations, screen reader announcements
+
+### Accessibility Requirements
+- WCAG 2.1 AA minimum (work toward 2.2)
+- Color contrast ratios meet/exceed minimums
+- Alt text for images
+- Color-blind-friendly palettes
+- Keyboard navigation support
+- Screen reader compatibility
+
+### Testing Protocol
+- Automated tools catch 30-50% of issues
+- Manual testing crucial for comprehensive coverage
+- Test with real users when possible

package/.cursor/skills/aesthetic/references/design-resources.md

@@ -0,0 +1,75 @@
+# Design Resources & Tools
+
+## Inspiration Platforms
+
+### Design Galleries
+- **Dribbble**: High-quality UI/UX designs, trending styles
+- **Mobbin**: Mobile app design patterns, real-world examples
+- **Behance**: Creative portfolios, comprehensive projects
+- **Awwwards**: Award-winning web experiences
+- **21st.dev**: Component animations, micro-interactions
+- **CSS Design Awards**: Cutting-edge web designs
+
+### Design Systems
+Search pattern: "Figma Design System + [style name]"
+- Material Design (Google)
+- Human Interface Guidelines (Apple)
+- Carbon Design System (IBM)
+- Ant Design
+- Shadcn UI
+- Atlassian Design System
+
+## AI Tools for Design
+
+### Generation
+- **Gemini**: Image generation via ai-multimodal skill
+- **Claude**: Design variations, component code
+
+### Prompt Structure
+Include in prompts:
+- Task description
+- Preferred design style
+- Color palette
+- Typography preferences
+- Target audience/user story
+- Animation specifications
+
+## MCP Integrations
+
+### Available MCPs
+- **Chrome MCP**: Research designs, analyze trends from Dribbble/Mobbin
+- **Figma MCP**: Code based on community designs
+- **Freepik MCP**: Access stock imagery
+- **ChatGPT-Image MCP**: Image resources
+- **gallery-dl**: Download reference images via bash
+
+### Usage
+Connect MCPs for enhanced capabilities when researching, analyzing, or implementing designs.
+
+## Development Approach
+
+### Git Worktrees Strategy
+Maintain separate branches for different design style variations during development.
+Allows parallel exploration of Minimalist, Modern, Glassmorphism interpretations.
+
+### Parallel Agents
+Use multiple agents to generate design style variations simultaneously, compare approaches.
+
+## Documentation Standards
+
+### Required Files
+Create in `./docs/` directory:
+- **design-guideline.md**: Color patterns, typography, layout principles, component styling, design highlights
+- **design-story.md**: Narrative elements, thematic decisions, user journey considerations
+
+### Content
+Document:
+- Rationale for design decisions
+- Style guide (colors, fonts, spacing)
+- Component patterns & usage
+- Responsive breakpoints
+- Accessibility considerations
+- Brand alignment
+
+### Maintenance
+Update during development. Use development rules to remind Cursor to follow guidelines consistently.

package/.cursor/skills/aesthetic/references/micro-interactions.md

@@ -0,0 +1,53 @@
+# Micro-Interactions: Satisfying Experience
+
+## SATISFYING: Adding Micro-Interactions
+
+### Duration Guidelines
+- **General micro-interactions**: 150-300ms (avoid interrupting flow)
+- **Button presses**: Start within 16ms of click
+- **Standard animations**: 200-500ms
+- **UI motions**: 0.5-2s typically
+- **Rule**: A tenth of a second makes big difference; half second wrong feels jarring
+
+### Basic Effects
+- **Fade**: Smooth opacity transitions
+- **Slide**: Directional movement (left/right/up/down)
+- **Scale**: Size changes (grow/shrink)
+- **Rotate**: Angular transformations
+- Sequential timing with 0.1s delays between elements
+
+### Easing Curves
+Linear motion = robotic. Use easing for natural feel:
+
+**Ease-out** (starts fast, slows down):
+- Best for: Elements entering screen
+- Makes animation feel responsive
+- Allows eye time to focus as element settles
+- Most common for UI micro-interactions
+
+**Ease-in** (starts slow, speeds up):
+- Best for: Elements leaving screen
+- Natural exit motion
+
+**Spring/bounce**:
+- Playful, energetic feel
+- Use sparingly for emphasis
+
+**Cubic-bezier**:
+- Fine-tuned control over motion curves
+- Custom easing for specific needs
+
+### Motion Characteristics
+- Follow real-world physics (objects speed up when starting, slow down when stopping)
+- Subtle curves for micro-interactions
+- Bolder curves for attention-grabbing transitions
+- Always have purpose—guide users or give feedback
+
+### Performance
+- Aim for smooth 60fps
+- Prefer hardware-accelerated properties (transforms, opacity)
+- Avoid fancy effects causing frame drops or battery drain
+- Provide motion-reduced alternatives for accessibility
+
+### Resources
+Study 21st.dev for component animations & subtle effects worth emulating.

package/.cursor/skills/aesthetic/references/storytelling-design.md

@@ -0,0 +1,50 @@
+# Storytelling Design: Peak Experience
+
+## PEAK: Storytelling Through Design
+
+### Narrative Elements
+Elevate designs by incorporating story-driven interactions:
+- **Parallax effects**: Different scroll speeds create depth
+- **Particle systems**: Dynamic, living background elements
+- **Thematic consistency**: Every element reinforces the narrative
+- **Progressive disclosure**: Reveal information as user explores
+
+### Key Principle
+"Too much of anything isn't good"—use restraint. Peak moments should be intentional, not overwhelming.
+
+### Implementation Approaches
+
+**Scroll-Based Storytelling**:
+- Reveal content in meaningful sequences
+- Use scroll position to trigger animations
+- Create depth with parallax layers
+- Build anticipation through pacing
+
+**Interactive Elements**:
+- Hover states that reveal additional context
+- Click interactions that unfold stories
+- Drag interactions that manipulate narrative elements
+- Gesture-based reveals on mobile
+
+**Visual Narrative**:
+- Hero sections that set tone
+- Consistent visual metaphors throughout
+- Imagery that supports the message
+- Typography that reinforces brand personality
+
+### Technical Considerations
+- Ensure storytelling enhances, not hinders, usability
+- Maintain performance (60fps) during narrative elements
+- Provide accessibility alternatives
+- Test across devices & screen sizes
+- Graceful degradation for older browsers
+
+### Inspiration Sources
+Study award-winning sites like:
+- Awwwards.com winners
+- CSS Design Awards
+- FWA (Favourite Website Awards)
+- Brand campaign sites
+
+### Balance
+Strong storytelling + solid functionality = peak experience. Neither should sacrifice the other.

package/.cursor/skills/agent_skills_spec.md

@@ -0,0 +1,55 @@
+# Agent Skills Spec
+
+A skill is a folder of instructions, scripts, and resources that agents can discover and load dynamically to perform better at specific tasks. In order for the folder to be recognized as a skill, it must contain a `SKILL.md` file. 
+
+# Skill Folder Layout
+
+A minimal skill folder looks like this: 
+
+```
+my-skill/
+  - SKILL.md
+```
+
+More complex skills can add additional directories and files as needed.
+
+
+# The SKILL.md file
+
+The skill's "entrypoint" is the `SKILL.md` file. It is the only file required to exist. The file must start with a YAML frontmatter followed by regular Markdown. 
+
+## YAML Frontmatter
+
+The YAML frontmatter has 2 required properties:
+
+- `name`
+    - The name of the skill in hyphen-case
+    - Restricted to lowercase Unicode alphanumeric + hyphen
+    - Must match the name of the directory containing the SKILL.md
+- `description` 
+    - Description of what the skill does and when Claude should use it
+
+There are 3 optional properties:
+
+- `license`
+    - The license applied to the skill
+    - We recommend keeping it short (either the name of a license or the name of a bundled license file)
+- `allowed-tools` 
+    - A list of tools that are pre-approved to run
+    - Currently only supported in Cursor
+- `metadata`
+    - A map from string keys to string values
+    - Clients can use this to store additional properties not defined by the Agent Skills Spec
+    - We recommend making your key names reasonably unique to avoid accidental conflicts
+
+## Markdown Body
+
+The Markdown body has no restrictions on it.
+
+# Additional Information
+
+For a minimal example, see the `template-skill` example.
+
+# Version History
+
+- 1.0 (2025-10-16) Public Launch

package/.cursor/skills/ai-multimodal/.env.example

@@ -0,0 +1,181 @@
+# Google Gemini API Configuration
+
+# ============================================================================
+# OPTION 1: Google AI Studio (Default - Recommended for most users)
+# ============================================================================
+# Get your API key: https://aistudio.google.com/apikey
+GEMINI_API_KEY=your_api_key_here
+
+# ============================================================================
+# OPTION 2: Vertex AI (Google Cloud Platform)
+# ============================================================================
+# Uncomment these lines to use Vertex AI instead of Google AI Studio
+# GEMINI_USE_VERTEX=true
+# VERTEX_PROJECT_ID=your-gcp-project-id
+# VERTEX_LOCATION=us-central1
+
+# ============================================================================
+# Model Selection (Optional)
+# ============================================================================
+# Override default models for specific capabilities
+# If not set, intelligent defaults are used based on task type
+
+# --- Image Generation ---
+# Used by: --task generate (image)
+# Default: imagen-4.0-generate-001
+# Options:
+#   imagen-4.0-generate-001        - Standard quality, balanced (~$0.02/image est.)
+#   imagen-4.0-ultra-generate-001  - Maximum quality (~$0.04/image est.)
+#   imagen-4.0-fast-generate-001   - Fastest generation (~$0.01/image est.)
+#   gemini-3-pro-image-preview     - With conversational editing
+#   gemini-2.5-flash-image         - Legacy (still works)
+# IMAGE_GEN_MODEL=imagen-4.0-generate-001
+
+# --- Video Generation ---
+# Used by: --task generate-video (new capability)
+# Default: veo-3.1-generate-preview
+# Options:
+#   veo-3.1-generate-preview       - Latest, native audio, frame control (preview)
+#   veo-3.1-fast-generate-preview  - Speed-optimized for business (preview)
+#   veo-3.0-generate-001           - Stable, native audio, 8s videos
+#   veo-3.0-fast-generate-001      - Stable fast variant
+# VIDEO_GEN_MODEL=veo-3.1-generate-preview
+
+# --- Multimodal Analysis ---
+# Used by: --task analyze, transcribe, extract
+# Default: gemini-2.5-flash
+# Options:
+#   gemini-3-pro-preview           - Latest, agentic workflows, 1M context
+#   gemini-2.5-flash               - Best price/performance (recommended)
+#   gemini-2.5-pro                 - Highest quality
+# MULTIMODAL_MODEL=gemini-2.5-flash
+
+# --- Legacy Compatibility ---
+# Generic model override (use specific variables above instead)
+# GEMINI_MODEL=gemini-2.5-flash
+# GEMINI_IMAGE_GEN_MODEL=gemini-2.5-flash-image
+
+# ============================================================================
+# Rate Limiting Configuration (Optional)
+# ============================================================================
+# Requests per minute limit (adjust based on your tier)
+# GEMINI_RPM_LIMIT=15
+
+# Tokens per minute limit
+# GEMINI_TPM_LIMIT=4000000
+
+# Requests per day limit
+# GEMINI_RPD_LIMIT=1500
+
+# ============================================================================
+# Video Generation Options (Optional)
+# ============================================================================
+# Video duration in seconds (8s only for now)
+# VEO_DURATION=8
+
+# Video resolution: 720p or 1080p
+# VEO_RESOLUTION=1080p
+
+# Aspect ratio: 16:9, 9:16, 1:1 (16:9 is default)
+# VEO_ASPECT_RATIO=16:9
+
+# Frame rate: 24fps (fixed for now)
+# VEO_FPS=24
+
+# Enable native audio generation
+# VEO_AUDIO=true
+
+# ============================================================================
+# Image Generation Options (Optional)
+# ============================================================================
+# Number of images to generate (1-4)
+# IMAGEN_NUM_IMAGES=1
+
+# Image size: 1K or 2K (Ultra/Standard only)
+# IMAGEN_SIZE=1K
+
+# Aspect ratio: 1:1, 16:9, 9:16, 4:3, 3:4
+# IMAGEN_ASPECT_RATIO=1:1
+
+# Enable person generation (restricted in EEA, CH, UK)
+# IMAGEN_PERSON_GENERATION=true
+
+# Add SynthID watermark (always enabled by default)
+# IMAGEN_WATERMARK=true
+
+# ============================================================================
+# Processing Options (Optional)
+# ============================================================================
+# Video resolution mode: default or low-res
+# low-res uses ~100 tokens/second vs ~300 for default
+# GEMINI_VIDEO_RESOLUTION=default
+
+# Audio quality: default (16 Kbps mono, auto-downsampled)
+# GEMINI_AUDIO_QUALITY=default
+
+# PDF processing mode: inline (<20MB) or file-api (>20MB, automatic)
+# GEMINI_PDF_MODE=auto
+
+# ============================================================================
+# Retry Configuration (Optional)
+# ============================================================================
+# Maximum retry attempts for failed requests
+# GEMINI_MAX_RETRIES=3
+
+# Initial retry delay in seconds (uses exponential backoff)
+# GEMINI_RETRY_DELAY=1
+
+# ============================================================================
+# Output Configuration (Optional)
+# ============================================================================
+# Default output directory for generated images
+# OUTPUT_DIR=./output
+
+# Image output format (png or jpeg)
+# IMAGE_FORMAT=png
+
+# Image quality for JPEG (1-100)
+# IMAGE_QUALITY=95
+
+# ============================================================================
+# Context Caching (Optional)
+# ============================================================================
+# Enable context caching for repeated queries on same file
+# GEMINI_ENABLE_CACHING=true
+
+# Cache TTL in seconds (default: 1800 = 30 minutes)
+# GEMINI_CACHE_TTL=1800
+
+# ============================================================================
+# Logging (Optional)
+# ============================================================================
+# Log level: DEBUG, INFO, WARNING, ERROR, CRITICAL
+# LOG_LEVEL=INFO
+
+# Log file path
+# LOG_FILE=./logs/gemini.log
+
+# ============================================================================
+# Pricing Reference (as of 2025-11)
+# ============================================================================
+# Gemini 2.5 Flash: $1.00/1M input, $0.10/1M output
+# Gemini 2.5 Pro: $3.00/1M input, $12.00/1M output
+# Gemini 3 Pro: $2.00/1M input (<200k), $4.00 (>200k), $12/$18 output
+# Imagen 4: ~$0.01-$0.04 per image (varies by variant)
+# Veo 3: TBD (preview pricing)
+# Monitor: https://ai.google.dev/pricing
+
+# ============================================================================
+# Notes
+# ============================================================================
+# 1. Never commit API keys to version control
+# 2. Add .env to .gitignore
+# 3. API keys can be restricted in Google Cloud Console
+# 4. Monitor usage at: https://aistudio.google.com/apikey
+# 5. Free tier limits: 15 RPM, 1M-4M TPM, 1,500 RPD
+# 6. Vertex AI requires GCP authentication via gcloud CLI
+# 7. New model defaults (Nov 2025):
+#    - Image gen: Imagen 4 (was Flash Image)
+#    - Video gen: Veo 3.1 (new capability)
+#    - Analysis: Gemini 2.5 Flash (unchanged)
+# 8. Preview models (veo-3.1, gemini-3) may have API changes