@jini-ai/agent-plugins 0.6.16 → 0.6.19

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

@@ -0,0 +1,40 @@
+# interface-design:audit
+
+Check existing interface code against the active design system.
+
+## When a System Exists
+
+Audit for:
+
+- spacing values that are off-grid
+- depth violations such as unsupported shadows or borders
+- colors outside the defined palette
+- pattern drift in buttons, cards, inputs, tables, or surfaces
+
+## Report Format
+
+```text
+Audit Results: src/components/
+
+Violations:
+  Button.tsx:12 - Height 38px (pattern: 36px)
+  Card.tsx:8 - Shadow used (system: borders-only)
+  Input.tsx:20 - Spacing 14px (grid: 4px, nearest: 12px or 16px)
+
+Suggestions:
+  - Update Button height to match pattern
+  - Replace shadow with border
+  - Adjust spacing to grid
+```
+
+## When No System Exists
+
+- State that no design system is available yet.
+- Recommend building one by implementing a screen or extracting patterns from existing code.
+
+## Implementation Notes
+
+- Read the active system file.
+- Read the target files.
+- Compare the code against the active direction, tokens, and patterns.
+- Report violations with the smallest practical fix.

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

@@ -0,0 +1,21 @@
+# interface-design:critique
+
+Critique a completed interface for craft, then rebuild the parts that defaulted.
+
+## Review Pass
+
+Look for:
+
+- flat or monotone composition
+- weak rhythm or spacing
+- unclear hierarchy
+- generic surfaces or border/shadow choices
+- missing interactive states
+- structure held together with layout hacks
+
+## Process
+
+1. Review the output as a design lead would.
+2. Identify where the work defaulted instead of deciding.
+3. Rebuild those parts from the decision, not from a patch.
+4. Keep the critique focused on the visible interface.

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

@@ -0,0 +1,34 @@
+# 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

@@ -0,0 +1,31 @@
+# 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

@@ -0,0 +1,22 @@
+# 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

@@ -0,0 +1,29 @@
+# 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

@@ -0,0 +1,29 @@
+# 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

@@ -0,0 +1,57 @@
+# 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

@@ -0,0 +1,244 @@
+# 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/`.