@jini-ai/agent-plugins 0.6.15-rc.2 → 0.6.16

package/ui-ux-design/skills/interface-design/references/commands/extract.md

@@ -1,34 +0,0 @@
-# interface-design:extract
-
-Extract a design system from existing UI code.
-
-## What to Look For
-
-- repeated spacing values
-- repeated radius values
-- common button sizes and padding
-- repeated card treatment
-- depth strategy, especially borders vs shadows
-
-## Output Shape
-
-```text
-Extracted patterns:
-
-Spacing:
-  Base: 4px
-  Scale: 4, 8, 12, 16, 24, 32
-
-Depth: Borders-only
-
-Patterns:
-  Button: 36px h, 12px 16px pad, 6px radius
-  Card: 1px border, 16px pad
-```
-
-## Workflow
-
-1. Scan UI files.
-2. Aggregate repeated values and component patterns.
-3. Propose a system that matches the dominant pattern set.
-4. Let the user customize before saving.

package/ui-ux-design/skills/interface-design/references/commands/init.md

@@ -1,31 +0,0 @@
-# interface-design:init
-
-Build UI with a craft-first system instead of ad hoc component choices.
-
-## Workflow
-
-1. Read `SKILL.md`.
-2. Check whether `.interface-design/system.md` already exists.
-3. If it exists, apply the existing direction and patterns.
-4. If it does not exist, infer a direction from the product context and ask for confirmation before locking it in.
-5. Build the UI using the chosen direction.
-6. Offer to save any stable decisions into `.interface-design/system.md`.
-
-## Before Building Each Component
-
-State the intent and the technical approach before writing code:
-
-- who the human is
-- what they need to accomplish
-- what the screen should feel like
-- palette choice and why it fits
-- depth choice and why it fits
-- surfaces and why they fit
-- typography and why it fits
-- spacing base
-
-## Guardrails
-
-- Do not default to generic UI if the product has a distinct world or tone.
-- Do not skip the system decision step when repeated UI work is likely.
-- Do not narrate internal process to the user unless they need the design decision explained.

package/ui-ux-design/skills/interface-design/references/commands/status.md

@@ -1,22 +0,0 @@
-# interface-design:status
-
-Show the current design system state.
-
-## If a System Exists
-
-Display:
-
-- direction
-- foundation
-- depth
-- spacing base and scale
-- color token count
-- core component patterns
-- last updated timestamp
-
-## If No System Exists
-
-State that no design system is present yet and suggest:
-
-- build a screen to establish patterns
-- run `interface-design:extract` on existing code

package/ui-ux-design/skills/interface-design/references/examples/system-precision.md

@@ -1,29 +0,0 @@
-# Design System Example - Precision & Density
-
-Use this when the interface is a dense dashboard, admin panel, or technical tool.
-
-## Direction
-
-**Personality:** Precision & Density
-**Foundation:** Cool
-**Depth:** Borders-only
-
-## Tokens
-
-- Spacing base: 4px
-- Radius scale: 4px, 6px, 8px
-- Font: system-ui or Geist
-- Scale: 11, 12, 13, 14, 16, 18
-- Weights: 400, 500, 600
-
-## Patterns
-
-- Button: 32px height, compact padding, 4px radius, border-first
-- Card: faint border, 12px padding, 6px radius, no shadow
-- Table cell: 8px 12px padding, tabular numbers
-
-## Decision Bias
-
-- Prefer information density over decorative lift.
-- Prefer borders and tonal separation over heavy shadows.
-- Use compact sizing for power-user workflows.

package/ui-ux-design/skills/interface-design/references/examples/system-warmth.md

@@ -1,29 +0,0 @@
-# Design System Example - Warmth & Approachability
-
-Use this when the interface should feel friendly, collaborative, or consumer-oriented.
-
-## Direction
-
-**Personality:** Warmth & Approachability
-**Foundation:** Warm
-**Depth:** Subtle shadows
-
-## Tokens
-
-- Spacing base: 4px
-- Radius scale: 8px, 12px, 16px
-- Font: Inter or another approachable UI face
-- Scale: 13, 14, 15, 16, 18, 20, 24
-- Weights: 400, 500, 600
-
-## Patterns
-
-- Button: 40px height, comfortable padding, 8px radius
-- Card: soft shadow, 20px padding, rounded corners
-- Input: 44px height, generous padding, visible focus state
-
-## Decision Bias
-
-- Prefer soft depth and generous whitespace.
-- Prefer readable, inviting surfaces over technical density.
-- Use this when the product benefits from calm and friendliness.

package/ui-ux-design/skills/interface-design/references/system-template.md

@@ -1,57 +0,0 @@
-# Design System Template
-
-Use this as the starting shape for `.interface-design/system.md`.
-
-## Direction
-
-**Personality:** [Precision & Density | Warmth & Approachability | Sophistication & Trust | Boldness & Clarity | Utility & Function | Data & Analysis]
-
-**Foundation:** [warm | cool | neutral | tinted]
-
-**Depth:** [borders-only | subtle-shadows | layered-shadows]
-
-## Tokens
-
-### Spacing
-Base: [4px | 8px]
-Scale: [4, 8, 12, 16, 24, 32, 64]
-
-### Colors
-```css
---foreground: [slate-900]
---secondary: [slate-600]
---muted: [slate-400]
---faint: [slate-200]
---accent: [blue-600]
-```
-
-### Radius
-Scale: [4px, 6px, 8px] (sharp) or [8px, 12px, 16px] (soft)
-
-### Typography
-Font: [system | Inter | Geist]
-Scale: 12, 13, 14 (base), 16, 18, 24, 32
-Weights: 400, 500, 600
-
-## Patterns
-
-### Button Primary
-- Height: 36px
-- Padding: 12px 16px
-- Radius: 6px
-- Font: 14px, 500 weight
-- Usage: primary actions
-
-### Card Default
-- Border: 0.5px solid (faint)
-- Padding: 16px
-- Radius: 8px
-- Background: white
-- Usage: content containers
-
-## Decisions
-
-| Decision | Rationale | Date |
-|---|---|---|
-| Borders-only depth | Dashboard tool, users want density. Shadows add visual weight without information value. | YYYY-MM-DD |
-| 4px spacing base | Tight enough for data tables, divisible by common UI sizes | YYYY-MM-DD |

package/ui-ux-design/skills/shadcn-ui/README.md

@@ -1,244 +0,0 @@
-# shadcn/ui Integration Skill
-
-## Install
-
-```bash
-npx skills add google-labs-code/stitch-skills --skill shadcn-ui --global
-```
-
-## What It Does
-
-This skill provides expert guidance for integrating shadcn/ui components into your React applications. It helps you discover, install, customize, and optimize shadcn/ui components while following best practices.
-
-## Example Prompts
-
-```text
-Help me set up shadcn/ui in my Next.js project
-
-Add a data table component with sorting and filtering to my app
-
-Show me how to customize the button component with a new variant
-
-Create a login form using shadcn/ui components with validation
-
-Build a dashboard layout with sidebar navigation using shadcn/ui blocks
-```
-
-## What is shadcn/ui?
-
-shadcn/ui is a collection of beautifully designed, accessible, and customizable components built with:
-- **Radix UI or Base UI**: Unstyled, accessible component primitives
-- **Tailwind CSS**: Utility-first styling framework
-- **TypeScript**: Full type safety
-
-**Key Difference**: Unlike traditional component libraries, shadcn/ui copies components directly into your project. This gives you:
-- Full control over the code
-- No version lock-in
-- Complete customization freedom
-- Zero runtime overhead
-
-## Skill Structure
-
-```text
-skills/shadcn-ui/
-├── SKILL.md              — Core instructions & workflow
-├── README.md             — This file
-├── examples/             — Example implementations
-│   ├── form-pattern.tsx       — Form with validation
-│   ├── data-table.tsx         — Advanced table with sorting
-│   └── auth-layout.tsx        — Authentication flow
-├── resources/            — Reference documentation
-│   ├── setup-guide.md         — Project initialization
-│   ├── component-catalog.md   — Component reference
-│   ├── customization-guide.md — Theming patterns
-│   └── migration-guide.md     — Migration from other libraries
-└── scripts/              — Utility scripts
-    └── verify-setup.sh        — Validate project configuration
-```
-
-## How It Works
-
-When activated, the agent follows this workflow:
-
-### 1. **Discovery & Planning**
-- Lists available components using shadcn MCP tools
-- Identifies required dependencies
-- Plans component composition strategy
-
-### 2. **Setup & Configuration**
-- Verifies or initializes `components.json`
-- Checks Tailwind CSS configuration
-- Validates import aliases and paths
-
-### 3. **Component Integration**
-- Retrieves component source code
-- Installs via CLI or manual integration
-- Handles dependency installation
-
-### 4. **Customization**
-- Applies theme customization
-- Creates component variants
-- Extends components with custom logic
-
-### 5. **Quality Assurance**
-- Validates TypeScript types
-- Checks accessibility compliance
-- Verifies responsive behavior
-
-## Prerequisites
-
-Your project should have:
-- **React 18+**
-- **Tailwind CSS 3.0+**
-- **TypeScript** (recommended)
-- **Node.js 18+**
-
-## Quick Start
-
-### For New Projects
-
-```bash
-# Create Next.js project with shadcn/ui
-npx create-next-app@latest my-app
-cd my-app
-npx shadcn@latest init
-
-# Add components
-npx shadcn@latest add button
-npx shadcn@latest add card
-```
-
-### For Existing Projects
-
-```bash
-# Initialize shadcn/ui
-npx shadcn@latest init
-
-# Configure when prompted:
-# - Choose style (default/new-york)
-# - Select base color
-# - Configure CSS variables
-# - Set import aliases
-
-# Add your first component
-npx shadcn@latest add button
-```
-
-## Available Components
-
-shadcn/ui provides 50+ components including:
-
-**Layout**: Accordion, Card, Separator, Tabs, Collapsible  
-**Forms**: Button, Input, Label, Checkbox, Radio Group, Select, Textarea  
-**Data Display**: Table, Badge, Avatar, Progress, Skeleton  
-**Overlays**: Dialog, Sheet, Popover, Tooltip, Dropdown Menu  
-**Navigation**: Navigation Menu, Tabs, Breadcrumb, Pagination  
-**Feedback**: Alert, Alert Dialog, Toast, Command  
-
-Plus complete **Blocks** like:
-- Authentication forms
-- Dashboard layouts
-- Calendar interfaces
-- Sidebar navigation
-- E-commerce components
-
-## Customization Approach
-
-### Theme-Level Customization
-Modify CSS variables in `globals.css`:
-```css
-:root {
-  --primary: 221.2 83.2% 53.3%;
-  --secondary: 210 40% 96.1%;
-  /* ... */
-}
-```
-
-### Component-Level Customization
-Components use `class-variance-authority` for variants:
-```typescript
-const buttonVariants = cva(
-  "base-classes",
-  {
-    variants: {
-      variant: { default: "...", destructive: "..." },
-      size: { default: "...", sm: "..." },
-    }
-  }
-)
-```
-
-### Composition
-Create higher-level components:
-```typescript
-// Compose existing components
-export function FeatureCard({ title, description, icon }) {
-  return (
-    <Card>
-      <CardHeader>
-        {icon}
-        <CardTitle>{title}</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <p>{description}</p>
-      </CardContent>
-    </Card>
-  )
-}
-```
-
-## Integration with MCP Tools
-
-This skill leverages shadcn MCP server capabilities:
-
-- `list_components` - Browse component catalog
-- `get_component` - Retrieve component source
-- `get_component_metadata` - View props and dependencies
-- `get_component_demo` - See usage examples
-- `list_blocks` - Browse UI blocks
-- `get_block` - Retrieve block source with all files
-- `search_items_in_registries` - Find components in custom registries
-
-## Best Practices
-
-1. **Keep `ui/` pure**: Don't modify components in `components/ui/` directly
-2. **Compose, don't fork**: Create wrapper components instead of editing originals
-3. **Use the CLI**: Let `shadcn add` handle dependencies and updates
-4. **Maintain consistency**: Use the `cn()` utility for all class merging
-5. **Respect accessibility**: Preserve ARIA attributes and keyboard handlers
-6. **Test responsiveness**: shadcn components are responsive by default—keep it that way
-
-## Troubleshooting
-
-### "Module not found" errors
-Check your `tsconfig.json` includes path aliases:
-```json
-{
-  "compilerOptions": {
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  }
-}
-```
-
-### Styles not applying
-- Import `globals.css` in your root layout
-- Verify Tailwind config includes component paths
-- Check CSS variable definitions match component expectations
-
-### TypeScript errors
-- Ensure all Radix UI peer dependencies are installed
-- Run `npm install` after adding components via CLI
-- Check that React types are up to date
-
-## Further Reading
-
-- [Official Documentation](https://ui.shadcn.com)
-- [Component Source](https://github.com/shadcn-ui/ui)
-- [Radix UI Docs](https://www.radix-ui.com)
-- [Tailwind CSS Docs](https://tailwindcss.com)
-
-## Notes
-
-Runtime guidance lives in `SKILL.md`. Deeper material lives under `resources/`, `examples/`, and `scripts/`.