@heyai-rules/pilo-masterkit 2.1.0 → 3.1.0

package/.agent/rules/typescript/security.md

@@ -1,28 +1,28 @@
----
-paths:
-  - "**/*.ts"
-  - "**/*.tsx"
-  - "**/*.js"
-  - "**/*.jsx"
----
-# TypeScript/JavaScript Security
-
-> This file extends [common/security.md](../common/security.md) with TypeScript/JavaScript specific content.
-
-## Secret Management
-
-```typescript
-// NEVER: Hardcoded secrets
-const apiKey = "sk-proj-xxxxx"
-
-// ALWAYS: Environment variables
-const apiKey = process.env.OPENAI_API_KEY
-
-if (!apiKey) {
-  throw new Error('OPENAI_API_KEY not configured')
-}
-```
-
-## Agent Support
-
-- Use **security-reviewer** skill for comprehensive security audits
+---
+paths:
+  - "**/*.ts"
+  - "**/*.tsx"
+  - "**/*.js"
+  - "**/*.jsx"
+---
+# TypeScript/JavaScript Security
+
+> This file extends [common/security.md](../common/security.md) with TypeScript/JavaScript specific content.
+
+## Secret Management
+
+```typescript
+// NEVER: Hardcoded secrets
+const apiKey = "sk-proj-xxxxx"
+
+// ALWAYS: Environment variables
+const apiKey = process.env.OPENAI_API_KEY
+
+if (!apiKey) {
+  throw new Error('OPENAI_API_KEY not configured')
+}
+```
+
+## Agent Support
+
+- Use **security-reviewer** skill for comprehensive security audits

package/.agent/rules/typescript/testing.md

@@ -1,18 +1,18 @@
----
-paths:
-  - "**/*.ts"
-  - "**/*.tsx"
-  - "**/*.js"
-  - "**/*.jsx"
----
-# TypeScript/JavaScript Testing
-
-> This file extends [common/testing.md](../common/testing.md) with TypeScript/JavaScript specific content.
-
-## E2E Testing
-
-Use **Playwright** as the E2E testing framework for critical user flows.
-
-## Agent Support
-
-- **e2e-runner** - Playwright E2E testing specialist
+---
+paths:
+  - "**/*.ts"
+  - "**/*.tsx"
+  - "**/*.js"
+  - "**/*.jsx"
+---
+# TypeScript/JavaScript Testing
+
+> This file extends [common/testing.md](../common/testing.md) with TypeScript/JavaScript specific content.
+
+## E2E Testing
+
+Use **Playwright** as the E2E testing framework for critical user flows.
+
+## Agent Support
+
+- **e2e-runner** - Playwright E2E testing specialist

package/.agent/rules/web/coding-style.md

@@ -1,96 +1,96 @@
-> This file extends [common/coding-style.md](../common/coding-style.md) with web-specific frontend content.
-
-# Web Coding Style
-
-## File Organization
-
-Organize by feature or surface area, not by file type:
-
-```text
-src/
-├── components/
-│   ├── hero/
-│   │   ├── Hero.tsx
-│   │   ├── HeroVisual.tsx
-│   │   └── hero.css
-│   ├── scrolly-section/
-│   │   ├── ScrollySection.tsx
-│   │   ├── StickyVisual.tsx
-│   │   └── scrolly.css
-│   └── ui/
-│       ├── Button.tsx
-│       ├── SurfaceCard.tsx
-│       └── AnimatedText.tsx
-├── hooks/
-│   ├── useReducedMotion.ts
-│   └── useScrollProgress.ts
-├── lib/
-│   ├── animation.ts
-│   └── color.ts
-└── styles/
-    ├── tokens.css
-    ├── typography.css
-    └── global.css
-```
-
-## CSS Custom Properties
-
-Define design tokens as variables. Do not hardcode palette, typography, or spacing repeatedly:
-
-```css
-:root {
-  --color-surface: oklch(98% 0 0);
-  --color-text: oklch(18% 0 0);
-  --color-accent: oklch(68% 0.21 250);
-
-  --text-base: clamp(1rem, 0.92rem + 0.4vw, 1.125rem);
-  --text-hero: clamp(3rem, 1rem + 7vw, 8rem);
-
-  --space-section: clamp(4rem, 3rem + 5vw, 10rem);
-
-  --duration-fast: 150ms;
-  --duration-normal: 300ms;
-  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
-}
-```
-
-## Animation-Only Properties
-
-Prefer compositor-friendly motion:
-- `transform`
-- `opacity`
-- `clip-path`
-- `filter` (sparingly)
-
-Avoid animating layout-bound properties:
-- `width`
-- `height`
-- `top`
-- `left`
-- `margin`
-- `padding`
-- `border`
-- `font-size`
-
-## Semantic HTML First
-
-```html
-<header>
-  <nav aria-label="Main navigation">...</nav>
-</header>
-<main>
-  <section aria-labelledby="hero-heading">
-    <h1 id="hero-heading">...</h1>
-  </section>
-</main>
-<footer>...</footer>
-```
-
-Do not reach for generic wrapper `div` stacks when a semantic element exists.
-
-## Naming
-
-- Components: PascalCase (`ScrollySection`, `SurfaceCard`)
-- Hooks: `use` prefix (`useReducedMotion`)
-- CSS classes: kebab-case or utility classes
-- Animation timelines: camelCase with intent (`heroRevealTl`)
+> This file extends [common/coding-style.md](../common/coding-style.md) with web-specific frontend content.
+
+# Web Coding Style
+
+## File Organization
+
+Organize by feature or surface area, not by file type:
+
+```text
+src/
+├── components/
+│   ├── hero/
+│   │   ├── Hero.tsx
+│   │   ├── HeroVisual.tsx
+│   │   └── hero.css
+│   ├── scrolly-section/
+│   │   ├── ScrollySection.tsx
+│   │   ├── StickyVisual.tsx
+│   │   └── scrolly.css
+│   └── ui/
+│       ├── Button.tsx
+│       ├── SurfaceCard.tsx
+│       └── AnimatedText.tsx
+├── hooks/
+│   ├── useReducedMotion.ts
+│   └── useScrollProgress.ts
+├── lib/
+│   ├── animation.ts
+│   └── color.ts
+└── styles/
+    ├── tokens.css
+    ├── typography.css
+    └── global.css
+```
+
+## CSS Custom Properties
+
+Define design tokens as variables. Do not hardcode palette, typography, or spacing repeatedly:
+
+```css
+:root {
+  --color-surface: oklch(98% 0 0);
+  --color-text: oklch(18% 0 0);
+  --color-accent: oklch(68% 0.21 250);
+
+  --text-base: clamp(1rem, 0.92rem + 0.4vw, 1.125rem);
+  --text-hero: clamp(3rem, 1rem + 7vw, 8rem);
+
+  --space-section: clamp(4rem, 3rem + 5vw, 10rem);
+
+  --duration-fast: 150ms;
+  --duration-normal: 300ms;
+  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+}
+```
+
+## Animation-Only Properties
+
+Prefer compositor-friendly motion:
+- `transform`
+- `opacity`
+- `clip-path`
+- `filter` (sparingly)
+
+Avoid animating layout-bound properties:
+- `width`
+- `height`
+- `top`
+- `left`
+- `margin`
+- `padding`
+- `border`
+- `font-size`
+
+## Semantic HTML First
+
+```html
+<header>
+  <nav aria-label="Main navigation">...</nav>
+</header>
+<main>
+  <section aria-labelledby="hero-heading">
+    <h1 id="hero-heading">...</h1>
+  </section>
+</main>
+<footer>...</footer>
+```
+
+Do not reach for generic wrapper `div` stacks when a semantic element exists.
+
+## Naming
+
+- Components: PascalCase (`ScrollySection`, `SurfaceCard`)
+- Hooks: `use` prefix (`useReducedMotion`)
+- CSS classes: kebab-case or utility classes
+- Animation timelines: camelCase with intent (`heroRevealTl`)

package/.agent/rules/web/design-quality.md

@@ -1,63 +1,63 @@
-> This file extends [common/patterns.md](../common/patterns.md) with web-specific design-quality guidance.
-
-# Web Design Quality Standards
-
-## Anti-Template Policy
-
-Do not ship generic template-looking UI. Frontend output should look intentional, opinionated, and specific to the product.
-
-### Banned Patterns
-
-- Default card grids with uniform spacing and no hierarchy
-- Stock hero section with centered headline, gradient blob, and generic CTA
-- Unmodified library defaults passed off as finished design
-- Flat layouts with no layering, depth, or motion
-- Uniform radius, spacing, and shadows across every component
-- Safe gray-on-white styling with one decorative accent color
-- Dashboard-by-numbers layouts with sidebar + cards + charts and no point of view
-- Default font stacks used without a deliberate reason
-
-### Required Qualities
-
-Every meaningful frontend surface should demonstrate at least four of these:
-
-1. Clear hierarchy through scale contrast
-2. Intentional rhythm in spacing, not uniform padding everywhere
-3. Depth or layering through overlap, shadows, surfaces, or motion
-4. Typography with character and a real pairing strategy
-5. Color used semantically, not just decoratively
-6. Hover, focus, and active states that feel designed
-7. Grid-breaking editorial or bento composition where appropriate
-8. Texture, grain, or atmosphere when it fits the visual direction
-9. Motion that clarifies flow instead of distracting from it
-10. Data visualization treated as part of the design system, not an afterthought
-
-## Before Writing Frontend Code
-
-1. Pick a specific style direction. Avoid vague defaults like "clean minimal".
-2. Define a palette intentionally.
-3. Choose typography deliberately.
-4. Gather at least a small set of real references.
-5. Use ECC design/frontend skills where relevant.
-
-## Worthwhile Style Directions
-
-- Editorial / magazine
-- Neo-brutalism
-- Glassmorphism with real depth
-- Dark luxury or light luxury with disciplined contrast
-- Bento layouts
-- Scrollytelling
-- 3D integration
-- Swiss / International
-- Retro-futurism
-
-Do not default to dark mode automatically. Choose the visual direction the product actually wants.
-
-## Component Checklist
-
-- [ ] Does it avoid looking like a default Tailwind or shadcn template?
-- [ ] Does it have intentional hover/focus/active states?
-- [ ] Does it use hierarchy rather than uniform emphasis?
-- [ ] Would this look believable in a real product screenshot?
-- [ ] If it supports both themes, do both light and dark feel intentional?
+> This file extends [common/patterns.md](../common/patterns.md) with web-specific design-quality guidance.
+
+# Web Design Quality Standards
+
+## Anti-Template Policy
+
+Do not ship generic template-looking UI. Frontend output should look intentional, opinionated, and specific to the product.
+
+### Banned Patterns
+
+- Default card grids with uniform spacing and no hierarchy
+- Stock hero section with centered headline, gradient blob, and generic CTA
+- Unmodified library defaults passed off as finished design
+- Flat layouts with no layering, depth, or motion
+- Uniform radius, spacing, and shadows across every component
+- Safe gray-on-white styling with one decorative accent color
+- Dashboard-by-numbers layouts with sidebar + cards + charts and no point of view
+- Default font stacks used without a deliberate reason
+
+### Required Qualities
+
+Every meaningful frontend surface should demonstrate at least four of these:
+
+1. Clear hierarchy through scale contrast
+2. Intentional rhythm in spacing, not uniform padding everywhere
+3. Depth or layering through overlap, shadows, surfaces, or motion
+4. Typography with character and a real pairing strategy
+5. Color used semantically, not just decoratively
+6. Hover, focus, and active states that feel designed
+7. Grid-breaking editorial or bento composition where appropriate
+8. Texture, grain, or atmosphere when it fits the visual direction
+9. Motion that clarifies flow instead of distracting from it
+10. Data visualization treated as part of the design system, not an afterthought
+
+## Before Writing Frontend Code
+
+1. Pick a specific style direction. Avoid vague defaults like "clean minimal".
+2. Define a palette intentionally.
+3. Choose typography deliberately.
+4. Gather at least a small set of real references.
+5. Use ECC design/frontend skills where relevant.
+
+## Worthwhile Style Directions
+
+- Editorial / magazine
+- Neo-brutalism
+- Glassmorphism with real depth
+- Dark luxury or light luxury with disciplined contrast
+- Bento layouts
+- Scrollytelling
+- 3D integration
+- Swiss / International
+- Retro-futurism
+
+Do not default to dark mode automatically. Choose the visual direction the product actually wants.
+
+## Component Checklist
+
+- [ ] Does it avoid looking like a default Tailwind or shadcn template?
+- [ ] Does it have intentional hover/focus/active states?
+- [ ] Does it use hierarchy rather than uniform emphasis?
+- [ ] Would this look believable in a real product screenshot?
+- [ ] If it supports both themes, do both light and dark feel intentional?

package/.agent/rules/web/hooks.md

@@ -1,120 +1,120 @@
-> This file extends [common/hooks.md](../common/hooks.md) with web-specific hook recommendations.
-
-# Web Hooks
-
-## Recommended PostToolUse Hooks
-
-Prefer project-local tooling. Do not wire hooks to remote one-off package execution.
-
-### Format on Save
-
-Use the project's existing formatter entrypoint after edits:
-
-```json
-{
-  "hooks": {
-    "PostToolUse": [
-      {
-        "matcher": "Write|Edit",
-        "command": "pnpm prettier --write \"$FILE_PATH\"",
-        "description": "Format edited frontend files"
-      }
-    ]
-  }
-}
-```
-
-Equivalent local commands via `yarn prettier` or `npm exec prettier --` are fine when they use repo-owned dependencies.
-
-### Lint Check
-
-```json
-{
-  "hooks": {
-    "PostToolUse": [
-      {
-        "matcher": "Write|Edit",
-        "command": "pnpm eslint --fix \"$FILE_PATH\"",
-        "description": "Run ESLint on edited frontend files"
-      }
-    ]
-  }
-}
-```
-
-### Type Check
-
-```json
-{
-  "hooks": {
-    "PostToolUse": [
-      {
-        "matcher": "Write|Edit",
-        "command": "pnpm tsc --noEmit --pretty false",
-        "description": "Type-check after frontend edits"
-      }
-    ]
-  }
-}
-```
-
-### CSS Lint
-
-```json
-{
-  "hooks": {
-    "PostToolUse": [
-      {
-        "matcher": "Write|Edit",
-        "command": "pnpm stylelint --fix \"$FILE_PATH\"",
-        "description": "Lint edited stylesheets"
-      }
-    ]
-  }
-}
-```
-
-## PreToolUse Hooks
-
-### Guard File Size
-
-Block oversized writes from tool input content, not from a file that may not exist yet:
-
-```json
-{
-  "hooks": {
-    "PreToolUse": [
-      {
-        "matcher": "Write",
-        "command": "node -e \"let d='';process.stdin.on('data',c=>d+=c);process.stdin.on('end',()=>{const i=JSON.parse(d);const c=i.tool_input?.content||'';const lines=c.split('\\n').length;if(lines>800){console.error('[Hook] BLOCKED: File exceeds 800 lines ('+lines+' lines)');console.error('[Hook] Split into smaller modules');process.exit(2)}console.log(d)})\"",
-        "description": "Block writes that exceed 800 lines"
-      }
-    ]
-  }
-}
-```
-
-## Stop Hooks
-
-### Final Build Verification
-
-```json
-{
-  "hooks": {
-    "Stop": [
-      {
-        "command": "pnpm build",
-        "description": "Verify the production build at session end"
-      }
-    ]
-  }
-}
-```
-
-## Ordering
-
-Recommended order:
-1. format
-2. lint
-3. type check
-4. build verification
+> This file extends [common/hooks.md](../common/hooks.md) with web-specific hook recommendations.
+
+# Web Hooks
+
+## Recommended PostToolUse Hooks
+
+Prefer project-local tooling. Do not wire hooks to remote one-off package execution.
+
+### Format on Save
+
+Use the project's existing formatter entrypoint after edits:
+
+```json
+{
+  "hooks": {
+    "PostToolUse": [
+      {
+        "matcher": "Write|Edit",
+        "command": "pnpm prettier --write \"$FILE_PATH\"",
+        "description": "Format edited frontend files"
+      }
+    ]
+  }
+}
+```
+
+Equivalent local commands via `yarn prettier` or `npm exec prettier --` are fine when they use repo-owned dependencies.
+
+### Lint Check
+
+```json
+{
+  "hooks": {
+    "PostToolUse": [
+      {
+        "matcher": "Write|Edit",
+        "command": "pnpm eslint --fix \"$FILE_PATH\"",
+        "description": "Run ESLint on edited frontend files"
+      }
+    ]
+  }
+}
+```
+
+### Type Check
+
+```json
+{
+  "hooks": {
+    "PostToolUse": [
+      {
+        "matcher": "Write|Edit",
+        "command": "pnpm tsc --noEmit --pretty false",
+        "description": "Type-check after frontend edits"
+      }
+    ]
+  }
+}
+```
+
+### CSS Lint
+
+```json
+{
+  "hooks": {
+    "PostToolUse": [
+      {
+        "matcher": "Write|Edit",
+        "command": "pnpm stylelint --fix \"$FILE_PATH\"",
+        "description": "Lint edited stylesheets"
+      }
+    ]
+  }
+}
+```
+
+## PreToolUse Hooks
+
+### Guard File Size
+
+Block oversized writes from tool input content, not from a file that may not exist yet:
+
+```json
+{
+  "hooks": {
+    "PreToolUse": [
+      {
+        "matcher": "Write",
+        "command": "node -e \"let d='';process.stdin.on('data',c=>d+=c);process.stdin.on('end',()=>{const i=JSON.parse(d);const c=i.tool_input?.content||'';const lines=c.split('\\n').length;if(lines>800){console.error('[Hook] BLOCKED: File exceeds 800 lines ('+lines+' lines)');console.error('[Hook] Split into smaller modules');process.exit(2)}console.log(d)})\"",
+        "description": "Block writes that exceed 800 lines"
+      }
+    ]
+  }
+}
+```
+
+## Stop Hooks
+
+### Final Build Verification
+
+```json
+{
+  "hooks": {
+    "Stop": [
+      {
+        "command": "pnpm build",
+        "description": "Verify the production build at session end"
+      }
+    ]
+  }
+}
+```
+
+## Ordering
+
+Recommended order:
+1. format
+2. lint
+3. type check
+4. build verification