anchi-toolkit 1.2.0 → 1.2.1

package/dist/skills/aesthetic/SKILL.md

@@ -0,0 +1,121 @@
+---
+name: aesthetic
+description: Create aesthetically beautiful interfaces following proven design principles. Use when building UI/UX, analyzing designs from inspiration sites, generating design images with ai-multimodal, implementing visual hierarchy and color theory, adding micro-interactions, or creating design documentation. Includes workflows for capturing and analyzing inspiration screenshots with chrome-devtools and ai-multimodal, iterative design image generation until aesthetic standards are met, and comprehensive design system guidance covering BEAUTIFUL (aesthetic principles), RIGHT (functionality/accessibility), SATISFYING (micro-interactions), and PEAK (storytelling) stages. Integrates with chrome-devtools, ai-multimodal, media-processing, ui-styling, and web-frameworks skills.
+---
+
+# Aesthetic
+
+Create aesthetically beautiful interfaces by following proven design principles and systematic workflows.
+
+## When to Use This Skill
+
+Use when:
+- Building or designing user interfaces
+- Analyzing designs from inspiration websites (Dribbble, Mobbin, Behance)
+- Generating design images and evaluating aesthetic quality
+- Implementing visual hierarchy, typography, color theory
+- Adding micro-interactions and animations
+- Creating design documentation and style guides
+- Need guidance on accessibility and design systems
+
+## Core Framework: Four-Stage Approach
+
+### 1. BEAUTIFUL: Understanding Aesthetics
+Study existing designs, identify patterns, extract principles. AI lacks aesthetic sense—standards must come from analyzing high-quality examples and aligning with market tastes.
+
+**Reference**: [`references/design-principles.md`](references/design-principles.md) - Visual hierarchy, typography, color theory, white space principles.
+
+### 2. RIGHT: Ensuring Functionality
+Beautiful designs lacking usability are worthless. Study design systems, component architecture, accessibility requirements.
+
+**Reference**: [`references/design-principles.md`](references/design-principles.md) - Design systems, component libraries, WCAG accessibility standards.
+
+### 3. SATISFYING: Micro-Interactions
+Incorporate subtle animations with appropriate timing (150-300ms), easing curves (ease-out for entry, ease-in for exit), sequential delays.
+
+**Reference**: [`references/micro-interactions.md`](references/micro-interactions.md) - Duration guidelines, easing curves, performance optimization.
+
+### 4. PEAK: Storytelling Through Design
+Elevate with narrative elements—parallax effects, particle systems, thematic consistency. Use restraint: "too much of anything isn't good."
+
+**Reference**: [`references/storytelling-design.md`](references/storytelling-design.md) - Narrative elements, scroll-based storytelling, interactive techniques.
+
+## Workflows
+
+### Workflow 1: Capture & Analyze Inspiration
+
+**Purpose**: Extract design guidelines from inspiration websites.
+
+**Steps**:
+1. Browse inspiration sites (Dribbble, Mobbin, Behance, Awwwards)
+2. Use **chrome-devtools** skill to capture full-screen screenshots (not full page)
+3. Use **ai-multimodal** skill to analyze screenshots and extract:
+   - Design style (Minimalism, Glassmorphism, Neo-brutalism, etc.)
+   - Layout structure & grid systems
+   - Typography system & hierarchy
+     **IMPORTANT:** Try to predict the font name (Google Fonts) and font size in the given screenshot, don't just use Inter or Poppins.
+   - Color palette with hex codes
+   - Visual hierarchy techniques
+   - Component patterns & styling
+   - Micro-interactions
+   - Accessibility considerations
+   - Overall aesthetic quality rating (1-10)
+4. Document findings in project design guidelines using templates
+
+### Workflow 2: Generate & Iterate Design Images
+
+**Purpose**: Create aesthetically pleasing design images through iteration.
+
+**Steps**:
+1. Define design prompt with: style, colors, typography, audience, animation specs
+2. Use **ai-multimodal** skill to generate design images with Gemini API
+3. Use **ai-multimodal** skill to analyze output images and evaluate aesthetic quality
+4. If score < 7/10 or fails professional standards:
+   - Identify specific weaknesses (color, typography, layout, spacing, hierarchy)
+   - Refine prompt with improvements
+   - Regenerate with **ai-multimodal** or use **media-processing** skill to modify outputs (resize, crop, filters, composition)
+5. Repeat until aesthetic standards met (score ≥ 7/10)
+6. Document final design decisions using templates
+
+## Design Documentation
+
+### Create Design Guidelines
+Use [`assets/design-guideline-template.md`](assets/design-guideline-template.md) to document:
+- Color patterns & psychology
+- Typography system & hierarchy
+- Layout principles & spacing
+- Component styling standards
+- Accessibility considerations
+- Design highlights & rationale
+
+Save in project `./docs/design-guideline.md`.
+
+### Create Design Story
+Use [`assets/design-story-template.md`](assets/design-story-template.md) to document:
+- Narrative elements & themes
+- Emotional journey
+- User journey & peak moments
+- Design decision rationale
+
+Save in project `./docs/design-story.md`.
+
+## Resources & Integration
+
+### Related Skills
+- **ai-multimodal**: Analyze documents, screenshots & videos, generate design images, edit generated images, evaluate aesthetic quality using Gemini API
+- **chrome-devtools**: Capture full-screen screenshots from inspiration websites, navigate between pages, interact with elements, read console logs & network requests
+- **media-processing**: Refine generated images (FFmpeg for video, ImageMagick for images)
+- **ui-styling**: Implement designs with shadcn/ui components + Tailwind CSS utility-first styling
+- **web-frameworks**: Build with Next.js (App Router, Server Components, SSR/SSG)
+
+### Reference Documentation
+**References**: [`references/design-resources.md`](references/design-resources.md) - Inspiration platforms, design systems, AI tools, MCP integrations, development strategies.
+
+## Key Principles
+
+1. Aesthetic standards come from humans, not AI—study quality examples
+2. Iterate based on analysis—never settle for first output
+3. Balance beauty with functionality and accessibility
+4. Document decisions for consistency across development
+5. Use progressive disclosure in design—reveal complexity gradually
+6. Always evaluate aesthetic quality objectively (score ≥ 7/10)

package/dist/skills/aesthetic/assets/design-guideline-template.md

@@ -0,0 +1,163 @@
+# Design Guidelines: [Project Name]
+
+_Generated: [Date]_
+
+## Design Style
+
+[Specify: Minimalism, Glassmorphism, Neo-brutalism, Modern, Memphis, Flat Design, etc.]
+
+## Color Palette
+
+### Primary Colors
+- **Primary**: `#000000` - [Description/Usage]
+- **Secondary**: `#000000` - [Description/Usage]
+
+### Accent Colors
+- **Accent**: `#000000` - [Description/Usage]
+- **Success**: `#000000` - [Description/Usage]
+- **Warning**: `#000000` - [Description/Usage]
+- **Error**: `#000000` - [Description/Usage]
+
+### Neutral Colors
+- **Background**: `#000000` - [Description/Usage]
+- **Surface**: `#000000` - [Description/Usage]
+- **Border**: `#000000` - [Description/Usage]
+
+### Color Psychology
+[Explain mood and emotions evoked by color choices]
+
+## Typography System
+
+### Font Families
+- **Primary Font**: [Font Name] - Body text, paragraphs
+- **Secondary Font**: [Font Name] - Headings, emphasis
+- **Monospace Font**: [Font Name] - Code, technical content
+
+### Font Hierarchy
+- **H1**: [Size]px / [Weight] / [Line Height] - [Usage]
+- **H2**: [Size]px / [Weight] / [Line Height] - [Usage]
+- **H3**: [Size]px / [Weight] / [Line Height] - [Usage]
+- **Body**: [Size]px / [Weight] / [Line Height] - [Usage]
+- **Small**: [Size]px / [Weight] / [Line Height] - [Usage]
+
+### Typography Guidelines
+- Line length: [Character count] characters max
+- Paragraph spacing: [Value]
+- Letter spacing: [Value]
+
+## Layout Principles
+
+### Grid System
+- Columns: [Number]
+- Gutter: [Size]px
+- Margin: [Size]px
+- Max width: [Size]px
+
+### Spacing Scale
+- xs: [Size]px
+- sm: [Size]px
+- md: [Size]px
+- lg: [Size]px
+- xl: [Size]px
+- 2xl: [Size]px
+
+### Responsive Breakpoints
+- Mobile: [Width]px
+- Tablet: [Width]px
+- Desktop: [Width]px
+- Wide: [Width]px
+
+## Component Styling
+
+### Buttons
+- **Primary**: [Description of style]
+- **Secondary**: [Description of style]
+- **Ghost**: [Description of style]
+- **Sizes**: [List sizes]
+- **States**: Default, Hover, Active, Disabled
+
+### Cards
+- Border radius: [Value]
+- Shadow: [Value]
+- Padding: [Value]
+- Background: [Color]
+
+### Forms
+- Input height: [Value]
+- Border radius: [Value]
+- Focus state: [Description]
+- Error state: [Description]
+
+### Navigation
+- [Description of nav patterns]
+
+## Visual Hierarchy
+
+### Emphasis Techniques
+- [List how to draw attention: size, color, placement, etc.]
+
+### Content Flow
+- [Describe reading patterns: F-pattern, Z-pattern, etc.]
+
+## Micro-Interactions
+
+### Animation Timing
+- Fast: 150ms - [Usage]
+- Normal: 250ms - [Usage]
+- Slow: 350ms - [Usage]
+
+### Easing Curves
+- Ease-out: [Usage]
+- Ease-in: [Usage]
+- Spring: [Usage]
+
+### Interactive States
+- Hover: [Description]
+- Active: [Description]
+- Focus: [Description]
+- Loading: [Description]
+
+## Accessibility
+
+### Contrast Ratios
+- Text: [Ratio] (WCAG AA: 4.5:1 minimum)
+- Large text: [Ratio] (WCAG AA: 3:1 minimum)
+- UI elements: [Ratio]
+
+### Focus Indicators
+- [Description of focus styles]
+
+### Touch Targets
+- Minimum size: 44x44px
+
+## Design Highlights
+
+### What Works Well
+- [List successful design decisions]
+
+### Unique Elements
+- [List distinctive design features]
+
+### Brand Alignment
+- [Explain how design supports brand identity]
+
+## Implementation Notes
+
+### Technologies
+- [List frameworks, libraries, tools used]
+
+### Performance Considerations
+- [List optimization strategies]
+
+### Browser Support
+- [List supported browsers/versions]
+
+## Resources
+
+### Design Files
+- Figma: [Link]
+- Assets: [Link]
+
+### Related Documentation
+- [Link to design-story.md]
+- [Link to component library]

package/dist/skills/aesthetic/assets/design-story-template.md

@@ -0,0 +1,135 @@
+# Design Story: [Project Name]
+
+_Generated: [Date]_
+
+## Project Context
+
+### Purpose
+[What problem does this design solve?]
+
+### Target Audience
+[Who is this design for?]
+
+### Key Objectives
+1. [Objective 1]
+2. [Objective 2]
+3. [Objective 3]
+
+## Design Narrative
+
+### Core Message
+[What story does this design tell?]
+
+### Emotional Journey
+[What should users feel as they interact?]
+
+### Visual Metaphor
+[What metaphor or theme unifies the design?]
+
+## User Journey
+
+### Entry Point
+**First Impression**: [What users see first]
+**Goal**: [What should users understand immediately]
+**Design Choices**: [How design supports this]
+
+### Exploration Phase
+**User Actions**: [What users do next]
+**Design Response**: [How interface responds]
+**Micro-Interactions**: [Subtle feedback provided]
+
+### Engagement Phase
+**Key Interactions**: [Main user activities]
+**Visual Feedback**: [How design reinforces actions]
+**Storytelling Elements**: [Narrative reinforcement]
+
+### Peak Moment
+**Highlight**: [Most memorable interaction]
+**Implementation**: [How it's achieved technically]
+**Purpose**: [Why this moment matters]
+
+## Thematic Elements
+
+### Visual Theme
+[Description of consistent visual approach]
+
+### Narrative Devices
+- **Parallax**: [How depth is used]
+- **Transitions**: [How sections connect]
+- **Progressive Disclosure**: [How information unfolds]
+- **Motion**: [How animation tells the story]
+
+### Symbolism
+[Meaning behind design choices]
+
+## Design Decisions
+
+### Why This Style?
+[Rationale for design style choice]
+
+### Why These Colors?
+[Reasoning behind color palette]
+
+### Why This Layout?
+[Logic behind structure and flow]
+
+### Why These Interactions?
+[Purpose of micro-interactions chosen]
+
+## Technical Storytelling
+
+### Performance Story
+[How fast loading enhances narrative]
+
+### Responsive Story
+[How design adapts across devices]
+
+### Accessibility Story
+[How inclusive design supports everyone]
+
+## Evolution
+
+### Initial Concepts
+[Early ideas explored]
+
+### Key Iterations
+[Major changes and why]
+
+### Final Direction
+[Ultimate design rationale]
+
+## Inspiration
+
+### Design References
+- [Source 1]: [What inspired]
+- [Source 2]: [What inspired]
+- [Source 3]: [What inspired]
+
+### Cultural Context
+[Broader design trends considered]
+
+## Impact
+
+### Intended Effect
+[What users should take away]
+
+### Success Metrics
+[How to measure if story resonates]
+
+### Future Chapters
+[How design can evolve]
+
+## Reflections
+
+### What Worked
+[Successful narrative elements]
+
+### What We Learned
+[Insights gained from process]
+
+### What's Next
+[Future storytelling opportunities]
+
+---
+
+**Remember**: Every design tells a story. Make it intentional, coherent, and meaningful.

package/dist/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/dist/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/dist/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/dist/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.