bps-kit 1.0.18 → 1.1.0

package/templates/skills_normal/enhance-prompt/SKILL.md

@@ -0,0 +1,204 @@
+---
+name: enhance-prompt
+description: Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better generation results.
+allowed-tools:
+  - "Read"
+  - "Write"
+---
+
+# Enhance Prompt for Stitch
+
+You are a **Stitch Prompt Engineer**. Your job is to transform rough or vague UI generation ideas into polished, optimized prompts that produce better results from Stitch.
+
+## Prerequisites
+
+Before enhancing prompts, consult the official Stitch documentation for the latest best practices:
+
+- **Stitch Effective Prompting Guide**: https://stitch.withgoogle.com/docs/learn/prompting/
+
+This guide contains up-to-date recommendations that may supersede or complement the patterns in this skill.
+
+## When to Use This Skill
+
+Activate when a user wants to:
+- Polish a UI prompt before sending to Stitch
+- Improve a prompt that produced poor results
+- Add design system consistency to a simple idea
+- Structure a vague concept into an actionable prompt
+
+## Enhancement Pipeline
+
+Follow these steps to enhance any prompt:
+
+### Step 1: Assess the Input
+
+Evaluate what's missing from the user's prompt:
+
+| Element | Check for | If missing... |
+|---------|-----------|---------------|
+| **Platform** | "web", "mobile", "desktop" | Add based on context or ask |
+| **Page type** | "landing page", "dashboard", "form" | Infer from description |
+| **Structure** | Numbered sections/components | Create logical page structure |
+| **Visual style** | Adjectives, mood, vibe | Add appropriate descriptors |
+| **Colors** | Specific values or roles | Add design system or suggest |
+| **Components** | UI-specific terms | Translate to proper keywords |
+
+### Step 2: Check for DESIGN.md
+
+Look for a `DESIGN.md` file in the current project:
+
+**If DESIGN.md exists:**
+1. Read the file to extract the design system block
+2. Include the color palette, typography, and component styles
+3. Format as a "DESIGN SYSTEM (REQUIRED)" section in the output
+
+**If DESIGN.md does not exist:**
+1. Add this note at the end of the enhanced prompt:
+
+```
+---
+💡 **Tip:** For consistent designs across multiple screens, create a DESIGN.md 
+file using the `design-md` skill. This ensures all generated pages share the 
+same visual language.
+```
+
+### Step 3: Apply Enhancements
+
+Transform the input using these techniques:
+
+#### A. Add UI/UX Keywords
+
+Replace vague terms with specific component names:
+
+| Vague | Enhanced |
+|-------|----------|
+| "menu at the top" | "navigation bar with logo and menu items" |
+| "button" | "primary call-to-action button" |
+| "list of items" | "card grid layout" or "vertical list with thumbnails" |
+| "form" | "form with labeled input fields and submit button" |
+| "picture area" | "hero section with full-width image" |
+
+#### B. Amplify the Vibe
+
+Add descriptive adjectives to set the mood:
+
+| Basic | Enhanced |
+|-------|----------|
+| "modern" | "clean, minimal, with generous whitespace" |
+| "professional" | "sophisticated, trustworthy, with subtle shadows" |
+| "fun" | "vibrant, playful, with rounded corners and bold colors" |
+| "dark mode" | "dark theme with high-contrast accents on deep backgrounds" |
+
+#### C. Structure the Page
+
+Organize content into numbered sections:
+
+```markdown
+**Page Structure:**
+1. **Header:** Navigation with logo and menu items
+2. **Hero Section:** Headline, subtext, and primary CTA
+3. **Content Area:** [Describe the main content]
+4. **Footer:** Links, social icons, copyright
+```
+
+#### D. Format Colors Properly
+
+When colors are mentioned, format them as:
+```
+Descriptive Name (#hexcode) for functional role
+```
+
+Examples:
+- "Deep Ocean Blue (#1a365d) for primary buttons and links"
+- "Warm Cream (#faf5f0) for page background"
+- "Soft Gray (#6b7280) for secondary text"
+
+### Step 4: Format the Output
+
+Structure the enhanced prompt in this order:
+
+```markdown
+[One-line description of the page purpose and vibe]
+
+**DESIGN SYSTEM (REQUIRED):**
+- Platform: [Web/Mobile], [Desktop/Mobile]-first
+- Theme: [Light/Dark], [style descriptors]
+- Background: [Color description] (#hex)
+- Primary Accent: [Color description] (#hex) for [role]
+- Text Primary: [Color description] (#hex)
+- [Additional design tokens...]
+
+**Page Structure:**
+1. **[Section]:** [Description]
+2. **[Section]:** [Description]
+...
+```
+
+## Output Options
+
+**Default:** Return the enhanced prompt as text for the user to copy.
+
+**Optional file output:** If the user requests, write to a file:
+- `next-prompt.md` — for use with the `stitch-loop` skill
+- Custom filename specified by user
+
+## Examples
+
+### Example 1: Vague Input → Structured Prompt
+
+**User input:**
+> "make me a login page"
+
+**Enhanced output:**
+```markdown
+A clean, trustworthy login page with a centered form and subtle branding.
+
+**DESIGN SYSTEM (REQUIRED):**
+- Platform: Web, Desktop-first
+- Theme: Light, minimal, professional
+- Background: Clean White (#ffffff)
+- Surface: Soft Gray (#f9fafb) for form card
+- Primary Accent: Deep Blue (#2563eb) for submit button and links
+- Text Primary: Near Black (#111827) for headings
+- Text Secondary: Medium Gray (#6b7280) for labels
+- Buttons: Subtly rounded (8px), full-width on form
+- Cards: Gently rounded (12px), soft shadow for elevation
+
+**Page Structure:**
+1. **Header:** Minimal logo, centered
+2. **Login Card:** Centered form with email, password fields, "Forgot password?" link
+3. **Submit Button:** Primary blue "Sign In" button
+4. **Footer:** "Don't have an account? Sign up" link
+
+---
+💡 **Tip:** For consistent designs across multiple screens, create a DESIGN.md 
+file using the `design-md` skill.
+```
+
+### Example 2: Feature Request → Targeted Edit
+
+**User input:**
+> "add a search bar"
+
+**Enhanced output:**
+```markdown
+Add a search bar to the header navigation.
+
+**Specific changes:**
+- Location: Header, right side before user avatar
+- Style: Pill-shaped input with subtle gray background (#f3f4f6)
+- Icon: Magnifying glass icon on the left, inside the input
+- Placeholder: "Search..." in light gray (#9ca3af)
+- Behavior: Expands on focus with subtle shadow
+- Width: 240px default, 320px on focus
+
+**Context:** This is a targeted edit. Make only this change while preserving all existing elements.
+```
+
+## Tips for Best Results
+
+1. **Be specific early** — Vague inputs need more enhancement
+2. **Match the user's intent** — Don't over-design if they want simple
+3. **Keep it structured** — Numbered sections help Stitch understand hierarchy
+4. **Include the design system** — Consistency is key for multi-page projects
+5. **One change at a time for edits** — Don't bundle unrelated changes

package/templates/skills_normal/enhance-prompt/references/KEYWORDS.md

@@ -0,0 +1,114 @@
+# UI/UX Keywords Reference
+
+Progressive disclosure reference for common UI terminology and adjective palettes.
+
+## Component Keywords
+
+### Navigation
+- navigation bar, nav menu, header
+- breadcrumbs, tabs, sidebar
+- hamburger menu, dropdown menu
+- back button, close button
+
+### Content Containers
+- hero section, hero banner
+- card, card grid, tile
+- modal, dialog, popup
+- accordion, collapsible section
+- carousel, slider
+
+### Forms
+- input field, text input
+- dropdown, select menu
+- checkbox, radio button
+- toggle switch
+- date picker, time picker
+- search bar, search input
+- submit button, form actions
+
+### Calls to Action
+- primary button, secondary button
+- ghost button, text link
+- floating action button (FAB)
+- icon button
+
+### Feedback
+- toast notification, snackbar
+- alert banner, warning message
+- loading spinner, skeleton loader
+- progress bar, step indicator
+
+### Layout
+- grid layout, flexbox
+- sidebar layout, split view
+- sticky header, fixed footer
+- full-width, contained width
+- centered content, max-width container
+
+## Adjective Palettes
+
+### Minimal / Clean
+- minimal, clean, uncluttered
+- generous whitespace, breathing room
+- subtle, understated, refined
+- simple, focused, distraction-free
+
+### Professional / Corporate
+- sophisticated, polished, trustworthy
+- corporate, business-like, formal
+- subtle shadows, clean lines
+- structured, organized, hierarchical
+
+### Playful / Fun
+- vibrant, colorful, energetic
+- rounded corners, soft edges
+- bold, expressive, dynamic
+- friendly, approachable, warm
+
+### Premium / Luxury
+- elegant, luxurious, high-end
+- dramatic, bold contrasts
+- sleek, modern, cutting-edge
+- exclusive, boutique, curated
+
+### Dark Mode
+- dark theme, night mode
+- high-contrast accents
+- soft glows, subtle highlights
+- deep backgrounds, muted surfaces
+
+### Organic / Natural
+- earthy tones, natural colors
+- warm, inviting, cozy
+- textured, tactile, handcrafted
+- flowing, organic shapes
+
+## Color Role Terminology
+
+### Backgrounds
+- page background, canvas
+- surface color, card background
+- overlay, scrim
+
+### Text
+- primary text, heading color
+- secondary text, body copy
+- muted text, placeholder
+- inverse text (on dark backgrounds)
+
+### Accents
+- primary accent, brand color
+- secondary accent, highlight
+- success, error, warning colors
+- hover state, active state
+
+## Shape Descriptions
+
+| Technical | Natural Language |
+|-----------|------------------|
+| `rounded-none` | sharp, squared-off edges |
+| `rounded-sm` | slightly softened corners |
+| `rounded-md` | gently rounded corners |
+| `rounded-lg` | generously rounded corners |
+| `rounded-xl` | very rounded, pillow-like |
+| `rounded-full` | pill-shaped, circular |

package/templates/skills_normal/react-components/README.md

@@ -0,0 +1,36 @@
+# Stitch to React Components Skill
+
+## Install
+
+```bash
+npx skills add google-labs-code/stitch-skills --skill react:components --global
+```
+
+## Example Prompt
+
+```text
+Convert my Landing Page screen in my Podcast Stitch Project to a React component system.
+```
+
+## Skill Structure
+
+This repository follows the **Agent Skills** open standard. Each skill is self-contained with its own logic, validation scripts, and design tokens.
+
+```text
+skills/react-components/
+├── SKILL.md           — Core instructions & workflow
+├── package.json       — Validator dependencies
+├── scripts/           — Networking & AST validation
+├── resources/         — Style guides & API references
+└── examples/          — Gold-standard code samples
+```
+
+## How it Works
+
+When activated, the agent follows a high-fidelity engineering pipeline:
+
+1. **Retrieval**: Uses a system-level `curl` script to bypass TLS/SNI issues on Google Cloud Storage.
+2. **Mapping**: Cross-references Stitch metadata with the local `style-guide.json` to ensure token consistency.
+3. **Generation**: Scaffolds components using a strict Atomic Design pattern.
+4. **Validation**: Runs an automated AST check using `@swc/core` to prevent hardcoded hex values or missing interfaces.
+5. **Audit**: Performs a final self-correction check against a 20-point architecture checklist.

package/templates/skills_normal/react-components/SKILL.md

@@ -0,0 +1,47 @@
+---
+name: react:components
+description: Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation.
+allowed-tools:
+  - "stitch*:*"
+  - "Bash"
+  - "Read"
+  - "Write"
+  - "web_fetch"
+---
+
+# Stitch to React Components
+
+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.
+
+## Retrieval and networking
+1. **Namespace discovery**: Run `list_tools` to find the Stitch MCP prefix. Use this prefix (e.g., `stitch:`) for all subsequent calls.
+2. **Metadata fetch**: Call `[prefix]:get_screen` to retrieve the design JSON.
+3. **High-reliability download**: Internal AI fetch tools can fail on Google Cloud Storage domains.
+   - Use the `Bash` tool to run: `bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/source.html"`.
+   - This script handles the necessary redirects and security handshakes.
+4. **Visual audit**: Check `screenshot.downloadUrl` to confirm the design intent and layout details.
+
+## Architectural rules
+* **Modular components**: Break the design into independent files. Avoid large, single-file outputs.
+* **Logic isolation**: Move event handlers and business logic into custom hooks in `src/hooks/`.
+* **Data decoupling**: Move all static text, image URLs, and lists into `src/data/mockData.ts`.
+* **Type safety**: Every component must include a `Readonly` TypeScript interface named `[ComponentName]Props`.
+* **Project specific**: Focus on the target project's needs and constraints. Leave Google license headers out of the generated React components.
+* **Style mapping**:
+    * Extract the `tailwind.config` from the HTML `<head>`.
+    * Sync these values with `resources/style-guide.json`.
+    * Use theme-mapped Tailwind classes instead of arbitrary hex codes.
+
+## Execution steps
+1. **Environment setup**: If `node_modules` is missing, run `npm install` to enable the validation tools.
+2. **Data layer**: Create `src/data/mockData.ts` based on the design content.
+3. **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.
+4. **Application wiring**: Update the project entry point (like `App.tsx`) to render the new components.
+5. **Quality check**:
+    * Run `npm run validate <file_path>` for each component.
+    * Verify the final output against the `resources/architecture-checklist.md`.
+    * Start the dev server with `npm run dev` to verify the live result.
+
+## Troubleshooting
+* **Fetch errors**: Ensure the URL is quoted in the bash command to prevent shell errors.
+* **Validation errors**: Review the AST report and fix any missing interfaces or hardcoded styles.

package/templates/skills_normal/react-components/examples/gold-standard-card.tsx

@@ -0,0 +1,80 @@
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+// Note for Agent: The '@' alias refers to the target project's src directory.
+// Ensure src/data/mockData.ts is created before generating this component.
+import { cardData } from '../data/mockData';
+
+/**
+ * Gold Standard: ActivityCard
+ * This file serves as the definitive reference for the agent.
+ */
+interface ActivityCardProps {
+  readonly id: string;
+  readonly username: string;
+  readonly action: 'MERGED' | 'COMMIT';
+  readonly timestamp: string;
+  readonly avatarUrl: string;
+  readonly repoName: string;
+}
+
+export const ActivityCard: React.FC<ActivityCardProps> = ({
+  username,
+  action,
+  timestamp,
+  avatarUrl,
+  repoName,
+}) => {
+  const isMerged = action === 'MERGED';
+
+  return (
+    <div className="flex items-center justify-between gap-4 rounded-lg bg-surface-dark p-4 min-h-14 shadow-sm ring-1 ring-white/10">
+      <div className="flex items-center gap-4 overflow-hidden">
+        <div
+          className="aspect-square h-10 w-10 flex-shrink-0 rounded-full bg-cover bg-center bg-no-repeat"
+          style={{ backgroundImage: `url(${avatarUrl})` }}
+          aria-label={`Avatar for ${username}`}
+        />
+
+        <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm sm:text-base">
+          <a href="#" className="font-semibold text-primary hover:underline truncate">
+            {username}
+          </a>
+
+          <span className={`inline-block px-2 py-0.5 text-xs font-semibold rounded-full ${isMerged ? 'bg-purple-500/30 text-purple-300' : 'bg-primary/30 text-primary'
+            }`}>
+            {action}
+          </span>
+
+          <span className="text-white/60">in</span>
+
+          <a href="#" className="text-primary hover:underline truncate">
+            {repoName}
+          </a>
+        </div>
+      </div>
+
+      <div className="shrink-0">
+        <p className="text-sm font-normal leading-normal text-white/50">
+          {timestamp}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default ActivityCard;