create-agent-skills 1.1.1 → 1.1.4

package/README.md

@@ -45,6 +45,7 @@ npx create-agent-skills
 | `git-pr` | Creates well-structured pull requests |
 | `git-review` | Reviews PRs for code quality and best practices |
 | `maestro-testing` | Write E2E tests for mobile/web apps using Maestro |
+| `rust-backend` | Build backend services with Rust and Clean Architecture |
 | `tailwindcss-v4` | Tailwind CSS v4 setup and migration guide |
 | `tauri-v2` | Build desktop apps with Tauri v2 + React |
 | `testing` | Helps write unit, integration, and E2E tests |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-agent-skills",
-  "version": "1.1.1",
+  "version": "1.1.4",
   "description": "CLI tool to install Agent Skills for AI coding assistants",
   "main": "lib/index.js",
   "bin": {

package/skills/git-commit/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: git-commit
-description: Guide for writing effective Git commit messages following Conventional Commits specification. Use when committing code changes, writing commit messages, or ensuring consistent commit history.
+description: Guide for Git commit messages and pushing code. Use when user says "commit", "push code", "push to git", "save changes to git", "git add and commit", "commit and push", or needs help writing commit messages following Conventional Commits.
 ---
 
 # Git Commit Messages
@@ -9,12 +9,17 @@ This skill provides guidance for writing clear, consistent commit messages follo
 
 ## When to Use This Skill
 
+Use this skill when user requests any of these (in any language):
+- "commit", "push code", "push to git", "commit và push"
+- "save changes to git", "lưu code lên git"
+- "git add and commit", "commit changes"
 - Writing commit messages for any code changes
 - Ensuring commit history is clean and readable
 - Following team/project commit conventions
 - Generating changelogs automatically
 - **Ensuring documentation is up-to-date with code changes**
 
+
 ## Pre-commit Checklist
 
 Before committing, ask yourself:
@@ -31,13 +36,16 @@ Before committing, ask yourself:
 ## Commit Message Format
 
 ```
-<type>(<scope>): <subject>
+(emoji)<type>(<scope>): <subject>
 
 [optional body]
 
 [optional footer(s)]
 ```
 
+> [!NOTE]
+> **Emoji is required** for all commit messages. See the emoji mapping below.
+
 ### Components
 
 | Part | Required | Description |
@@ -63,23 +71,64 @@ Before committing, ask yourself:
 | `ci` | 👷 CI configuration | `ci: add GitHub Actions` |
 | `chore` | ♻️ Other maintenance | `chore: update .gitignore` |
 
+## Emoji Prefix Format (Required)
+
+All commit messages **must** be prefixed with emojis for better visual scanning and commit categorization:
+
+```
+(emoji)<type>(<scope>): <subject>
+```
+
+### Format Examples
+
+```bash
+🐛 fix(api): handle null response
+✨ feat(auth): add OAuth login
+📚 docs: update installation guide
+🔧 refactor(utils): simplify validation logic
+🚀 perf(query): optimize database queries
+```
+
+### Type to Emoji Mapping
+
+| Type | Emoji | Unicode |
+|------|-------|---------|
+| `feat` | ✨ | `:sparkles:` |
+| `fix` | 🐛 | `:bug:` |
+| `docs` | 📚 | `:books:` |
+| `style` | 🎨 | `:art:` |
+| `refactor` | 🔧 | `:wrench:` |
+| `perf` | 🚀 | `:rocket:` |
+| `test` | 🧪 | `:test_tube:` |
+| `build` | 📦 | `:package:` |
+| `ci` | 👷 | `:construction_worker:` |
+| `chore` | ♻️ | `:recycle:` |
+| `revert` | ⏪ | `:rewind:` |
+| `hotfix` | 🚑 | `:ambulance:` |
+| `security` | 🔒 | `:lock:` |
+| `wip` | 🚧 | `:construction:` |
+
+> [!IMPORTANT]
+> Using emojis is **required** for all commit messages. This ensures consistent commit history and makes it easier to scan and categorize changes in the git log.
+
 ## Subject Line Rules
 
-1. **Use imperative mood**: "add" not "added" or "adds"
-2. **No capitalization**: start lowercase
-3. **No period at the end**
-4. **Max 50 characters** (hard limit: 72)
-5. **Be specific**: what changed, not why
+1. **Must start with emoji**: See required emoji mapping below
+2. **Use imperative mood**: "add" not "added" or "adds"
+3. **No capitalization**: start lowercase
+4. **No period at the end**
+5. **Max 50 characters** (hard limit: 72)
+6. **Be specific**: what changed, not why
 
 ```diff
 - feat: Updated the login page
-+ feat(auth): add password reset form
++ ✨ feat(auth): add password reset form
 
 - fix: bug fix
-+ fix(cart): prevent duplicate items
++ 🐛 fix(cart): prevent duplicate items
 
-- ✨ added new feature
-+ feat(dashboard): add real-time notifications
+- added new feature
++ ✨ feat(dashboard): add real-time notifications
 ```
 
 ## Body Guidelines
@@ -90,7 +139,7 @@ Before committing, ask yourself:
 - Use bullet points for multiple changes
 
 ```
-feat(auth): add two-factor authentication
+✨ feat(auth): add two-factor authentication
 
 - Add TOTP-based 2FA using authenticator apps
 - Store encrypted backup codes in database
@@ -105,7 +154,7 @@ who require MFA compliance.
 ### Breaking Changes
 
 ```
-feat(api): change response format
+✨ feat(api)!: change response format
 
 BREAKING CHANGE: API now returns data in envelope format.
 Clients must update to extract data from `response.data`.
@@ -114,7 +163,7 @@ Clients must update to extract data from `response.data`.
 ### Issue References
 
 ```
-fix(login): handle expired tokens
+🐛 fix(login): handle expired tokens
 
 Closes #123
 Fixes #456
@@ -142,19 +191,19 @@ What type of change?
 ### Feature
 
 ```bash
-git commit -m "feat(checkout): add Apple Pay support"
+git commit -m "✨ feat(checkout): add Apple Pay support"
 ```
 
 ### Bug Fix
 
 ```bash
-git commit -m "fix(auth): prevent session timeout on active users"
+git commit -m "🐛 fix(auth): prevent session timeout on active users"
 ```
 
 ### With Body
 
 ```bash
-git commit -m "refactor(api): migrate to async/await
+git commit -m "🔧 refactor(api): migrate to async/await
 
 Replace callback-based API calls with async/await pattern.
 This improves readability and error handling.
@@ -165,7 +214,7 @@ Refs #234"
 ### Breaking Change
 
 ```bash
-git commit -m "feat(api)!: change authentication to JWT
+git commit -m "✨ feat(api)!: change authentication to JWT
 
 BREAKING CHANGE: Session-based auth is no longer supported.
 All clients must use Bearer tokens."

package/skills/landing-page-slider/SKILL.md

@@ -0,0 +1,252 @@
+---
+name: landing-page-slider
+description: Creates landing pages with integrated slider/slideshow for knowledge sharing presentations. Use ONLY when user explicitly requests BOTH landing page AND slider/slideshow functionality together. NOT for regular landing pages or standalone sliders.
+---
+
+# Landing Page Slider
+
+Build beautiful landing pages that transform into fullscreen presentations with keyboard navigation, glassmorphism effects, and professional animations.
+
+## When to Use This Skill
+
+> [!IMPORTANT]
+> This skill is for projects that need **BOTH** landing page **AND** slider/slideshow functionality combined.
+
+- User explicitly asks for "landing page with slider" or "presentation landing page"
+- Building knowledge sharing pages with slideshow mode
+- Creating marketing sites that can toggle into presentation mode
+- NOT for: Regular landing pages, standalone carousel/sliders, simple slideshows
+
+## Tech Stack
+
+| Technology | Version | Purpose |
+|------------|---------|---------|
+| Vite | 5+ | Build tool |
+| React | 18+ | UI framework |
+| Tailwind CSS | v4 | Styling (CSS-first) |
+| Lucide React | Latest | Professional icons |
+| Framer Motion | Latest | Animations |
+
+## Quick Start
+
+### Step 1: Create Project
+
+```bash
+npm create vite@latest my-landing -- --template react-ts
+cd my-landing
+npm install
+```
+
+### Step 2: Install Dependencies
+
+```bash
+npm install tailwindcss @tailwindcss/vite lucide-react framer-motion
+```
+
+### Step 3: Configure Vite
+
+```js
+// vite.config.ts
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+})
+```
+
+### Step 4: Setup Tailwind CSS v4
+
+```css
+/* src/index.css */
+@import "tailwindcss";
+
+@theme {
+  /* Primary gradient colors using oklch for P3 display */
+  --color-primary: oklch(0.65 0.18 250);
+  --color-secondary: oklch(0.55 0.15 280);
+  --color-accent: oklch(0.75 0.2 160);
+  
+  /* Glassmorphism colors */
+  --color-glass-bg: oklch(0.15 0.02 260 / 0.6);
+  --color-glass-border: oklch(1 0 0 / 0.1);
+  
+  /* Animations */
+  --animate-slide-in: slide-in 0.5s ease-out;
+  --animate-fade-up: fade-up 0.6s ease-out;
+  --animate-glow: glow 2s ease-in-out infinite;
+}
+
+@keyframes slide-in {
+  from { transform: translateX(100%); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes fade-up {
+  from { transform: translateY(20px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes glow {
+  0%, 100% { box-shadow: 0 0 20px oklch(0.65 0.18 250 / 0.3); }
+  50% { box-shadow: 0 0 40px oklch(0.65 0.18 250 / 0.6); }
+}
+```
+
+## Core Components
+
+### 1. Slider Container
+
+The main component that manages presentation mode and slide navigation.
+
+Key features:
+- Toggle between landing page and presentation mode
+- Track current slide index
+- Handle animations between slides
+- Fullscreen support
+
+### 2. Slide Component
+
+Individual content sections that become fullscreen slides.
+
+Key features:
+- Content areas (title, description, visuals)
+- Entry/exit animations
+- Glassmorphism card styling
+
+### 3. Keyboard Navigation Hook
+
+Custom hook for keyboard shortcuts.
+
+| Key | Action |
+|-----|--------|
+| `←` / `→` | Navigate slides |
+| `Space` | Next slide |
+| `Escape` | Exit presentation |
+| `F` | Toggle fullscreen |
+| `P` | Toggle presentation mode |
+
+## Glassmorphism Patterns
+
+### Card with Blur
+
+```jsx
+<div className="
+  bg-glass-bg 
+  backdrop-blur-xl 
+  border border-glass-border
+  rounded-2xl 
+  shadow-2xl
+">
+  {/* content */}
+</div>
+```
+
+### Gradient Orbs (Background)
+
+```jsx
+<div className="absolute inset-0 overflow-hidden -z-10">
+  <div className="
+    absolute -top-40 -right-40 w-80 h-80 
+    bg-primary/30 rounded-full blur-3xl
+  " />
+  <div className="
+    absolute -bottom-40 -left-40 w-80 h-80 
+    bg-secondary/30 rounded-full blur-3xl
+  " />
+</div>
+```
+
+## Animation Patterns
+
+### Staggered Children (Framer Motion)
+
+```jsx
+const container = {
+  hidden: { opacity: 0 },
+  show: {
+    opacity: 1,
+    transition: { staggerChildren: 0.1 }
+  }
+}
+
+const item = {
+  hidden: { y: 20, opacity: 0 },
+  show: { y: 0, opacity: 1 }
+}
+
+<motion.div variants={container} initial="hidden" animate="show">
+  {items.map(i => <motion.div key={i} variants={item} />)}
+</motion.div>
+```
+
+### Slide Transitions
+
+```jsx
+<AnimatePresence mode="wait">
+  <motion.div
+    key={currentSlide}
+    initial={{ x: 100, opacity: 0 }}
+    animate={{ x: 0, opacity: 1 }}
+    exit={{ x: -100, opacity: 0 }}
+    transition={{ duration: 0.3, ease: "easeOut" }}
+  >
+    {slides[currentSlide]}
+  </motion.div>
+</AnimatePresence>
+```
+
+## Best Practices
+
+### Visual Excellence
+
+1. **Color Harmony** - Use oklch colors for consistent, vibrant gradients
+2. **Depth Layers** - Combine blur + transparency + subtle borders
+3. **Motion Purpose** - Animate to guide attention, not distract
+4. **Dark Mode First** - Glassmorphism shines on dark backgrounds
+
+### Performance
+
+1. **Lazy Load** - Load slide content on demand
+2. **will-change** - Add for animated elements
+3. **Reduce Motion** - Respect `prefers-reduced-motion`
+
+### Accessibility
+
+1. **Focus Visible** - Clear focus indicators in presentation mode
+2. **Keyboard Nav** - Full keyboard support (already built-in)
+3. **ARIA Labels** - Label navigation controls
+
+## Decision Tree
+
+```
+What do you need?
+├── New landing page project
+│   └── Follow Quick Start (Steps 1-4)
+├── Add slider to existing React app
+│   └── Copy Slider component + hook
+├── Customize visual style
+│   └── Modify @theme block in CSS
+└── Change keyboard shortcuts
+    └── Edit useKeyboard hook
+```
+
+## Examples & Resources
+
+### Examples
+- [Project Structure](./examples/project-structure.md) - Complete folder layout
+- [Slider Component](./examples/slider-component.md) - Main slider logic
+- [Slide Component](./examples/slide-component.md) - Individual slide + content components
+- [Keyboard Hook](./examples/use-keyboard.md) - Keyboard navigation
+- [Theme CSS](./examples/theme.md) - Tailwind v4 theme setup
+- [Landing Page](./examples/landing-page.md) - Full page example
+
+## Common Mistakes
+
+| Mistake | Solution |
+|---------|----------|
+| Blur not working | Ensure parent has `position: relative` or `overflow: hidden` |
+| Animations janky | Add `will-change: transform` to animated elements |
+| Colors look washed | Use oklch for wider gamut support |
+| Keyboard not working | Check if focus is on the container element |

package/skills/landing-page-slider/examples/landing-page.md

@@ -0,0 +1,51 @@
+```tsx
+import { Slider } from './components/Slider'
+import { Slide } from './components/Slider'
+import { BulletList } from './components/Slider'
+import { Sparkles } from 'lucide-react'
+
+function App() {
+  return (
+    <div className="min-h-screen bg-bg-base text-text-primary">
+      <main>
+        <Slider className="min-h-screen">
+          {/* Slide 1 */}
+          <Slide
+            icon={Sparkles}
+            subtitle="Session"
+            title="Your Title Here"
+            description="Your description here."
+          />
+
+          {/* Slide 2 with content */}
+          <Slide
+            title="Key Points"
+            subtitle="Topic"
+          >
+            <BulletList items={[
+              { title: 'Point 1', description: 'Description 1' },
+              { title: 'Point 2', description: 'Description 2' },
+              { title: 'Point 3', description: 'Description 3' },
+            ]} />
+          </Slide>
+
+          {/* Slide 3 with split layout */}
+          <Slide
+            layout="split"
+            title="Split Layout"
+            description="Content on left, image on right"
+            image="/path/to/image.png"
+          >
+            <BulletList items={[
+              { title: 'Feature 1' },
+              { title: 'Feature 2' },
+            ]} />
+          </Slide>
+        </Slider>
+      </main>
+    </div>
+  )
+}
+
+export default App
+```

package/skills/landing-page-slider/examples/project-structure.md

@@ -0,0 +1,23 @@
+```
+src/
+├── components/
+│   ├── Slider/
+│   │   ├── index.ts              # Re-exports
+│   │   ├── Slider.tsx            # Main slider container
+│   │   ├── Slide.tsx             # Individual slide component
+│   │   └── SlideContent.tsx      # Content components
+│   └── ui/
+│       └── index.ts
+├── hooks/
+│   ├── index.ts
+│   ├── useKeyboard.ts
+│   ├── useFullscreen.ts
+│   └── useSlideProgress.ts
+├── slides/
+│   ├── index.ts
+│   └── *.tsx                     # Slide files
+├── App.tsx
+├── main.tsx
+├── index.css                     # Tailwind v4 theme
+└── vite-env.d.ts
+```