@nerdev/skillset 0.2.1

package/skills/ui/vitepress-docs/references/components.md

@@ -0,0 +1,333 @@
+# Component Reference
+
+## Navigation Bar
+
+Fixed top bar with logo, search, links, and dark toggle.
+
+```
+┌──────────────────────────────────────────────────────────────────┐
+│ [Logo] Search ⌘K   Guide  Frameworks▾  API  Examples  Studio   │
+│                                              ☀/☾  [GitHub] [⋯] │
+└──────────────────────────────────────────────────────────────────┘
+```
+
+**Structure:**
+- Left: Logo (with light/dark variants) + site title
+- Center: Search bar (DocSearch or local) + main nav links
+- Right: Dark/light toggle + social links (GitHub) + overflow menu
+
+**Search:**
+```css
+.DocSearch-Button {
+  border-radius: 8px;
+  padding: 6px 12px;
+  font-size: 14px;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-border);
+  color: var(--vp-c-text-2);
+  transition: border-color 0.25s;
+}
+```
+
+**Dark Toggle:**
+```css
+.VPSwitchAppearance {
+  width: 40px;
+  height: 22px;
+  border-radius: 11px;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-border);
+  cursor: pointer;
+  transition: background 0.25s, border-color 0.25s;
+}
+```
+
+## Hero Section
+
+Left text, right visual demo. Eyebrow label above title.
+
+```html
+<div class="VPHero has-image">
+  <div class="container">
+    <div class="main">
+      <p class="hero-eyebrow">OPEN SOURCE JS LIBRARY</p>
+      <h1 class="heading">
+        <span class="name">Project Name</span>
+        <span class="text">Subtitle line</span>
+      </h1>
+      <p class="tagline">Description paragraph</p>
+      <div class="actions">
+        <a class="VPButton medium brand" href="/guide">Install</a>
+        <a class="VPButton medium alt" href="/frameworks">Docs</a>
+      </div>
+    </div>
+    <div class="image">
+      <div class="image-container">
+        <!-- Demo, screenshot, or animation -->
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+**Buttons:**
+```css
+.VPButton {
+  display: inline-block;
+  padding: 10px 20px;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 8px;
+  text-decoration: none;
+  transition: background 0.25s, border-color 0.25s;
+}
+
+.VPButton.brand {
+  background: var(--vp-c-brand-3);
+  color: var(--vp-c-white);
+  border: none;
+}
+
+.VPButton.brand:hover {
+  background: var(--vp-c-brand-2);
+}
+
+.VPButton.alt {
+  background: transparent;
+  color: var(--vp-c-brand-1);
+  border: 1px solid var(--vp-c-brand-1);
+}
+
+.VPButton.alt:hover {
+  background: var(--vp-c-brand-soft);
+}
+```
+
+## Feature Cards
+
+3-column grid of linked cards. Minimal design: title + description, no heavy decoration.
+
+```html
+<div class="VPFeatures">
+  <div class="items">
+    <div class="item">
+      <a class="VPFeature" href="/css">
+        <article class="box">
+          <h2 class="title">Feature Title</h2>
+          <p class="details">Short description of this feature.</p>
+        </article>
+      </a>
+    </div>
+  </div>
+</div>
+```
+
+**Card styling:**
+```css
+.VPFeature {
+  display: block;
+  border-radius: 12px;
+  padding: 24px;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-border);
+  text-decoration: none;
+  color: inherit;
+  transition: border-color 0.25s, background 0.25s;
+}
+
+.VPFeature:hover {
+  border-color: var(--vp-c-brand-1);
+  background: var(--vp-c-bg-elv);
+}
+
+.VPFeature .title {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.VPFeature .details {
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+  margin-top: 8px;
+  line-height: 1.5;
+}
+```
+
+## Code Blocks
+
+Syntax-highlighted with Shiki. Copy button, language label, optional line numbers.
+
+```html
+<div class="language-js vp-adaptive-theme">
+  <button title="Copy Code" class="copy"></button>
+  <span class="lang">js</span>
+  <pre class="shiki vp-code" tabindex="0">
+    <code><!-- syntax-highlighted content --></code>
+  </pre>
+</div>
+```
+
+**Styling:**
+```css
+.vp-code {
+  display: block;
+  padding: 20px 24px;
+  background: var(--vp-c-bg-alt);
+  border-radius: 8px;
+  font-family: var(--vp-font-family-mono);
+  font-size: 0.875em;
+  line-height: 1.7;
+  overflow-x: auto;
+  color: var(--vp-c-text-2);
+}
+
+.copy {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  opacity: 0;
+  transition: opacity 0.25s;
+}
+
+.vp-code:hover .copy {
+  opacity: 1;
+}
+```
+
+## Code Tabs
+
+Tabbed code blocks for package manager commands.
+
+```html
+<div class="vp-code-group">
+  <div class="tabs">
+    <input type="radio" name="group" id="tab-1" checked>
+    <label for="tab-1">npm</label>
+    <input type="radio" name="group" id="tab-2">
+    <label for="tab-2">yarn</label>
+    <input type="radio" name="group" id="tab-3">
+    <label for="tab-3">pnpm</label>
+    <input type="radio" name="group" id="tab-4">
+    <label for="tab-4">bun</label>
+  </div>
+  <div class="blocks">
+    <div class="language-bash active">npm i package-name</div>
+    <div class="language-bash">yarn add package-name</div>
+    <div class="language-bash">pnpm add package-name</div>
+    <div class="language-bash">bun add package-name</div>
+  </div>
+</div>
+```
+
+**Tab styling:**
+```css
+.vp-code-group .tabs {
+  display: flex;
+  border-bottom: 1px solid var(--vp-c-divider);
+  padding: 0 16px;
+}
+
+.vp-code-group .tabs label {
+  padding: 8px 16px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  transition: color 0.25s;
+}
+
+.vp-code-group .tabs input:checked + label {
+  color: var(--vp-c-text-1);
+  border-bottom-color: var(--vp-c-brand-1);
+}
+```
+
+## Sidebar Navigation
+
+Collapsible sections for deep documentation.
+
+```
+┌─────────────────────┐
+│ Start               │
+│   What it is        │
+│   Install and usage │
+│ Frameworks          │
+│   Getting started   │
+│   React             │
+│   Vue               │
+│ Reference           │
+│   API               │
+│   Examples          │
+└─────────────────────┘
+```
+
+**Styling:**
+```css
+.VPSidebar {
+  position: fixed;
+  top: 64px;
+  left: 0;
+  bottom: 0;
+  width: 272px;
+  padding: 24px;
+  overflow-y: auto;
+  border-right: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg);
+}
+
+.VPSidebarItem .title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.VPSidebarItem .link {
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+  padding: 4px 0;
+  display: block;
+  text-decoration: none;
+}
+
+.VPSidebarItem .link:hover,
+.VPSidebarItem .link.active {
+  color: var(--vp-c-brand-1);
+}
+```
+
+## Footer
+
+Simple centered footer.
+
+```html
+<footer class="VPFooter">
+  <div class="container">
+    <p class="message">
+      designed by <a href="...">Name</a>, implemented by <a href="...">Name</a>
+    </p>
+    <p class="copyright">© 2026 Company. MIT License.</p>
+  </div>
+</footer>
+```
+
+**Styling:**
+```css
+.VPFooter {
+  padding: 32px;
+  text-align: center;
+  border-top: 1px solid var(--vp-c-divider);
+}
+
+.VPFooter .message {
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.VPFooter .copyright {
+  font-size: 13px;
+  color: var(--vp-c-text-3);
+  margin-top: 8px;
+}
+```

package/skills/ui/vitepress-docs/references/layout.md

@@ -0,0 +1,128 @@
+# Layout Reference
+
+## Page Structure
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│  NAV BAR (64px, fixed top, z-index: 30)                     │
+│  [Logo] [Search ⌘K] [Guide] [Frameworks▾] [API] [Examples] │
+│                                         [☀/☾] [GitHub] [⋯] │
+├─────────────────────────────────────────────────────────────┤
+│                                                             │
+│  HERO (min-height: calc(100vh - 64px))                      │
+│  ┌─────────────────────────┐  ┌──────────────────────────┐  │
+│  │  OPEN SOURCE JS LIBRARY │  │                          │  │
+│  │                         │  │     Live Demo /          │  │
+│  │  Project Name           │  │     Product Screenshot   │  │
+│  │  Subtitle line          │  │                          │  │
+│  │  Description paragraph  │  │     (aspect-ratio: 3/4)  │  │
+│  │                         │  │                          │  │
+│  │  [Install] [Docs]       │  │                          │  │
+│  │  [Studio]               │  │                          │  │
+│  └─────────────────────────┘  └──────────────────────────┘  │
+│                                                             │
+├─────────────────────────────────────────────────────────────┤
+│                                                             │
+│  FEATURES (padding: 96px 24px)                              │
+│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐      │
+│  │   Title      │  │   Title      │  │   Title      │      │
+│  │   Description│  │   Description│  │   Description│      │
+│  └──────────────┘  └──────────────┘  └──────────────┘      │
+│                                                             │
+├─────────────────────────────────────────────────────────────┤
+│                                                             │
+│  DOCUMENTATION CONTENT (max-width: 768px, centered)         │
+│  ├── H2 with top border separator                           │
+│  ├── Prose paragraphs                                       │
+│  ├── Code blocks (full-width)                               │
+│  ├── Code tabs (npm/yarn/pnpm/bun)                          │
+│  └── Inline code references                                 │
+│                                                             │
+├─────────────────────────────────────────────────────────────┤
+│  FOOTER (padding: 32px, centered text)                      │
+│  designed by [Name], implemented by [Name]                  │
+│  © 2026 Company. MIT License.                               │
+└─────────────────────────────────────────────────────────────┘
+```
+
+## Responsive Breakpoints
+
+| Name | Width | Behavior |
+|------|-------|----------|
+| Desktop | ≥960px | Sidebar visible, 3-col features, side-by-side hero |
+| Tablet | ≥768px | Sidebar collapsed, 2-col features, side-by-side hero |
+| Mobile | <768px | No sidebar, 1-col features, stacked hero |
+
+## Key Dimensions
+
+| Element | Desktop | Mobile |
+|---------|---------|--------|
+| Nav height | 64px | 56px |
+| Sidebar width | 272px | — (drawer) |
+| Content prose width | 768px | 100% |
+| Page max-width | 1440px | 100% |
+| Hero min-height | calc(100vh - 64px) | auto |
+| Feature card min-height | — | auto |
+| Code block max-width | 100% | 100% (scrollable) |
+
+## Grid System
+
+### Feature Cards
+
+```css
+.VPFeatures .items {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 24px;
+}
+
+@media (max-width: 960px) {
+  .VPFeatures .items {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .VPFeatures .items {
+    grid-template-columns: 1fr;
+  }
+}
+```
+
+### Hero Layout
+
+```css
+.VPHero .main {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 48px;
+}
+
+.VPHero .image {
+  flex-shrink: 0;
+  width: 50%;
+}
+
+@media (max-width: 768px) {
+  .VPHero .main {
+    flex-direction: column;
+  }
+  .VPHero .image {
+    width: 100%;
+  }
+}
+```
+
+## Spacing Rhythm
+
+| Transition | Gap |
+|------------|-----|
+| Nav to hero top | 0 (hero starts at nav bottom) |
+| Hero text sections | 16px between eyebrow/title/subtitle/CTA |
+| Hero to features | 96px |
+| Between feature cards | 24px |
+| Features to content | 96px |
+| Between H2 sections | 48px |
+| Between H3 sections | 32px |
+| Content to footer | 96px |

package/skills/ui/vitepress-docs/references/tokens.md

@@ -0,0 +1,87 @@
+# Design Tokens
+
+Extracted from iim.smartsquad.io (VitePress warm variant).
+
+## Colors — Light Mode
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| Background | `#F3EFE8` | Page canvas — warm parchment |
+| Background Alt | `#EDE8DF` | Code blocks, secondary surfaces |
+| Background Soft | `#E8E3DA` | Subtle surface differentiation |
+| Background Elevated | `#ffffff` | Dropdowns, modals, popovers |
+| Text Primary | `#2c2c2c` | Headings, body copy |
+| Text Secondary | `#5a5a5a` | Descriptions, secondary info |
+| Text Muted | `#8a8a8a` | Captions, placeholders |
+| Border | `#d4cfc6` | Card borders, input borders |
+| Divider | `#e0dbd2` | Section separators |
+| Brand Primary | `#3451b2` | Links, active states |
+| Brand Hover | `#3a5ccc` | Link hover, focus rings |
+| Brand Button | `#5672cd` | CTA button backgrounds |
+
+## Colors — Dark Mode
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| Background | `#141313` | Page canvas — deep charcoal |
+| Background Alt | `#1a1919` | Code blocks |
+| Background Soft | `#1f1e1e` | Subtle surfaces |
+| Background Elevated | `#1f1e1e` | Dropdowns, modals |
+| Text Primary | `#e8e8e8` | Headings |
+| Text Secondary | `#9a9a9a` | Descriptions |
+| Text Muted | `#6a6a6a` | Captions |
+| Border | `#2e2d2d` | Borders |
+| Divider | `#242323` | Separators |
+| Brand Primary | `#a8b1ff` | Links (lighter for dark bg) |
+| Brand Hover | `#5c73e7` | Hover states |
+| Brand Button | `#3e63dd` | CTA backgrounds |
+
+## Semantic Colors
+
+| Name | Light | Dark | Use |
+|------|-------|------|-----|
+| Success | `#18794e` | `#3dd68c` | Positive feedback |
+| Warning | `#915930` | `#f9b44e` | Caution states |
+| Danger | `#b8272c` | `#f66f81` | Errors, destructive |
+| Info | `#3451b2` | `#a8b1ff` | Informational |
+
+## Spacing
+
+| Name | Value |
+|------|-------|
+| xs | 4px |
+| sm | 8px |
+| md | 16px |
+| lg | 24px |
+| xl | 32px |
+| 2xl | 48px |
+| 3xl | 64px |
+| 4xl | 96px |
+
+## Border Radius
+
+| Element | Value |
+|---------|-------|
+| Small (badges, tags) | 4px |
+| Medium (buttons, inputs) | 8px |
+| Large (cards) | 12px |
+| XL (code blocks) | 8px |
+
+## Shadows
+
+```css
+--vp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
+--vp-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.08);
+--vp-shadow-3: 0 4px 16px rgba(0, 0, 0, 0.12);
+```
+
+## Z-Index Scale
+
+| Layer | Value |
+|-------|-------|
+| Footer | 10 |
+| Local nav | 20 |
+| Main nav | 30 |
+| Layout top | 40 |
+| Backdrop | 50 |
+| Sidebar | 60 (25 on desktop) |

package/skills/ui/vitepress-docs/references/typography.md

@@ -0,0 +1,76 @@
+# Typography Reference
+
+## Font Families
+
+```css
+--vp-font-family-base: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+--vp-font-family-mono: ui-monospace, "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
+```
+
+## Type Scale
+
+| Role | Size | Weight | Line Height | Letter Spacing | Transform |
+|------|------|--------|-------------|----------------|-----------|
+| Eyebrow | 13px | 700 | 1.4 | 0.1em | uppercase |
+| Hero Title | 48-56px | 700 | 1.1 | -0.02em | ,  |
+| Hero Subtitle | 24-28px | 400 | 1.4 | -0.005em | ,  |
+| H1 | 32px | 700 | 1.2 | -0.01em | ,  |
+| H2 | 24px | 600 | 1.3 | -0.005em | ,  |
+| H3 | 20px | 600 | 1.4 | 0 | ,  |
+| Body | 16px | 400 | 1.6 | 0 | ,  |
+| Body Small | 14px | 400 | 1.5 | 0 | ,  |
+| Code | 14px (0.875em) | 400 | 1.7 | 0 | ,  |
+| Caption | 13px | 400 | 1.4 | 0 | ,  |
+| Label | 12px | 500 | 1.4 | 0.02em | uppercase |
+
+## Eyebrow Pattern
+
+Used above hero titles to categorize the project:
+
+```css
+.hero-eyebrow {
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--vp-c-brand-1);
+  margin-bottom: 16px;
+  line-height: 1.4;
+}
+```
+
+## Prose Typography
+
+Content sections use standard prose rules:
+
+```css
+.vp-doc h1 { font-size: 32px; font-weight: 700; margin-top: 0; }
+.vp-doc h2 { font-size: 24px; font-weight: 600; margin-top: 48px; border-top: 1px solid var(--vp-c-divider); padding-top: 24px; }
+.vp-doc h3 { font-size: 20px; font-weight: 600; margin-top: 32px; }
+.vp-doc p { margin-top: 16px; line-height: 1.6; }
+.vp-doc a { color: var(--vp-c-brand-1); text-decoration: underline; text-underline-offset: 2px; }
+.vp-doc code { font-family: var(--vp-font-family-mono); font-size: 0.875em; background: var(--vp-c-bg-soft); padding: 2px 6px; border-radius: 4px; }
+```
+
+## Code Typography
+
+```css
+.vp-code {
+  font-family: var(--vp-font-family-mono);
+  font-size: 0.875em;
+  line-height: 1.7;
+  tab-size: 2;
+}
+
+/* Syntax highlighting uses Shiki */
+/* Light: github-light theme */
+/* Dark: github-dark theme */
+```
+
+## Responsive Type
+
+| Breakpoint | Hero Title | H1 | H2 |
+|------------|-----------|-----|-----|
+| Desktop (≥960px) | 56px | 32px | 24px |
+| Tablet (≥768px) | 48px | 28px | 22px |
+| Mobile (<768px) | 32px | 24px | 20px |

package/skills/workflow/careful/SKILL.md

@@ -0,0 +1,48 @@
+---
+name: careful
+version: 1.0.0
+description: "Safety guardrails for destructive commands. Warns before rm -rf, DROP TABLE, force-push, and similar."
+triggers:
+  - be careful
+  - warn before destructive
+  - safety mode
+  - careful mode
+---
+
+## When to use
+
+Use when touching production, debugging live systems, or working in a shared environment. Activate when asked to "be careful", "safety mode", or "careful mode".
+
+## What's protected
+
+| Pattern | Example | Risk |
+|---------|---------|------|
+| `rm -rf` / `rm -r` / `rm --recursive` | `rm -rf /var/data` | Recursive delete |
+| `DROP TABLE` / `DROP DATABASE` | `DROP TABLE users;` | Data loss |
+| `TRUNCATE` | `TRUNCATE orders;` | Data loss |
+| `git push --force` / `-f` | `git push -f origin main` | History rewrite |
+| `git reset --hard` | `git reset --hard HEAD~3` | Uncommitted work loss |
+| `git checkout .` / `git restore .` | `git checkout .` | Uncommitted work loss |
+| `kubectl delete` | `kubectl delete pod` | Production impact |
+| `docker rm -f` / `docker system prune` | `docker system prune -a` | Container/image loss |
+
+## Safe exceptions
+
+These patterns are allowed without warning:
+- `rm -rf node_modules` / `.next` / `dist` / `__pycache__` / `.cache` / `build` / `.turbo` / `coverage`
+
+## How to apply
+
+Before running any bash command, check it against the patterns above. If a match is found, warn the user:
+
+> **WARNING:** This command may cause irreversible damage.
+> Command: `{command}`
+> Risk: {risk description}
+>
+> Type the command again to confirm, or describe what you actually want to do.
+
+For catastrophic operations (recursive delete of / or ~, force-push to default branch), hard deny. Do not proceed even if confirmed.
+
+## Activation
+
+When the user says "be careful", prefix your next 5-10 bash commands with this check. Deactivate at end of session or when the user says "uncareful".