devflow-kit 1.8.3 → 2.0.0

package/shared/skills/frontend-design/references/violations.md

@@ -1,453 +0,0 @@
-# Frontend Design Violations
-
-Extended violation patterns for frontend design reviews. Reference from main SKILL.md.
-
-## Typography Violations
-
-### No Rationale for Font Choice
-
-```css
-/* VIOLATION: Default sans-serif without justification */
-body {
-  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
-}
-/* Why Inter? What personality does it convey? How does it serve the product? */
-
-/* VIOLATION: Trend-following font choice */
-body {
-  font-family: 'Poppins', sans-serif;
-}
-/* Poppins is everywhere. Is it right for YOUR product? */
-```
-
-### Flat Hierarchy
-
-```css
-/* VIOLATION: No visual distinction between heading levels */
-h1 { font-size: 24px; font-weight: 600; }
-h2 { font-size: 22px; font-weight: 600; }
-h3 { font-size: 20px; font-weight: 600; }
-h4 { font-size: 18px; font-weight: 600; }
-/* All look the same - users can't scan content */
-
-/* VIOLATION: Only size differentiates, nothing else */
-.title { font-size: 2rem; }
-.subtitle { font-size: 1.5rem; }
-.body { font-size: 1rem; }
-/* No weight, spacing, or color variation */
-```
-
-### Poor Readability
-
-```css
-/* VIOLATION: Line height too tight for body text */
-p {
-  font-size: 16px;
-  line-height: 1.2;
-}
-
-/* VIOLATION: Lines too long */
-.content {
-  max-width: 1200px; /* 150+ characters per line */
-  font-size: 16px;
-}
-
-/* VIOLATION: Inconsistent line heights */
-.card-title { line-height: 1.1; }
-.card-body { line-height: 1.8; }
-.card-footer { line-height: 1.4; }
-/* Random values, no system */
-```
-
----
-
-## Color Violations
-
-### Random Hex Values
-
-```css
-/* VIOLATION: Colors without system */
-.button-primary { background: #4f46e5; }
-.button-secondary { background: #6366f1; }
-.link { color: #3b82f6; }
-.error { color: #ef4444; }
-.success { color: #22c55e; }
-/* Different blues, no relationship, no semantic meaning */
-
-/* VIOLATION: Inline color overrides */
-<span style={{ color: '#8b5cf6' }}>Special text</span>
-<div style={{ background: '#fef3c7' }}>Warning area</div>
-/* One-off colors that don't fit the system */
-```
-
-### AI Slop Gradients
-
-```css
-/* VIOLATION: Template gradient with no brand relevance */
-.hero {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-}
-
-/* VIOLATION: Gradient just because "it's modern" */
-.button {
-  background: linear-gradient(to right, #ec4899, #8b5cf6);
-}
-/* Purple-pink gradient copied from every template */
-
-/* VIOLATION: Gradient on text without purpose */
-.heading {
-  background: linear-gradient(90deg, #f97316, #ec4899);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-/* Eye-catching but what does it communicate? */
-```
-
-### Dark Mode Afterthoughts
-
-```css
-/* VIOLATION: Invert filter hack */
-@media (prefers-color-scheme: dark) {
-  body { filter: invert(1) hue-rotate(180deg); }
-  img { filter: invert(1) hue-rotate(180deg); }
-}
-
-/* VIOLATION: Only swapping background */
-.dark {
-  background: #1a1a1a;
-  /* Text colors, borders, shadows all broken */
-}
-
-/* VIOLATION: Different design language in dark mode */
-.card {
-  background: white;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-}
-.dark .card {
-  background: #2d2d2d;
-  border: 1px solid #444;
-  /* Shadows become borders - inconsistent */
-}
-```
-
----
-
-## Motion Violations
-
-### Decorative Animation
-
-```css
-/* VIOLATION: Animation without purpose */
-.logo {
-  animation: float 3s ease-in-out infinite;
-}
-@keyframes float {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-10px); }
-}
-/* Why is the logo floating? */
-
-/* VIOLATION: Pulsing buttons */
-.cta-button {
-  animation: pulse 2s infinite;
-}
-/* Desperate attention-seeking, not communication */
-
-/* VIOLATION: Spinning loaders everywhere */
-.loading { animation: spin 1s linear infinite; }
-/* Even for instant operations */
-```
-
-### Inconsistent Timing
-
-```css
-/* VIOLATION: Random durations */
-.modal {
-  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.dropdown {
-  transition: all 0.2s linear;
-}
-.tooltip {
-  transition: opacity 150ms;
-}
-.button {
-  transition: background 0.1s, transform 0.15s, box-shadow 0.2s;
-}
-/* No timing system, feels inconsistent */
-
-/* VIOLATION: "all" transition */
-.card {
-  transition: all 0.3s ease;
-}
-/* Animates everything including width/height layout shifts */
-```
-
-### Jarring Easing
-
-```css
-/* VIOLATION: Linear easing for UI (feels robotic) */
-.menu {
-  transition: transform 0.3s linear;
-}
-
-/* VIOLATION: Aggressive bounce on everything */
-.button {
-  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-}
-/* Bounce has its place, but not everywhere */
-```
-
----
-
-## Spacing Violations
-
-### Magic Numbers
-
-```css
-/* VIOLATION: Random spacing values */
-.card {
-  padding: 18px 22px;
-  margin-bottom: 13px;
-}
-.header {
-  padding: 14px 20px;
-  margin-bottom: 27px;
-}
-/* No relationship between values */
-
-/* VIOLATION: Pixel values everywhere */
-.section { margin: 47px 0; }
-.title { margin-bottom: 11px; }
-.button { padding: 9px 17px; }
-```
-
-### No Spacing System
-
-```tsx
-// VIOLATION: Hardcoded spacing in components
-<div style={{ padding: '12px 16px', marginBottom: '24px' }}>
-  <h2 style={{ marginBottom: '8px' }}>Title</h2>
-  <p style={{ marginBottom: '16px' }}>Content</p>
-</div>
-
-// VIOLATION: Inconsistent Tailwind spacing
-<div className="p-4 mb-6">
-  <div className="p-3 mb-5">
-    <div className="p-2 mb-4">
-      {/* Different patterns at each level */}
-    </div>
-  </div>
-</div>
-```
-
-### Uniform Spacing (No Hierarchy)
-
-```css
-/* VIOLATION: Lobotomized owl selector misuse */
-* + * {
-  margin-top: 1rem;
-}
-/* Everything has same spacing - no visual grouping */
-
-/* VIOLATION: Same gap everywhere */
-.grid { gap: 16px; }
-.stack { gap: 16px; }
-.inline { gap: 16px; }
-/* No context-appropriate spacing */
-```
-
----
-
-## Layout Violations
-
-### Everything Centered
-
-```css
-/* VIOLATION: Centered text everywhere */
-.page {
-  text-align: center;
-}
-.card {
-  text-align: center;
-}
-.section {
-  text-align: center;
-}
-/* No reading flow, no hierarchy */
-
-/* VIOLATION: Centered layout regardless of content */
-.container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-}
-```
-
-### Border Radius Overuse
-
-```css
-/* VIOLATION: Same radius on everything */
-.button { border-radius: 12px; }
-.card { border-radius: 12px; }
-.input { border-radius: 12px; }
-.avatar { border-radius: 12px; }
-.badge { border-radius: 12px; }
-.modal { border-radius: 12px; }
-/* Avatar should be round, badge should be small radius */
-
-/* VIOLATION: Excessive rounding */
-.container {
-  border-radius: 24px;
-}
-/* Large containers look like floating blobs */
-```
-
-### Shadow Abuse
-
-```css
-/* VIOLATION: Shadow on everything */
-.card { box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
-.button { box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
-.input { box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
-.header { box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
-/* If everything is elevated, nothing is */
-
-/* VIOLATION: Deep shadows for no reason */
-.badge {
-  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
-}
-/* Tiny element with massive shadow */
-```
-
----
-
-## Component Violations
-
-### Generic Hero Sections
-
-```tsx
-// VIOLATION: Template hero with no customization
-<section className="hero bg-gradient-to-r from-purple-600 to-pink-500">
-  <div className="container mx-auto text-center text-white">
-    <h1 className="text-5xl font-bold mb-4">Welcome to Our Platform</h1>
-    <p className="text-xl mb-8">The best solution for your needs</p>
-    <button className="bg-white text-purple-600 rounded-full px-8 py-3">
-      Get Started
-    </button>
-  </div>
-</section>
-/* Seen this exact layout on 10,000 websites */
-```
-
-### Glassmorphism Everywhere
-
-```css
-/* VIOLATION: Blur background without purpose */
-.card {
-  background: rgba(255, 255, 255, 0.2);
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-}
-.modal {
-  background: rgba(255, 255, 255, 0.15);
-  backdrop-filter: blur(20px);
-}
-.nav {
-  background: rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(8px);
-}
-/* Glass effect is a choice, not a default */
-```
-
-### Trend-Following Patterns
-
-```css
-/* VIOLATION: Bento grid because it's trendy */
-.features {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  grid-template-rows: repeat(2, 1fr);
-}
-.feature-1 { grid-column: span 2; grid-row: span 2; }
-.feature-2 { grid-column: span 2; }
-/* Does this layout serve the content or is it just "cool"? */
-
-/* VIOLATION: Scroll-triggered animations on everything */
-.section {
-  opacity: 0;
-  transform: translateY(50px);
-}
-.section.visible {
-  opacity: 1;
-  transform: translateY(0);
-  transition: all 0.6s ease;
-}
-/* Slows down content consumption */
-```
-
----
-
-## Responsive Violations
-
-### Afterthought Mobile
-
-```css
-/* VIOLATION: Desktop-first with broken mobile */
-.sidebar { width: 300px; }
-.content { margin-left: 300px; }
-
-@media (max-width: 768px) {
-  .sidebar { display: none; } /* Just hide everything */
-  .content { margin-left: 0; }
-}
-```
-
-### Breakpoint Chaos
-
-```css
-/* VIOLATION: Inconsistent breakpoints */
-@media (max-width: 1200px) { ... }
-@media (max-width: 992px) { ... }
-@media (max-width: 768px) { ... }
-@media (max-width: 576px) { ... }
-@media (max-width: 480px) { ... }
-@media (max-width: 375px) { ... }
-/* Too many breakpoints, impossible to reason about */
-```
-
----
-
-## Dark Mode Violations (Extended)
-
-### Contrast Inversions
-
-```css
-/* VIOLATION: Colors that work in light don't work in dark */
-:root {
-  --primary: #0066cc;
-}
-.dark {
-  /* Same blue on dark background - poor contrast */
-}
-
-/* VIOLATION: Shadows become invisible */
-.card {
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-}
-.dark .card {
-  /* Same shadow on dark background - invisible */
-}
-```
-
-### Inconsistent Dark Surfaces
-
-```css
-/* VIOLATION: Random dark grays */
-.dark .bg-1 { background: #1a1a1a; }
-.dark .bg-2 { background: #2d2d2d; }
-.dark .bg-3 { background: #333333; }
-.dark .bg-4 { background: #3d3d3d; }
-/* No intentional hierarchy */
-```

package/shared/skills/git-safety/SKILL.md

@@ -1,122 +0,0 @@
----
-name: git-safety
-description: This skill should be used when the user asks to "rebase safely", "manage branches", "fix merge conflicts", "clean git history", "undo a commit", or performs git operations that could lose work. Provides safety patterns for branch management, force-push prevention, index.lock handling, and sequential command execution to prevent data loss.
-user-invocable: false
-allowed-tools: Bash, Read
----
-
-# Git Safety Patterns
-
-Safe git operations and best practices. Used by Commit, PullRequest, and Coder agents.
-
-## Iron Law
-
-> **NEVER RUN GIT COMMANDS IN PARALLEL**
->
-> All git operations MUST be sequential. Parallel git commands cause `.git/index.lock`
-> conflicts. Use `&&` chains, never `&` backgrounding. Wait for each command to complete
-> before starting the next.
-
----
-
-## Core Safety Rules
-
-### Lock File Handling
-
-Check for lock before git operations. If `.git/index.lock` exists, wait or abort.
-
-```bash
-[ -f .git/index.lock ] && echo "Lock exists - wait" && exit 1
-```
-
-See `references/commands.md` for full `wait_for_lock_release()` implementation.
-
-### Sequential Operations
-
-```bash
-# WRONG: git add . & git status &
-# CORRECT:
-git add . && git status && echo "Done"
-```
-
----
-
-## Sensitive File Detection
-
-### Never Commit These Patterns
-
-| Category | Patterns |
-|----------|----------|
-| Secrets | `.env`, `.env.*`, `*secret*`, `*password*`, `*credential*` |
-| Keys | `*.key`, `*.pem`, `*.p12`, `id_rsa*`, `id_ed25519*` |
-| Cloud | `.aws/credentials`, `.npmrc`, `.pypirc`, `.netrc` |
-| Temp | `*.tmp`, `*.log`, `*.swp`, `.DS_Store`, `*~` |
-
-### Quick Content Check
-
-Block commits containing:
-- `BEGIN.*PRIVATE KEY` - Private key material
-- `AKIA[0-9A-Z]{16}` - AWS access key
-- `gh[pousr]_[A-Za-z0-9_]{36,}` - GitHub token
-- Database URIs with credentials: `postgres://user:pass@`
-
-See `references/detection.md` for full `check_for_secrets()` function.
-
----
-
-## Amend Safety
-
-Only use `--amend` when ALL conditions are met:
-1. User explicitly requested amend, OR commit succeeded but hook auto-modified files
-2. HEAD commit was created by you in this conversation
-3. Commit has NOT been pushed to remote
-
-**Never amend**: If commit failed/rejected by hook, if pushed, or if unsure.
-
----
-
-## Branch Safety
-
-Never force push to: `main`, `master`, `develop`
-
-**Branch naming**: `feat/`, `fix/`, `release/`, `hotfix/` prefixes with short descriptions.
-
----
-
-## Forbidden Operations
-
-| Action | Risk |
-|--------|------|
-| `git push --force` to main/master | Destroys shared history |
-| `git commit --no-verify` | Bypasses safety hooks |
-| `git reset --hard` without backup | Loses work permanently |
-| Parallel git commands | Causes lock conflicts |
-| Commit secrets/keys | Security breach |
-| Amend pushed commits | Requires force push |
-| Interactive rebase (`-i`) | Requires user input |
-
----
-
-## Quick Recovery
-
-```bash
-git reset --soft HEAD~1  # Undo commit, keep staged
-git reset HEAD~1         # Undo commit, keep unstaged
-```
-
-See `references/commands.md` for extended recovery and stash workflows.
-
----
-
-## Related Skills
-
-| Skill | Use For |
-|-------|---------|
-| `commit` | Commit message format, atomic grouping |
-| `pull-request` | PR descriptions, size assessment |
-| `github-patterns` | GitHub API, rate limits, releases |
-
-## Extended References
-
-- `references/commands.md` - Extended command examples, recovery workflows, stash handling
-- `references/detection.md` - Sensitive file detection patterns and functions