@strayl/agent 0.1.10 → 0.1.11

package/skills/frontend-design/SKILL.md

@@ -1,108 +1,108 @@
----
-name: frontend-design
-description: Design and implement distinctive frontend UI for landing pages and web applications. Use when users ask for visual direction, layout, styling, component composition, or UX polish.
----
-
-# Frontend Design
-
-## When to Use
-
-- After scaffolding with `landing-creation` or `web-application-creation`
-- User asks to design, style, polish, or redesign UI
-- User wants new screens/sections (hero, pricing, dashboard, settings, auth pages, etc.)
-- User asks for a specific aesthetic direction (minimal, bold, editorial, brutalist, retro, corporate)
-
-## Workflow
-
-1. **Clarify intent quickly**
-   - Product/site goal and audience
-   - Required screens/sections
-   - Preferred visual direction and color constraints
-
-2. **Define the visual system first**
-   - Typography pair (display + body) — see **Font Guidelines** below
-   - Color tokens via CSS variables
-   - Spacing, radius, shadow, and motion rules
-
-3. **Compose the layout**
-   - For landing pages: nav, hero, proof, features, CTA, footer
-   - For apps: app shell, primary user flow, settings/forms, data states
-   - Add meaningful empty/loading/error states where relevant
-
-4. **Implement pragmatically**
-   - Reuse existing project components before adding new dependencies
-   - Add new UI components only when the current set cannot cover the requirement
-   - Run install commands in background mode and confirm via logs
-
-5. **Validate before handoff**
-   - Check mobile/tablet/desktop behavior
-   - Verify contrast and focus states
-   - Show preview, gather feedback, iterate
-
-## Core Principles
-
-### 1. Universal Frontend Scope
-This skill is not only for landing pages. Apply it to marketing sites, product pages, dashboards, and full web app screens.
-
-### 2. Distinct Visual Direction
-Avoid generic template outputs. Make deliberate choices in typography, spacing rhythm, and layout structure.
-
-### 3. No Forced Component Catalog
-Do not rely on a single external component catalog as a default workflow. Use the project's own design language first.
-
-### 4. Reuse Before Reinventing
-Prefer existing components and tokens; extend them only where needed to keep UI consistent.
-
-### 5. Responsive by Default
-Design for small screens first, then scale up without breaking hierarchy and readability.
-
-## Font Guidelines
-
-**NEVER use the Bitcount font** — it is a Strayl branding font and must not be used in user projects.
-
-**Avoid generic defaults** — Do NOT default to System UI, Inter, Arial, Helvetica, or other overused fonts. Every project deserves a distinctive typographic identity.
-
-**Be creative and intentional** — Pick fonts that match the project's personality and aesthetic direction. Experiment with interesting pairings. Examples of strong choices:
-- **Editorial / luxury**: Playfair Display, Cormorant, Fraunces, Libre Baskerville
-- **Modern / clean**: Space Grotesk, General Sans, Outfit, Plus Jakarta Sans, Sora
-- **Bold / statement**: Clash Display, Cabinet Grotesk, Unbounded, Familjen Grotesk
-- **Geometric**: DM Sans, Manrope, Satoshi, Urbanist
-- **Playful / warm**: Bricolage Grotesque, Instrument Sans, Lora, Crimson Pro
-- **Monospace accent**: JetBrains Mono, Fira Code, IBM Plex Mono, Space Mono
-
-Use Google Fonts CDN or fontsource for font loading. Always pick a display + body pair that complement each other.
-
-## Technical Guidelines
-
-- For simple sites, start with `src/routes/index.tsx`.
-- For app features, edit the route/component relevant to the request.
-- Extract reusable UI into `src/components/`.
-- Keep style tokens centralized in `src/styles.css` and route shell files.
-
-## Image Generation
-
-**Proactively generate images** when the design calls for visual content (hero images, backgrounds, illustrations, icons, product shots). Do NOT use placeholder boxes or Lorem-style image URLs — generate real images instead.
-
-**When to generate:**
-- The user asks to build a page/section that naturally needs imagery (hero, about, features, gallery) and has NOT provided their own images or URLs
-- The design would look incomplete or broken without visual content
-- The user explicitly asks for images or illustrations
-
-**When NOT to generate:**
-- The user provided their own images, URLs, or assets
-- The section works well with icons, gradients, or pure typography (no image needed)
-- The user explicitly said to skip images or use placeholders
-
-**How:**
-- Use `generate_image` — up to 10 images per call, with descriptive prompts and appropriate aspect ratios
-- Write detailed prompts: describe style, mood, colors, subject — not just "hero image"
-- Match aspect ratios to layout: `16:9` for hero banners, `1:1` for cards/avatars, `3:4` for portraits
-- Use `analyze_image` to understand user-provided mockups or screenshots before designing
-
-## Workflow Checklist
-
-- [ ] Confirmed goal, screens, and visual direction
-- [ ] Defined typography and color/token system
-- [ ] Implemented responsive layout and key states
-- [ ] Reused existing components where possible
-- [ ] Previewed and iterated with user feedback
+---
+name: frontend-design
+description: Design and implement distinctive frontend UI for landing pages and web applications. Use when users ask for visual direction, layout, styling, component composition, or UX polish.
+---
+
+# Frontend Design
+
+## When to Use
+
+- After scaffolding with `landing-creation` or `web-application-creation`
+- User asks to design, style, polish, or redesign UI
+- User wants new screens/sections (hero, pricing, dashboard, settings, auth pages, etc.)
+- User asks for a specific aesthetic direction (minimal, bold, editorial, brutalist, retro, corporate)
+
+## Workflow
+
+1. **Clarify intent quickly**
+   - Product/site goal and audience
+   - Required screens/sections
+   - Preferred visual direction and color constraints
+
+2. **Define the visual system first**
+   - Typography pair (display + body) — see **Font Guidelines** below
+   - Color tokens via CSS variables
+   - Spacing, radius, shadow, and motion rules
+
+3. **Compose the layout**
+   - For landing pages: nav, hero, proof, features, CTA, footer
+   - For apps: app shell, primary user flow, settings/forms, data states
+   - Add meaningful empty/loading/error states where relevant
+
+4. **Implement pragmatically**
+   - Reuse existing project components before adding new dependencies
+   - Add new UI components only when the current set cannot cover the requirement
+   - Run install commands in background mode and confirm via logs
+
+5. **Validate before handoff**
+   - Check mobile/tablet/desktop behavior
+   - Verify contrast and focus states
+   - Show preview, gather feedback, iterate
+
+## Core Principles
+
+### 1. Universal Frontend Scope
+This skill is not only for landing pages. Apply it to marketing sites, product pages, dashboards, and full web app screens.
+
+### 2. Distinct Visual Direction
+Avoid generic template outputs. Make deliberate choices in typography, spacing rhythm, and layout structure.
+
+### 3. No Forced Component Catalog
+Do not rely on a single external component catalog as a default workflow. Use the project's own design language first.
+
+### 4. Reuse Before Reinventing
+Prefer existing components and tokens; extend them only where needed to keep UI consistent.
+
+### 5. Responsive by Default
+Design for small screens first, then scale up without breaking hierarchy and readability.
+
+## Font Guidelines
+
+**NEVER use the Bitcount font** — it is a Strayl branding font and must not be used in user projects.
+
+**Avoid generic defaults** — Do NOT default to System UI, Inter, Arial, Helvetica, or other overused fonts. Every project deserves a distinctive typographic identity.
+
+**Be creative and intentional** — Pick fonts that match the project's personality and aesthetic direction. Experiment with interesting pairings. Examples of strong choices:
+- **Editorial / luxury**: Playfair Display, Cormorant, Fraunces, Libre Baskerville
+- **Modern / clean**: Space Grotesk, General Sans, Outfit, Plus Jakarta Sans, Sora
+- **Bold / statement**: Clash Display, Cabinet Grotesk, Unbounded, Familjen Grotesk
+- **Geometric**: DM Sans, Manrope, Satoshi, Urbanist
+- **Playful / warm**: Bricolage Grotesque, Instrument Sans, Lora, Crimson Pro
+- **Monospace accent**: JetBrains Mono, Fira Code, IBM Plex Mono, Space Mono
+
+Use Google Fonts CDN or fontsource for font loading. Always pick a display + body pair that complement each other.
+
+## Technical Guidelines
+
+- For simple sites, start with `src/routes/index.tsx`.
+- For app features, edit the route/component relevant to the request.
+- Extract reusable UI into `src/components/`.
+- Keep style tokens centralized in `src/styles.css` and route shell files.
+
+## Image Generation
+
+**Proactively generate images** when the design calls for visual content (hero images, backgrounds, illustrations, icons, product shots). Do NOT use placeholder boxes or Lorem-style image URLs — generate real images instead.
+
+**When to generate:**
+- The user asks to build a page/section that naturally needs imagery (hero, about, features, gallery) and has NOT provided their own images or URLs
+- The design would look incomplete or broken without visual content
+- The user explicitly asks for images or illustrations
+
+**When NOT to generate:**
+- The user provided their own images, URLs, or assets
+- The section works well with icons, gradients, or pure typography (no image needed)
+- The user explicitly said to skip images or use placeholders
+
+**How:**
+- Use `generate_image` — up to 10 images per call, with descriptive prompts and appropriate aspect ratios
+- Write detailed prompts: describe style, mood, colors, subject — not just "hero image"
+- Match aspect ratios to layout: `16:9` for hero banners, `1:1` for cards/avatars, `3:4` for portraits
+- Use `analyze_image` to understand user-provided mockups or screenshots before designing
+
+## Workflow Checklist
+
+- [ ] Confirmed goal, screens, and visual direction
+- [ ] Defined typography and color/token system
+- [ ] Implemented responsive layout and key states
+- [ ] Reused existing components where possible
+- [ ] Previewed and iterated with user feedback

package/skills/landing-creation/SKILL.md

@@ -1,125 +1,125 @@
----
-name: landing-creation
-description: Initialize a new landing page from the Strayl landing template using npx create-strayl-landing. Use when the user wants a single-page site, landing page, or marketing page — NOT a full web application with multiple routes and complex state.
----
-
-# Landing Page Creation
-
-## When to Use
-
-- User asks to create a landing page, marketing page, or single-page site
-- User says something like "create a site", "make me a landing page", "build a website", "create a homepage"
-- User wants a simple promotional or presentation page (not a multi-page app with forms, auth, dashboards)
-- The workspace repository is empty and the user's request implies a simple site rather than a full application
-
-## When NOT to Use (use `web-application-creation` instead)
-
-- User explicitly asks for a "web app", "application", "dashboard", "admin panel"
-- User needs multiple routes, forms, data handling, state management, i18n
-- User describes features like authentication, CRUD, API integration, database
-- User wants 50+ UI components out of the box
-
-## Workflow
-
-1. **Ask the user for the site name** before running any commands. The name will be used as the project directory name.
-2. **Run the scaffolding command** in the repository root:
-   ```
-   npx -y create-strayl-landing@latest --name {site-name}
-   ```
-3. **Install dependencies:**
-   ```
-   cd {site-name} && npm install
-   ```
-4. **Start the dev server** in background mode:
-   ```
-   cd {site-name} && npm run dev
-   ```
-5. **Check logs** to confirm the server started successfully (look for "ready" or "listening on port").
-6. **Show preview** to the user with `showPreview`.
-
-7. **🔴 REQUIRED: Read and follow the design skill** — After showing preview, you MUST immediately:
-   ```
-   read_file("/skills/frontend-design/SKILL.md")
-   ```
-   Then follow the design skill's workflow to build out the landing page content. Do NOT stop after showing the preview — the scaffolding is just the starting point.
-
-## After Scaffolding
-
-**IMPORTANT:** Scaffolding creates an empty template. Your job is not done after `showPreview`. You MUST continue to the `frontend-design` skill to actually build the landing page content (hero, features, sections, etc.) based on the user's request.
-
-## Template Stack
-
-| Layer | Technology |
-|-------|------------|
-| Framework | React 19.2 + TanStack Start |
-| Bundler | Vite 7.1 |
-| Language | TypeScript 5.7 (strict mode) |
-| Routing | TanStack Router (file-based) |
-| Styling | Tailwind CSS 4.0 + CSS custom properties |
-| UI Components | shadcn/ui (install as needed) |
-| Icons | Lucide React |
-| Theming | next-themes (light/dark + system default) |
-| Fonts | Geist, Geist Mono (Google CDN) |
-| Server | Nitro |
-
-## Project Structure
-
-```
-{site-name}/
-├── public/
-│   ├── favicon.ico
-│   ├── logo-dark.webp
-│   └── logo-light.webp
-├── src/
-│   ├── components/
-│   │   ├── ui/
-│   │   │   └── button.tsx            # Button component (7 variants, 6 sizes)
-│   │   ├── theme-provider.tsx        # Theme provider (light/dark/system)
-│   │   └── themed-logo.tsx           # Theme-aware logo
-│   ├── lib/
-│   │   └── utils.ts                  # cn() — class merging utility
-│   ├── routes/
-│   │   ├── __root.tsx                # Root layout (fonts, meta, ThemeProvider)
-│   │   ├── index.tsx                 # Home page (single landing page)
-│   │   └── routeTree.gen.ts          # Auto-generated route tree
-│   ├── router.tsx                    # Router configuration
-│   └── styles.css                    # Global styles + CSS custom properties
-├── package.json
-├── tsconfig.json
-├── vite.config.ts
-└── components.json                   # shadcn/ui configuration
-```
-
-## Key Features
-
-- **Theming** — Light/dark mode via CSS custom properties. Semantic tokens: `primary`, `secondary`, `accent`, `destructive`, `muted`, `info`, `success`, `warning`. Light background `#f5f5f5`, dark background `#171717`.
-- **Button component** — Simple button with CVA variants (`default`, `destructive`, `outline`, `ghost`, `secondary`, `link`) and sizes (`sm`, `default`, `lg`, `icon`).
-- **Hydration safety** — Components check `mounted` state before rendering theme-dependent UI, preventing SSR mismatches.
-- **Minimal footprint** — Only 3 components (Button, ThemeProvider, ThemedLogo) and a single page. No bloat.
-- **Extensible** — Add new components via `npx shadcn@latest add <component>`. Add pages by creating files in `src/routes/`.
-
-## Default Page Content
-
-The template ships with a single page (`/`) containing:
-- "STRAYL" heading (responsive sizing)
-- "Landing page template" subheading
-- "Get Started" CTA button with themed logo
-- Full-height centered layout
-
-## Architecture
-
-- **Root layout** (`__root.tsx`) — Uses `shellComponent` for HTML shell. Geist fonts via Google Fonts CDN, ThemeProvider wrapper. Same pattern as `web-application-creation` template.
-- **Routing** — File-based via TanStack Router. Files in `src/routes/` become routes automatically.
-- **SSR** — Supported via TanStack React Start + Nitro.
-- **Path alias** — `@/*` maps to `./src/*`.
-- **`cn()`** — Utility combining clsx + tailwind-merge for conflict-free class merging.
-- **Button** — Standard React button component. For link buttons, wrap with an anchor or use Tailwind classes directly.
-
-## Best Practices
-
-- **Do NOT** use `npm create`, `npx create-vite`, or other scaffolding tools. Always use `npx -y create-strayl-landing@latest`.
-- Always use the `--name` flag to specify the site name.
-- After creation, work inside the `{site-name}/` directory for all file edits.
-- Start editing from `src/routes/index.tsx` (the landing page).
-- Add new UI components via `npx shadcn@latest add <component>` rather than installing separate UI libraries.
-- This is a landing page template — keep it simple. For complex multi-page apps, use the `web-application-creation` skill instead.
+---
+name: landing-creation
+description: Initialize a new landing page from the Strayl landing template using npx create-strayl-landing. Use when the user wants a single-page site, landing page, or marketing page — NOT a full web application with multiple routes and complex state.
+---
+
+# Landing Page Creation
+
+## When to Use
+
+- User asks to create a landing page, marketing page, or single-page site
+- User says something like "create a site", "make me a landing page", "build a website", "create a homepage"
+- User wants a simple promotional or presentation page (not a multi-page app with forms, auth, dashboards)
+- The workspace repository is empty and the user's request implies a simple site rather than a full application
+
+## When NOT to Use (use `web-application-creation` instead)
+
+- User explicitly asks for a "web app", "application", "dashboard", "admin panel"
+- User needs multiple routes, forms, data handling, state management, i18n
+- User describes features like authentication, CRUD, API integration, database
+- User wants 50+ UI components out of the box
+
+## Workflow
+
+1. **Ask the user for the site name** before running any commands. The name will be used as the project directory name.
+2. **Run the scaffolding command** in the repository root:
+   ```
+   npx -y create-strayl-landing@latest --name {site-name}
+   ```
+3. **Install dependencies:**
+   ```
+   cd {site-name} && npm install
+   ```
+4. **Start the dev server** in background mode:
+   ```
+   cd {site-name} && npm run dev
+   ```
+5. **Check logs** to confirm the server started successfully (look for "ready" or "listening on port").
+6. **Show preview** to the user with `showPreview`.
+
+7. **🔴 REQUIRED: Read and follow the design skill** — After showing preview, you MUST immediately:
+   ```
+   read_file("/skills/frontend-design/SKILL.md")
+   ```
+   Then follow the design skill's workflow to build out the landing page content. Do NOT stop after showing the preview — the scaffolding is just the starting point.
+
+## After Scaffolding
+
+**IMPORTANT:** Scaffolding creates an empty template. Your job is not done after `showPreview`. You MUST continue to the `frontend-design` skill to actually build the landing page content (hero, features, sections, etc.) based on the user's request.
+
+## Template Stack
+
+| Layer | Technology |
+|-------|------------|
+| Framework | React 19.2 + TanStack Start |
+| Bundler | Vite 7.1 |
+| Language | TypeScript 5.7 (strict mode) |
+| Routing | TanStack Router (file-based) |
+| Styling | Tailwind CSS 4.0 + CSS custom properties |
+| UI Components | shadcn/ui (install as needed) |
+| Icons | Lucide React |
+| Theming | next-themes (light/dark + system default) |
+| Fonts | Geist, Geist Mono (Google CDN) |
+| Server | Nitro |
+
+## Project Structure
+
+```
+{site-name}/
+├── public/
+│   ├── favicon.ico
+│   ├── logo-dark.webp
+│   └── logo-light.webp
+├── src/
+│   ├── components/
+│   │   ├── ui/
+│   │   │   └── button.tsx            # Button component (7 variants, 6 sizes)
+│   │   ├── theme-provider.tsx        # Theme provider (light/dark/system)
+│   │   └── themed-logo.tsx           # Theme-aware logo
+│   ├── lib/
+│   │   └── utils.ts                  # cn() — class merging utility
+│   ├── routes/
+│   │   ├── __root.tsx                # Root layout (fonts, meta, ThemeProvider)
+│   │   ├── index.tsx                 # Home page (single landing page)
+│   │   └── routeTree.gen.ts          # Auto-generated route tree
+│   ├── router.tsx                    # Router configuration
+│   └── styles.css                    # Global styles + CSS custom properties
+├── package.json
+├── tsconfig.json
+├── vite.config.ts
+└── components.json                   # shadcn/ui configuration
+```
+
+## Key Features
+
+- **Theming** — Light/dark mode via CSS custom properties. Semantic tokens: `primary`, `secondary`, `accent`, `destructive`, `muted`, `info`, `success`, `warning`. Light background `#f5f5f5`, dark background `#171717`.
+- **Button component** — Simple button with CVA variants (`default`, `destructive`, `outline`, `ghost`, `secondary`, `link`) and sizes (`sm`, `default`, `lg`, `icon`).
+- **Hydration safety** — Components check `mounted` state before rendering theme-dependent UI, preventing SSR mismatches.
+- **Minimal footprint** — Only 3 components (Button, ThemeProvider, ThemedLogo) and a single page. No bloat.
+- **Extensible** — Add new components via `npx shadcn@latest add <component>`. Add pages by creating files in `src/routes/`.
+
+## Default Page Content
+
+The template ships with a single page (`/`) containing:
+- "STRAYL" heading (responsive sizing)
+- "Landing page template" subheading
+- "Get Started" CTA button with themed logo
+- Full-height centered layout
+
+## Architecture
+
+- **Root layout** (`__root.tsx`) — Uses `shellComponent` for HTML shell. Geist fonts via Google Fonts CDN, ThemeProvider wrapper. Same pattern as `web-application-creation` template.
+- **Routing** — File-based via TanStack Router. Files in `src/routes/` become routes automatically.
+- **SSR** — Supported via TanStack React Start + Nitro.
+- **Path alias** — `@/*` maps to `./src/*`.
+- **`cn()`** — Utility combining clsx + tailwind-merge for conflict-free class merging.
+- **Button** — Standard React button component. For link buttons, wrap with an anchor or use Tailwind classes directly.
+
+## Best Practices
+
+- **Do NOT** use `npm create`, `npx create-vite`, or other scaffolding tools. Always use `npx -y create-strayl-landing@latest`.
+- Always use the `--name` flag to specify the site name.
+- After creation, work inside the `{site-name}/` directory for all file edits.
+- Start editing from `src/routes/index.tsx` (the landing page).
+- Add new UI components via `npx shadcn@latest add <component>` rather than installing separate UI libraries.
+- This is a landing page template — keep it simple. For complex multi-page apps, use the `web-application-creation` skill instead.