@techwavedev/agi-agent-kit 1.1.7 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Potentially problematic release.


This version of @techwavedev/agi-agent-kit might be problematic. Click here for more details.

Files changed (111) hide show
  1. package/CHANGELOG.md +82 -1
  2. package/README.md +190 -12
  3. package/bin/init.js +30 -2
  4. package/package.json +6 -3
  5. package/templates/base/AGENTS.md +54 -23
  6. package/templates/base/README.md +325 -0
  7. package/templates/base/directives/memory_integration.md +95 -0
  8. package/templates/base/execution/memory_manager.py +309 -0
  9. package/templates/base/execution/session_boot.py +218 -0
  10. package/templates/base/execution/session_init.py +320 -0
  11. package/templates/base/skill-creator/SKILL_skillcreator.md +23 -36
  12. package/templates/base/skill-creator/scripts/init_skill.py +18 -135
  13. package/templates/skills/ec/README.md +31 -0
  14. package/templates/skills/ec/aws/SKILL.md +1020 -0
  15. package/templates/skills/ec/aws/defaults.yaml +13 -0
  16. package/templates/skills/ec/aws/references/common_patterns.md +80 -0
  17. package/templates/skills/ec/aws/references/mcp_servers.md +98 -0
  18. package/templates/skills/ec/aws-terraform/SKILL.md +349 -0
  19. package/templates/skills/ec/aws-terraform/references/best_practices.md +394 -0
  20. package/templates/skills/ec/aws-terraform/references/checkov_reference.md +337 -0
  21. package/templates/skills/ec/aws-terraform/scripts/configure_mcp.py +150 -0
  22. package/templates/skills/ec/confluent-kafka/SKILL.md +655 -0
  23. package/templates/skills/ec/confluent-kafka/references/ansible_playbooks.md +792 -0
  24. package/templates/skills/ec/confluent-kafka/references/ec_deployment.md +579 -0
  25. package/templates/skills/ec/confluent-kafka/references/kraft_migration.md +490 -0
  26. package/templates/skills/ec/confluent-kafka/references/troubleshooting.md +778 -0
  27. package/templates/skills/ec/confluent-kafka/references/upgrade_7x_to_8x.md +488 -0
  28. package/templates/skills/ec/confluent-kafka/scripts/kafka_health_check.py +435 -0
  29. package/templates/skills/ec/confluent-kafka/scripts/upgrade_preflight.py +568 -0
  30. package/templates/skills/ec/confluent-kafka/scripts/validate_config.py +455 -0
  31. package/templates/skills/ec/consul/SKILL.md +427 -0
  32. package/templates/skills/ec/consul/references/acl_setup.md +168 -0
  33. package/templates/skills/ec/consul/references/ha_config.md +196 -0
  34. package/templates/skills/ec/consul/references/troubleshooting.md +267 -0
  35. package/templates/skills/ec/consul/references/upgrades.md +213 -0
  36. package/templates/skills/ec/consul/scripts/consul_health_report.py +530 -0
  37. package/templates/skills/ec/consul/scripts/consul_status.py +264 -0
  38. package/templates/skills/ec/consul/scripts/generate_values.py +170 -0
  39. package/templates/skills/ec/documentation/SKILL.md +351 -0
  40. package/templates/skills/ec/documentation/references/best_practices.md +201 -0
  41. package/templates/skills/ec/documentation/scripts/analyze_code.py +307 -0
  42. package/templates/skills/ec/documentation/scripts/detect_changes.py +460 -0
  43. package/templates/skills/ec/documentation/scripts/generate_changelog.py +312 -0
  44. package/templates/skills/ec/documentation/scripts/sync_docs.py +272 -0
  45. package/templates/skills/ec/documentation/scripts/update_skill_docs.py +366 -0
  46. package/templates/skills/ec/gitlab/SKILL.md +529 -0
  47. package/templates/skills/ec/gitlab/references/agent_installation.md +416 -0
  48. package/templates/skills/ec/gitlab/references/api_reference.md +508 -0
  49. package/templates/skills/ec/gitlab/references/gitops_flux.md +465 -0
  50. package/templates/skills/ec/gitlab/references/troubleshooting.md +518 -0
  51. package/templates/skills/ec/gitlab/scripts/generate_agent_values.py +329 -0
  52. package/templates/skills/ec/gitlab/scripts/gitlab_agent_status.py +414 -0
  53. package/templates/skills/ec/jira/SKILL.md +484 -0
  54. package/templates/skills/ec/jira/references/jql_reference.md +148 -0
  55. package/templates/skills/ec/jira/scripts/add_comment.py +91 -0
  56. package/templates/skills/ec/jira/scripts/bulk_log_work.py +124 -0
  57. package/templates/skills/ec/jira/scripts/create_ticket.py +162 -0
  58. package/templates/skills/ec/jira/scripts/get_ticket.py +191 -0
  59. package/templates/skills/ec/jira/scripts/jira_client.py +383 -0
  60. package/templates/skills/ec/jira/scripts/log_work.py +154 -0
  61. package/templates/skills/ec/jira/scripts/search_tickets.py +104 -0
  62. package/templates/skills/ec/jira/scripts/update_comment.py +67 -0
  63. package/templates/skills/ec/jira/scripts/update_ticket.py +161 -0
  64. package/templates/skills/ec/karpenter/SKILL.md +301 -0
  65. package/templates/skills/ec/karpenter/references/ec2nodeclasses.md +421 -0
  66. package/templates/skills/ec/karpenter/references/migration.md +396 -0
  67. package/templates/skills/ec/karpenter/references/nodepools.md +400 -0
  68. package/templates/skills/ec/karpenter/references/troubleshooting.md +359 -0
  69. package/templates/skills/ec/karpenter/scripts/generate_ec2nodeclass.py +187 -0
  70. package/templates/skills/ec/karpenter/scripts/generate_nodepool.py +245 -0
  71. package/templates/skills/ec/karpenter/scripts/karpenter_status.py +359 -0
  72. package/templates/skills/ec/opensearch/SKILL.md +720 -0
  73. package/templates/skills/ec/opensearch/references/ml_neural_search.md +576 -0
  74. package/templates/skills/ec/opensearch/references/operator.md +532 -0
  75. package/templates/skills/ec/opensearch/references/query_dsl.md +532 -0
  76. package/templates/skills/ec/opensearch/scripts/configure_mcp.py +148 -0
  77. package/templates/skills/ec/victoriametrics/SKILL.md +598 -0
  78. package/templates/skills/ec/victoriametrics/references/kubernetes.md +531 -0
  79. package/templates/skills/ec/victoriametrics/references/prometheus_migration.md +333 -0
  80. package/templates/skills/ec/victoriametrics/references/troubleshooting.md +442 -0
  81. package/templates/skills/knowledge/SKILLS_CATALOG.md +274 -4
  82. package/templates/skills/knowledge/intelligent-routing/SKILL.md +237 -164
  83. package/templates/skills/knowledge/parallel-agents/SKILL.md +345 -73
  84. package/templates/skills/knowledge/plugin-discovery/SKILL.md +582 -0
  85. package/templates/skills/knowledge/plugin-discovery/scripts/platform_setup.py +1083 -0
  86. package/templates/skills/knowledge/design-md/README.md +0 -34
  87. package/templates/skills/knowledge/design-md/SKILL.md +0 -193
  88. package/templates/skills/knowledge/design-md/examples/DESIGN.md +0 -154
  89. package/templates/skills/knowledge/notebooklm-mcp/SKILL.md +0 -71
  90. package/templates/skills/knowledge/notebooklm-mcp/assets/example_asset.txt +0 -24
  91. package/templates/skills/knowledge/notebooklm-mcp/references/api_reference.md +0 -34
  92. package/templates/skills/knowledge/notebooklm-mcp/scripts/example.py +0 -19
  93. package/templates/skills/knowledge/react-components/README.md +0 -36
  94. package/templates/skills/knowledge/react-components/SKILL.md +0 -53
  95. package/templates/skills/knowledge/react-components/examples/gold-standard-card.tsx +0 -80
  96. package/templates/skills/knowledge/react-components/package-lock.json +0 -231
  97. package/templates/skills/knowledge/react-components/package.json +0 -16
  98. package/templates/skills/knowledge/react-components/resources/architecture-checklist.md +0 -15
  99. package/templates/skills/knowledge/react-components/resources/component-template.tsx +0 -37
  100. package/templates/skills/knowledge/react-components/resources/stitch-api-reference.md +0 -14
  101. package/templates/skills/knowledge/react-components/resources/style-guide.json +0 -27
  102. package/templates/skills/knowledge/react-components/scripts/fetch-stitch.sh +0 -30
  103. package/templates/skills/knowledge/react-components/scripts/validate.js +0 -68
  104. package/templates/skills/knowledge/self-update/SKILL.md +0 -60
  105. package/templates/skills/knowledge/self-update/scripts/update_kit.py +0 -103
  106. package/templates/skills/knowledge/stitch-loop/README.md +0 -54
  107. package/templates/skills/knowledge/stitch-loop/SKILL.md +0 -235
  108. package/templates/skills/knowledge/stitch-loop/examples/SITE.md +0 -73
  109. package/templates/skills/knowledge/stitch-loop/examples/next-prompt.md +0 -25
  110. package/templates/skills/knowledge/stitch-loop/resources/baton-schema.md +0 -61
  111. package/templates/skills/knowledge/stitch-loop/resources/site-template.md +0 -104
@@ -1,34 +0,0 @@
1
- # Stitch Design System Documentation Skill
2
-
3
- ## Install
4
-
5
- ```bash
6
- npx add-skill google-labs-code/stitch-skills --skill design-md --global
7
- ```
8
-
9
- ## Example Prompt
10
-
11
- ```text
12
- Analyze my Furniture Collection project's Home screen and generate a comprehensive DESIGN.md file documenting the design system.
13
- ```
14
-
15
- ## Skill Structure
16
-
17
- This repository follows the **Agent Skills** open standard. Each skill is self-contained with its own logic, workflow, and reference materials.
18
-
19
- ```text
20
- design-md/
21
- ├── SKILL.md — Core instructions & workflow
22
- ├── examples/ — Sample DESIGN.md outputs
23
- └── README.md — This file
24
- ```
25
-
26
- ## How it Works
27
-
28
- When activated, the agent follows a structured design analysis pipeline:
29
-
30
- 1. **Retrieval**: Uses the Stitch MCP Server to fetch project screens, HTML code, and design metadata.
31
- 2. **Extraction**: Identifies design tokens including colors, typography, spacing, and component patterns.
32
- 3. **Translation**: Converts technical CSS/Tailwind values into descriptive, natural design language.
33
- 4. **Synthesis**: Generates a comprehensive DESIGN.md following the semantic design system format.
34
- 5. **Alignment**: Ensures output follows Stitch Effective Prompting Guide principles for optimal screen generation.
@@ -1,193 +0,0 @@
1
- ---
2
- name: design-md
3
- description: Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files
4
- allowed-tools:
5
- - "stitch*:*"
6
- - "Read"
7
- - "Write"
8
- - "web_fetch"
9
- - "qdrant-memory"
10
- ---
11
-
12
- # Stitch DESIGN.md Skill
13
-
14
- You are an expert Design Systems Lead. Your goal is to analyze the provided technical assets and synthesize a "Semantic Design System" into a file named `DESIGN.md`.
15
-
16
- ## Overview
17
-
18
- This skill helps you create `DESIGN.md` files that serve as the "source of truth" for prompting Stitch to generate new screens that align perfectly with existing design language. Stitch interprets design through "Visual Descriptions" supported by specific color values.
19
-
20
- ## Prerequisites
21
-
22
- - Access to the Stitch MCP Server
23
- - A Stitch project with at least one designed screen
24
- - Access to the Stitch Effective Prompting Guide: https://stitch.withgoogle.com/docs/learn/prompting/
25
- - (Optional) Qdrant Memory Skill for storing the design system
26
-
27
- ## The Goal
28
-
29
- The `DESIGN.md` file will serve as the "source of truth" for prompting Stitch to generate new screens that align perfectly with the existing design language. Stitch interprets design through "Visual Descriptions" supported by specific color values.
30
-
31
- ## Retrieval and Networking
32
-
33
- To analyze a Stitch project, you must retrieve screen metadata and design assets using the Stitch MCP Server tools:
34
-
35
- 1. **Namespace discovery**: Run `list_tools` to find the Stitch MCP prefix. Use this prefix (e.g., `mcp_stitch:`) for all subsequent calls.
36
-
37
- 2. **Project lookup** (if Project ID is not provided):
38
- - Call `[prefix]:list_projects` with `filter: "view=owned"` to retrieve all user projects
39
- - Identify the target project by title or URL pattern
40
- - Extract the Project ID from the `name` field (e.g., `projects/13534454087919359824`)
41
-
42
- 3. **Screen lookup** (if Screen ID is not provided):
43
- - Call `[prefix]:list_screens` with the `projectId` (just the numeric ID, not the full path)
44
- - Review screen titles to identify the target screen (e.g., "Home", "Landing Page")
45
- - Extract the Screen ID from the screen's `name` field
46
-
47
- 4. **Metadata fetch**:
48
- - Call `[prefix]:get_screen` with both `projectId` and `screenId` (both as numeric IDs only)
49
- - This returns the complete screen object including:
50
- - `screenshot.downloadUrl` - Visual reference of the design
51
- - `htmlCode.downloadUrl` - Full HTML/CSS source code
52
- - `width`, `height`, `deviceType` - Screen dimensions and target platform
53
- - Project metadata including `designTheme` with color and style information
54
-
55
- 5. **Asset download**:
56
- - Use `web_fetch` or `read_url_content` to download the HTML code from `htmlCode.downloadUrl`
57
- - Optionally download the screenshot from `screenshot.downloadUrl` for visual reference
58
- - Parse the HTML to extract Tailwind classes, custom CSS, and component patterns
59
-
60
- 6. **Project metadata extraction**:
61
- - Call `[prefix]:get_project` with the project `name` (full path: `projects/{id}`) to get:
62
- - `designTheme` object with color mode, fonts, roundness, custom colors
63
- - Project-level design guidelines and descriptions
64
- - Device type preferences and layout principles
65
-
66
- ## Analysis & Synthesis Instructions
67
-
68
- ### 1. Extract Project Identity (JSON)
69
-
70
- - Locate the Project Title
71
- - Locate the specific Project ID (e.g., from the `name` field in the JSON)
72
-
73
- ### 2. Define the Atmosphere (Image/HTML)
74
-
75
- Evaluate the screenshot and HTML structure to capture the overall "vibe." Use evocative adjectives to describe the mood (e.g., "Airy," "Dense," "Minimalist," "Utilitarian").
76
-
77
- ### 3. Map the Color Palette (Tailwind Config/JSON)
78
-
79
- Identify the key colors in the system. For each color, provide:
80
-
81
- - A descriptive, natural language name that conveys its character (e.g., "Deep Muted Teal-Navy")
82
- - The specific hex code in parentheses for precision (e.g., "#294056")
83
- - Its specific functional role (e.g., "Used for primary actions")
84
-
85
- ### 4. Translate Geometry & Shape (CSS/Tailwind)
86
-
87
- Convert technical `border-radius` and layout values into physical descriptions:
88
-
89
- - Describe `rounded-full` as "Pill-shaped"
90
- - Describe `rounded-lg` as "Subtly rounded corners"
91
- - Describe `rounded-none` as "Sharp, squared-off edges"
92
-
93
- ### 5. Describe Depth & Elevation
94
-
95
- Explain how the UI handles layers. Describe the presence and quality of shadows (e.g., "Flat," "Whisper-soft diffused shadows," or "Heavy, high-contrast drop shadows").
96
-
97
- ## Output Guidelines
98
-
99
- - **Language:** Use descriptive design terminology and natural language exclusively
100
- - **Format:** Generate a clean Markdown file following the structure below
101
- - **Precision:** Include exact hex codes for colors while using descriptive names
102
- - **Context:** Explain the "why" behind design decisions, not just the "what"
103
-
104
- ## Output Format (DESIGN.md Structure)
105
-
106
- ```markdown
107
- # Design System: [Project Title]
108
-
109
- **Project ID:** [Insert Project ID Here]
110
-
111
- ## 1. Visual Theme & Atmosphere
112
-
113
- (Description of the mood, density, and aesthetic philosophy.)
114
-
115
- ## 2. Color Palette & Roles
116
-
117
- (List colors by Descriptive Name + Hex Code + Functional Role.)
118
-
119
- ## 3. Typography Rules
120
-
121
- (Description of font family, weight usage for headers vs. body, and letter-spacing character.)
122
-
123
- ## 4. Component Stylings
124
-
125
- - **Buttons:** (Shape description, color assignment, behavior).
126
- - **Cards/Containers:** (Corner roundness description, background color, shadow depth).
127
- - **Inputs/Forms:** (Stroke style, background).
128
-
129
- ## 5. Layout Principles
130
-
131
- (Description of whitespace strategy, margins, and grid alignment.)
132
- ```
133
-
134
- ## Usage Example
135
-
136
- To use this skill for the Furniture Collection project:
137
-
138
- 1. **Retrieve project information:**
139
-
140
- ```
141
- Use the Stitch MCP Server to get the Furniture Collection project
142
- ```
143
-
144
- 2. **Get the Home page screen details:**
145
-
146
- ```
147
- Retrieve the Home page screen's code, image, and screen object information
148
- ```
149
-
150
- 3. **Reference best practices:**
151
-
152
- ```
153
- Review the Stitch Effective Prompting Guide at:
154
- https://stitch.withgoogle.com/docs/learn/prompting/
155
- ```
156
-
157
- 4. **Analyze and synthesize:**
158
- - Extract all relevant design tokens from the screen
159
- - Translate technical values into descriptive language
160
- - Organize information according to the DESIGN.md structure
161
-
162
- 5. **Generate the file:**
163
- - Create `DESIGN.md` in the project directory
164
- - Follow the prescribed format exactly
165
- - Ensure all color codes are accurate
166
- - Use evocative, designer-friendly language
167
-
168
- 6. **Store in Memory (Optional):**
169
- - If **Qdrant Memory Skill** is active, store the design system summary for future retrieval.
170
-
171
- ## Best Practices
172
-
173
- - **Be Descriptive:** Avoid generic terms like "blue" or "rounded." Use "Ocean-deep Cerulean (#0077B6)" or "Gently curved edges"
174
- - **Be Functional:** Always explain what each design element is used for
175
- - **Be Consistent:** Use the same terminology throughout the document
176
- - **Be Visual:** Help readers visualize the design through your descriptions
177
- - **Be Precise:** Include exact values (hex codes, pixel values) in parentheses after natural language descriptions
178
-
179
- ## Tips for Success
180
-
181
- 1. **Start with the big picture:** Understand the overall aesthetic before diving into details
182
- 2. **Look for patterns:** Identify consistent spacing, sizing, and styling patterns
183
- 3. **Think semantically:** Name colors by their purpose, not just their appearance
184
- 4. **Consider hierarchy:** Document how visual weight and importance are communicated
185
- 5. **Reference the guide:** Use language and patterns from the Stitch Effective Prompting Guide
186
-
187
- ## Common Pitfalls to Avoid
188
-
189
- - ❌ Using technical jargon without translation (e.g., "rounded-xl" instead of "generously rounded corners")
190
- - ❌ Omitting color codes or using only descriptive names
191
- - ❌ Forgetting to explain functional roles of design elements
192
- - ❌ Being too vague in atmosphere descriptions
193
- - ❌ Ignoring subtle design details like shadows or spacing patterns
@@ -1,154 +0,0 @@
1
- # Design System: Furniture Collections List
2
- **Project ID:** 13534454087919359824
3
-
4
- ## 1. Visual Theme & Atmosphere
5
-
6
- The Furniture Collections List embodies a **sophisticated, minimalist sanctuary** that marries the pristine simplicity of Scandinavian design with the refined visual language of luxury editorial presentation. The interface feels **spacious and tranquil**, prioritizing breathing room and visual clarity above all else. The design philosophy is gallery-like and photography-first, allowing each furniture piece to command attention as an individual art object.
7
-
8
- The overall mood is **airy yet grounded**, creating an aspirational aesthetic that remains approachable and welcoming. The interface feels **utilitarian in its restraint** but elegant in its execution, with every element serving a clear purpose while maintaining visual sophistication. The atmosphere evokes the serene ambiance of a high-end furniture showroom where customers can browse thoughtfully without visual overwhelm.
9
-
10
- **Key Characteristics:**
11
- - Expansive whitespace creating generous breathing room between elements
12
- - Clean, architectural grid system with structured content blocks
13
- - Photography-first presentation with minimal UI interference
14
- - Whisper-soft visual hierarchy that guides without shouting
15
- - Refined, understated interactive elements
16
- - Professional yet inviting editorial tone
17
-
18
- ## 2. Color Palette & Roles
19
-
20
- ### Primary Foundation
21
- - **Warm Barely-There Cream** (#FCFAFA) – Primary background color. Creates an almost imperceptible warmth that feels more inviting than pure white, serving as the serene canvas for the entire experience.
22
- - **Crisp Very Light Gray** (#F5F5F5) – Secondary surface color used for card backgrounds and content areas. Provides subtle visual separation while maintaining the airy, ethereal quality.
23
-
24
- ### Accent & Interactive
25
- - **Deep Muted Teal-Navy** (#294056) – The sole vibrant accent in the palette. Used exclusively for primary call-to-action buttons (e.g., "Shop Now", "View all products"), active navigation links, selected filter states, and subtle interaction highlights. This sophisticated anchor color creates visual focus points without disrupting the serene neutral foundation.
26
-
27
- ### Typography & Text Hierarchy
28
- - **Charcoal Near-Black** (#2C2C2C) – Primary text color for headlines and product names. Provides strong readable contrast while being softer and more refined than pure black.
29
- - **Soft Warm Gray** (#6B6B6B) – Secondary text used for body copy, product descriptions, and supporting metadata. Creates clear typographic hierarchy without harsh contrast.
30
- - **Ultra-Soft Silver Gray** (#E0E0E0) – Tertiary color for borders, dividers, and subtle structural elements. Creates separation so gentle it's almost imperceptible.
31
-
32
- ### Functional States (Reserved for system feedback)
33
- - **Success Moss** (#10B981) – Stock availability, confirmation states, positive indicators
34
- - **Alert Terracotta** (#EF4444) – Low stock warnings, error states, critical alerts
35
- - **Informational Slate** (#64748B) – Neutral system messages, informational callouts
36
-
37
- ## 3. Typography Rules
38
-
39
- **Primary Font Family:** Manrope
40
- **Character:** Modern, geometric sans-serif with gentle humanist warmth. Slightly rounded letterforms that feel contemporary yet approachable.
41
-
42
- ### Hierarchy & Weights
43
- - **Display Headlines (H1):** Semi-bold weight (600), generous letter-spacing (0.02em for elegance), 2.75-3.5rem size. Used sparingly for hero sections and major page titles.
44
- - **Section Headers (H2):** Semi-bold weight (600), subtle letter-spacing (0.01em), 2-2.5rem size. Establishes clear content zones and featured collections.
45
- - **Subsection Headers (H3):** Medium weight (500), normal letter-spacing, 1.5-1.75rem size. Product names and category labels.
46
- - **Body Text:** Regular weight (400), relaxed line-height (1.7), 1rem size. Descriptions and supporting content prioritize comfortable readability.
47
- - **Small Text/Meta:** Regular weight (400), slightly tighter line-height (1.5), 0.875rem size. Prices, availability, and metadata remain legible but visually recessive.
48
- - **CTA Buttons:** Medium weight (500), subtle letter-spacing (0.01em), 1rem size. Balanced presence without visual aggression.
49
-
50
- ### Spacing Principles
51
- - Headers use slightly expanded letter-spacing for refined elegance
52
- - Body text maintains generous line-height (1.7) for effortless reading
53
- - Consistent vertical rhythm with 2-3rem between related text blocks
54
- - Large margins (4-6rem) between major sections to reinforce spaciousness
55
-
56
- ## 4. Component Stylings
57
-
58
- ### Buttons
59
- - **Shape:** Subtly rounded corners (8px/0.5rem radius) – approachable and modern without appearing playful or childish
60
- - **Primary CTA:** Deep Muted Teal-Navy (#294056) background with pure white text, comfortable padding (0.875rem vertical, 2rem horizontal)
61
- - **Hover State:** Subtle darkening to deeper navy, smooth 250ms ease-in-out transition
62
- - **Focus State:** Soft outer glow in the primary color for keyboard navigation accessibility
63
- - **Secondary CTA (if needed):** Outlined style with Deep Muted Teal-Navy border, transparent background, hover fills with whisper-soft teal tint
64
-
65
- ### Cards & Product Containers
66
- - **Corner Style:** Gently rounded corners (12px/0.75rem radius) creating soft, refined edges
67
- - **Background:** Alternates between Warm Barely-There Cream and Crisp Very Light Gray based on layering needs
68
- - **Shadow Strategy:** Flat by default. On hover, whisper-soft diffused shadow appears (`0 2px 8px rgba(0,0,0,0.06)`) creating subtle depth
69
- - **Border:** Optional hairline border (1px) in Ultra-Soft Silver Gray for delicate definition when shadows aren't present
70
- - **Internal Padding:** Generous 2-2.5rem creating comfortable breathing room for content
71
- - **Image Treatment:** Full-bleed at the top of cards, square or 4:3 ratio, seamless edge-to-edge presentation
72
-
73
- ### Navigation
74
- - **Style:** Clean horizontal layout with generous spacing (2-3rem) between menu items
75
- - **Typography:** Medium weight (500), subtle uppercase, expanded letter-spacing (0.06em) for refined sophistication
76
- - **Default State:** Charcoal Near-Black text
77
- - **Active/Hover State:** Smooth 200ms color transition to Deep Muted Teal-Navy
78
- - **Active Indicator:** Thin underline (2px) in Deep Muted Teal-Navy appearing below current section
79
- - **Mobile:** Converts to elegant hamburger menu with sliding drawer
80
-
81
- ### Inputs & Forms
82
- - **Stroke Style:** Refined 1px border in Soft Warm Gray
83
- - **Background:** Warm Barely-There Cream with transition to Crisp Very Light Gray on focus
84
- - **Corner Style:** Matching button roundness (8px/0.5rem) for visual consistency
85
- - **Focus State:** Border color shifts to Deep Muted Teal-Navy with subtle outer glow
86
- - **Padding:** Comfortable 0.875rem vertical, 1.25rem horizontal for touch-friendly targets
87
- - **Placeholder Text:** Ultra-Soft Silver Gray, elegant and unobtrusive
88
-
89
- ### Product Cards (Specific Pattern)
90
- - **Image Area:** Square (1:1) or landscape (4:3) ratio filling card width completely
91
- - **Content Stack:** Product name (H3), brief descriptor, material/finish, price
92
- - **Price Display:** Emphasized with semi-bold weight (600) in Charcoal Near-Black
93
- - **Hover Behavior:** Gentle lift effect (translateY -4px) combined with enhanced shadow
94
- - **Spacing:** Consistent 1.5rem internal padding below image
95
-
96
- ## 5. Layout Principles
97
-
98
- ### Grid & Structure
99
- - **Max Content Width:** 1440px for optimal readability and visual balance on large displays
100
- - **Grid System:** Responsive 12-column grid with fluid gutters (24px mobile, 32px desktop)
101
- - **Product Grid:** 4 columns on large desktop, 3 on desktop, 2 on tablet, 1 on mobile
102
- - **Breakpoints:**
103
- - Mobile: <768px
104
- - Tablet: 768-1024px
105
- - Desktop: 1024-1440px
106
- - Large Desktop: >1440px
107
-
108
- ### Whitespace Strategy (Critical to the Design)
109
- - **Base Unit:** 8px for micro-spacing, 16px for component spacing
110
- - **Vertical Rhythm:** Consistent 2rem (32px) base unit between related elements
111
- - **Section Margins:** Generous 5-8rem (80-128px) between major sections creating dramatic breathing room
112
- - **Edge Padding:** 1.5rem (24px) mobile, 3rem (48px) tablet/desktop for comfortable framing
113
- - **Hero Sections:** Extra-generous top/bottom padding (8-12rem) for impactful presentation
114
-
115
- ### Alignment & Visual Balance
116
- - **Text Alignment:** Left-aligned for body and navigation (optimal readability), centered for hero headlines and featured content
117
- - **Image to Text Ratio:** Heavily weighted toward imagery (70-30 split) reinforcing photography-first philosophy
118
- - **Asymmetric Balance:** Large hero images offset by compact, refined text blocks
119
- - **Visual Weight Distribution:** Strategic use of whitespace to draw eyes to hero products and primary CTAs
120
- - **Reading Flow:** Clear top-to-bottom, left-to-right pattern with intentional focal points
121
-
122
- ### Responsive Behavior & Touch
123
- - **Mobile-First Foundation:** Core experience designed and perfected for smallest screens first
124
- - **Progressive Enhancement:** Additional columns, imagery, and details added gracefully at larger breakpoints
125
- - **Touch Targets:** Minimum 44x44px for all interactive elements (WCAG AAA compliant)
126
- - **Image Optimization:** Responsive images with appropriate resolutions for each breakpoint, lazy-loading for performance
127
- - **Collapsing Strategy:** Navigation collapses to hamburger, grid reduces columns, padding scales proportionally
128
-
129
- ## 6. Design System Notes for Stitch Generation
130
-
131
- When creating new screens for this project using Stitch, reference these specific instructions:
132
-
133
- ### Language to Use
134
- - **Atmosphere:** "Sophisticated minimalist sanctuary with gallery-like spaciousness"
135
- - **Button Shapes:** "Subtly rounded corners" (not "rounded-md" or "8px")
136
- - **Shadows:** "Whisper-soft diffused shadows on hover" (not "shadow-sm")
137
- - **Spacing:** "Generous breathing room" and "expansive whitespace"
138
-
139
- ### Color References
140
- Always use the descriptive names with hex codes:
141
- - Primary CTA: "Deep Muted Teal-Navy (#294056)"
142
- - Backgrounds: "Warm Barely-There Cream (#FCFAFA)" or "Crisp Very Light Gray (#F5F5F5)"
143
- - Text: "Charcoal Near-Black (#2C2C2C)" or "Soft Warm Gray (#6B6B6B)"
144
-
145
- ### Component Prompts
146
- - "Create a product card with gently rounded corners, full-bleed square product image, and whisper-soft shadow on hover"
147
- - "Design a primary call-to-action button in Deep Muted Teal-Navy (#294056) with subtle rounded corners and comfortable padding"
148
- - "Add a navigation bar with generous spacing between items, using medium-weight Manrope with subtle uppercase and expanded letter-spacing"
149
-
150
- ### Incremental Iteration
151
- When refining existing screens:
152
- 1. Focus on ONE component at a time (e.g., "Update the product grid cards")
153
- 2. Be specific about what to change (e.g., "Increase the internal padding of product cards from 1.5rem to 2rem")
154
- 3. Reference this design system language consistently
@@ -1,71 +0,0 @@
1
- ---
2
- name: notebooklm-mcp
3
- description: "Connects to Google NotebookLM via Model Context Protocol (MCP) to access notebooks, sources, and query content. Triggers when the user asks to summarize, query, or interact with NotebookLM content."
4
- ---
5
-
6
- # NotebookLM MCP Connector
7
-
8
- ## Overview
9
-
10
- This skill allows the agent to interact with Google NotebookLM content through the `notebooklm-mcp-server`. It enables listing notebooks, retrieving sources, and querying the intelligent notebook interface.
11
-
12
- ## Capabilities
13
-
14
- 1. **List Notebooks**: View all your NotebookLM notebooks.
15
- 2. **Mange Sources**: Add or list sources within a notebook.
16
- 3. **Query Content**: Ask questions about the documents in your notebooks.
17
-
18
- ## Setup & Configuration
19
-
20
- ### 1. Installation
21
-
22
- The NotebookLM MCP server is installed via `uv`:
23
-
24
- ```bash
25
- uv tool install notebooklm-mcp-server
26
- ```
27
-
28
- ### 2. Authentication
29
-
30
- Authentication requires extracting cookies from a logged-in Chrome session.
31
-
32
- **Recommended Method (File Mode):**
33
-
34
- 1. Install a cookie exporter extension (e.g., [Get cookies.txt LOCALLY](https://chrome.google.com/webstore/detail/get-cookies-txt-locally/cclelndahbckbenkjhflccgombaodnld)).
35
- 2. Log in to [NotebookLM](https://notebooklm.google.com/).
36
- 3. Export cookies for `notebooklm.google.com` to a file (e.g., `~/cookies.txt`).
37
- 4. Run the auth tool:
38
- ```bash
39
- notebooklm-mcp-auth --file ~/cookies.txt
40
- ```
41
-
42
- **Auto Mode (Requires Chrome Debugging):**
43
-
44
- If Chrome is running with `--remote-debugging-port=9222`, you can run:
45
-
46
- ```bash
47
- notebooklm-mcp-auth
48
- ```
49
-
50
- ### 3. MCP Configuration
51
-
52
- Add the following to your MCP client configuration (e.g., Claude Desktop or OpenCode):
53
-
54
- ```json
55
- {
56
- "mcpServers": {
57
- "notebooklm-mcp-server": {
58
- "command": "uv",
59
- "args": ["tool", "run", "notebooklm-mcp-server"]
60
- }
61
- }
62
- }
63
- ```
64
-
65
- ## Usage
66
-
67
- Use the available MCP tools to interact with NotebookLM.
68
-
69
- - `list_notebooks()`
70
- - `get_notebook(notebook_id)`
71
- - `query_notebook(notebook_id, query)`
@@ -1,24 +0,0 @@
1
- # Example Asset File
2
-
3
- This placeholder represents where asset files would be stored.
4
- Replace with actual asset files (templates, images, fonts, etc.) or delete if not needed.
5
-
6
- Asset files are NOT intended to be loaded into context, but rather used within
7
- the output Claude produces.
8
-
9
- Example asset files from other skills:
10
- - Brand guidelines: logo.png, slides_template.pptx
11
- - Frontend builder: hello-world/ directory with HTML/React boilerplate
12
- - Typography: custom-font.ttf, font-family.woff2
13
- - Data: sample_data.csv, test_dataset.json
14
-
15
- ## Common Asset Types
16
-
17
- - Templates: .pptx, .docx, boilerplate directories
18
- - Images: .png, .jpg, .svg, .gif
19
- - Fonts: .ttf, .otf, .woff, .woff2
20
- - Boilerplate code: Project directories, starter files
21
- - Icons: .ico, .svg
22
- - Data files: .csv, .json, .xml, .yaml
23
-
24
- Note: This is a text placeholder. Actual assets can be any file type.
@@ -1,34 +0,0 @@
1
- # Reference Documentation for Notebooklm Mcp
2
-
3
- This is a placeholder for detailed reference documentation.
4
- Replace with actual reference content or delete if not needed.
5
-
6
- Example real reference docs from other skills:
7
- - product-management/references/communication.md - Comprehensive guide for status updates
8
- - product-management/references/context_building.md - Deep-dive on gathering context
9
- - bigquery/references/ - API references and query examples
10
-
11
- ## When Reference Docs Are Useful
12
-
13
- Reference docs are ideal for:
14
- - Comprehensive API documentation
15
- - Detailed workflow guides
16
- - Complex multi-step processes
17
- - Information too lengthy for main SKILL.md
18
- - Content that's only needed for specific use cases
19
-
20
- ## Structure Suggestions
21
-
22
- ### API Reference Example
23
- - Overview
24
- - Authentication
25
- - Endpoints with examples
26
- - Error codes
27
- - Rate limits
28
-
29
- ### Workflow Guide Example
30
- - Prerequisites
31
- - Step-by-step instructions
32
- - Common patterns
33
- - Troubleshooting
34
- - Best practices
@@ -1,19 +0,0 @@
1
- #!/usr/bin/env python3
2
- """
3
- Example helper script for notebooklm-mcp
4
-
5
- This is a placeholder script that can be executed directly.
6
- Replace with actual implementation or delete if not needed.
7
-
8
- Example real scripts from other skills:
9
- - pdf/scripts/fill_fillable_fields.py - Fills PDF form fields
10
- - pdf/scripts/convert_pdf_to_images.py - Converts PDF pages to images
11
- """
12
-
13
- def main():
14
- print("This is an example script for notebooklm-mcp")
15
- # TODO: Add actual script logic here
16
- # This could be data processing, file conversion, API calls, etc.
17
-
18
- if __name__ == "__main__":
19
- main()
@@ -1,36 +0,0 @@
1
- # Stitch to React Components Skill
2
-
3
- ## Install
4
-
5
- ```bash
6
- npx add-skill google-labs-code/stitch-skills --skill react:components --global
7
- ```
8
-
9
- ## Example Prompt
10
-
11
- ```text
12
- Convert my Landing Page screen in my Podcast Stitch Project to a React component system.
13
- ```
14
-
15
- ## Skill Structure
16
-
17
- This repository follows the **Agent Skills** open standard. Each skill is self-contained with its own logic, validation scripts, and design tokens.
18
-
19
- ```text
20
- skills/react-components/
21
- ├── SKILL.md — Core instructions & workflow
22
- ├── package.json — Validator dependencies
23
- ├── scripts/ — Networking & AST validation
24
- ├── resources/ — Style guides & API references
25
- └── examples/ — Gold-standard code samples
26
- ```
27
-
28
- ## How it Works
29
-
30
- When activated, the agent follows a high-fidelity engineering pipeline:
31
-
32
- 1. **Retrieval**: Uses a system-level `curl` script to bypass TLS/SNI issues on Google Cloud Storage.
33
- 2. **Mapping**: Cross-references Stitch metadata with the local `style-guide.json` to ensure token consistency.
34
- 3. **Generation**: Scaffolds components using a strict Atomic Design pattern.
35
- 4. **Validation**: Runs an automated AST check using `@swc/core` to prevent hardcoded hex values or missing interfaces.
36
- 5. **Audit**: Performs a final self-correction check against a 20-point architecture checklist.
@@ -1,53 +0,0 @@
1
- ---
2
- name: react:components
3
- description: Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation.
4
- allowed-tools:
5
- - "stitch*:*"
6
- - "Bash"
7
- - "Read"
8
- - "Write"
9
- - "web_fetch"
10
- - "qdrant-memory"
11
- ---
12
-
13
- # Stitch to React Components
14
-
15
- You are a frontend engineer focused on transforming designs into clean React code. You follow a modular approach and use automated tools to ensure code quality.
16
-
17
- ## Retrieval and networking
18
-
19
- 1. **Namespace discovery**: Run `list_tools` to find the Stitch MCP prefix. Use this prefix (e.g., `stitch:`) for all subsequent calls.
20
- 2. **Metadata fetch**: Call `[prefix]:get_screen` to retrieve the design JSON.
21
- 3. **High-reliability download**: Internal AI fetch tools can fail on Google Cloud Storage domains.
22
- - Use the `Bash` tool to run: `bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/source.html"`.
23
- - This script handles the necessary redirects and security handshakes.
24
- 4. **Visual audit**: Check `screenshot.downloadUrl` to confirm the design intent and layout details.
25
-
26
- ## Architectural rules
27
-
28
- - **Modular components**: Break the design into independent files. Avoid large, single-file outputs.
29
- - **Logic isolation**: Move event handlers and business logic into custom hooks in `src/hooks/`.
30
- - **Data decoupling**: Move all static text, image URLs, and lists into `src/data/mockData.ts`.
31
- - **Type safety**: Every component must include a `Readonly` TypeScript interface named `[ComponentName]Props`.
32
- - **Project specific**: Focus on the target project's needs and constraints. Leave Google license headers out of the generated React components.
33
- - **Style mapping**:
34
- - Extract the `tailwind.config` from the HTML `<head>`.
35
- - Sync these values with `resources/style-guide.json`.
36
- - Use theme-mapped Tailwind classes instead of arbitrary hex codes.
37
-
38
- ## Execution steps
39
-
40
- 1. **Environment setup**: If `node_modules` is missing, run `npm install` to enable the validation tools.
41
- 2. **Data layer**: Create `src/data/mockData.ts` based on the design content.
42
- 3. **Pattern Retrieval (Optional)**: If **qdrant-memory** is available, search for existing components (`type: "code"`) to reuse patterns or interfaces.
43
- 4. **Component drafting**: Use `resources/component-template.tsx` as a base. Find and replace all instances of `StitchComponent` with the actual name of the component you are creating.
44
- 5. **Application wiring**: Update the project entry point (like `App.tsx`) to render the new components.
45
- 6. **Quality check**:
46
- - Run `npm run validate <file_path>` for each component.
47
- - Verify the final output against the `resources/architecture-checklist.md`.
48
- - Start the dev server with `npm run dev` to verify the live result.
49
-
50
- ## Troubleshooting
51
-
52
- - **Fetch errors**: Ensure the URL is quoted in the bash command to prevent shell errors.
53
- - **Validation errors**: Review the AST report and fix any missing interfaces or hardcoded styles.