devflow-kit 1.1.0 → 1.2.0

package/plugins/devflow-implement/skills/accessibility/references/violations.md

@@ -1,419 +0,0 @@
-# Accessibility Violations
-
-Extended violation patterns for accessibility reviews. Reference from main SKILL.md.
-
-## Keyboard Navigation Violations
-
-### No Keyboard Access
-
-```tsx
-// VIOLATION: onClick without keyboard equivalent
-<div onClick={handleClick} className="card">
-  Click me
-</div>
-
-// VIOLATION: Custom element not focusable
-<span className="link" onClick={() => navigate('/page')}>
-  Go to page
-</span>
-
-// VIOLATION: Drag-only interaction
-<div
-  draggable
-  onDragStart={handleDrag}
-  onDragEnd={handleDrop}
->
-  Drag me (no keyboard alternative)
-</div>
-```
-
-### Missing Focus Management
-
-```tsx
-// VIOLATION: Modal doesn't trap focus
-function Modal({ isOpen, children }) {
-  return isOpen ? (
-    <div className="modal-overlay">
-      <div className="modal-content">
-        {children}
-        <button onClick={onClose}>Close</button>
-      </div>
-    </div>
-  ) : null;
-}
-
-// VIOLATION: Dropdown doesn't return focus on close
-function Dropdown() {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <div>
-      <button onClick={() => setIsOpen(true)}>Open</button>
-      {isOpen && (
-        <ul>
-          <li onClick={() => setIsOpen(false)}>Option 1</li>
-          {/* Focus lost when dropdown closes */}
-        </ul>
-      )}
-    </div>
-  );
-}
-```
-
-### Poor Focus Visibility
-
-```css
-/* VIOLATION: Focus removed entirely */
-*:focus {
-  outline: none;
-}
-
-/* VIOLATION: Focus invisible on dark backgrounds */
-button:focus {
-  outline: 1px solid #333;
-}
-
-/* VIOLATION: Focus style same as hover */
-button:hover,
-button:focus {
-  background: #eee;
-}
-```
-
-### Illogical Tab Order
-
-```tsx
-// VIOLATION: tabIndex breaks natural order
-<div>
-  <input tabIndex={3} placeholder="Third" />
-  <input tabIndex={1} placeholder="First" />
-  <input tabIndex={2} placeholder="Second" />
-</div>
-
-// VIOLATION: Positive tabIndex on many elements
-<nav>
-  <a href="/" tabIndex={1}>Home</a>
-  <a href="/about" tabIndex={2}>About</a>
-  <a href="/contact" tabIndex={3}>Contact</a>
-</nav>
-```
-
----
-
-## ARIA Violations
-
-### Missing Labels
-
-```tsx
-// VIOLATION: Icon button without accessible name
-<button onClick={handleClose}>
-  <CloseIcon />
-</button>
-
-// VIOLATION: Input without label
-<input type="text" placeholder="Search" />
-
-// VIOLATION: Image without alt
-<img src="/logo.png" />
-
-// VIOLATION: Link without text
-<a href="/profile">
-  <Avatar src={user.avatar} />
-</a>
-```
-
-### Incorrect ARIA Usage
-
-```tsx
-// VIOLATION: role="button" on already-button element
-<button role="button" onClick={handleClick}>Submit</button>
-
-// VIOLATION: aria-hidden on focusable element
-<button aria-hidden="true" onClick={handleClick}>
-  Hidden but focusable
-</button>
-
-// VIOLATION: Missing required ARIA attributes
-<div role="slider">
-  {/* Missing aria-valuenow, aria-valuemin, aria-valuemax */}
-</div>
-
-// VIOLATION: aria-label duplicating visible text
-<button aria-label="Submit form">Submit form</button>
-```
-
-### Overuse of ARIA
-
-```tsx
-// VIOLATION: ARIA where semantic HTML suffices
-<div role="navigation" aria-label="Main navigation">
-  <div role="list">
-    <div role="listitem">
-      <div role="link" onClick={() => navigate('/')}>Home</div>
-    </div>
-  </div>
-</div>
-
-// Should be:
-<nav aria-label="Main">
-  <ul>
-    <li><a href="/">Home</a></li>
-  </ul>
-</nav>
-```
-
----
-
-## Color and Contrast Violations
-
-### Insufficient Contrast
-
-```css
-/* VIOLATION: Light gray on white (1.5:1 ratio) */
-.muted-text {
-  color: #aaa;
-  background: #fff;
-}
-
-/* VIOLATION: Placeholder text too light */
-input::placeholder {
-  color: #ccc;
-}
-
-/* VIOLATION: Disabled state invisible */
-button:disabled {
-  color: #eee;
-  background: #f5f5f5;
-}
-```
-
-### Color-Only Information
-
-```tsx
-// VIOLATION: Status only indicated by color
-<span style={{ color: status === 'error' ? 'red' : 'green' }}>
-  {status}
-</span>
-
-// VIOLATION: Required fields only marked red
-<label style={{ color: required ? 'red' : 'inherit' }}>
-  {label}
-</label>
-
-// VIOLATION: Chart using only color to differentiate data
-<LineChart>
-  <Line stroke="red" data={series1} />
-  <Line stroke="blue" data={series2} />
-  {/* No pattern, icon, or label differentiation */}
-</LineChart>
-```
-
----
-
-## Form Violations
-
-### Missing Error Association
-
-```tsx
-// VIOLATION: Error not associated with input
-<div>
-  <input id="email" type="email" />
-  {error && <span className="error">{error}</span>}
-</div>
-
-// VIOLATION: Error not announced to screen readers
-<div>
-  <input aria-invalid={!!error} />
-  {error && <div className="error-message">{error}</div>}
-</div>
-```
-
-### Placeholder as Label
-
-```tsx
-// VIOLATION: Placeholder disappears, no persistent label
-<input placeholder="Email address" />
-
-// VIOLATION: Floating label without visible label initially
-function FloatingInput({ label }) {
-  const [value, setValue] = useState('');
-  return (
-    <div>
-      <input
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-      />
-      <label className={value ? 'floating' : 'hidden'}>{label}</label>
-    </div>
-  );
-}
-```
-
-### Form Not Keyboard Navigable
-
-```tsx
-// VIOLATION: Custom select not keyboard accessible
-function CustomSelect({ options, value, onChange }) {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <div className="select" onClick={() => setIsOpen(!isOpen)}>
-      <span>{value}</span>
-      {isOpen && (
-        <ul className="options">
-          {options.map(opt => (
-            <li onClick={() => onChange(opt)}>{opt}</li>
-          ))}
-        </ul>
-      )}
-    </div>
-  );
-}
-```
-
----
-
-## Motion and Animation Violations
-
-### No Reduced Motion Support
-
-```css
-/* VIOLATION: Animation ignores user preference */
-.hero {
-  animation: slideIn 1s ease-in-out;
-}
-
-@keyframes slideIn {
-  from { transform: translateY(100%); }
-  to { transform: translateY(0); }
-}
-```
-
-### Autoplay Without Pause
-
-```tsx
-// VIOLATION: Video autoplays without pause control
-<video autoPlay loop muted>
-  <source src="/background.mp4" />
-</video>
-
-// VIOLATION: Carousel auto-advances without pause
-function Carousel({ slides }) {
-  useEffect(() => {
-    const interval = setInterval(nextSlide, 3000);
-    return () => clearInterval(interval);
-  }, []);
-  // No pause on hover or focus
-}
-```
-
-### Flashing Content
-
-```css
-/* VIOLATION: Flash rate > 3 per second */
-@keyframes flash {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0; }
-}
-.alert {
-  animation: flash 0.2s infinite;
-}
-```
-
----
-
-## Touch Target Violations
-
-### Small Touch Targets
-
-```css
-/* VIOLATION: Icon buttons too small */
-.icon-btn {
-  width: 24px;
-  height: 24px;
-  padding: 4px;
-}
-
-/* VIOLATION: Inline links with no padding */
-.inline-link {
-  /* Natural text height only */
-}
-
-/* VIOLATION: Close button in corner */
-.modal-close {
-  position: absolute;
-  top: 4px;
-  right: 4px;
-  width: 16px;
-  height: 16px;
-}
-```
-
-### Targets Too Close Together
-
-```tsx
-// VIOLATION: Adjacent small targets
-<div className="button-group">
-  <button className="icon-btn">A</button>
-  <button className="icon-btn">B</button>
-  <button className="icon-btn">C</button>
-  {/* No spacing between 24px buttons */}
-</div>
-```
-
----
-
-## Screen Reader Violations
-
-### Hidden Important Content
-
-```tsx
-// VIOLATION: Visually hidden but important content
-<span className="sr-only">
-  Loading... {/* Never announced because sr-only wrong implementation */}
-</span>
-
-// VIOLATION: aria-hidden on important element
-<main aria-hidden="true">
-  {/* Page content hidden from AT */}
-</main>
-```
-
-### Meaningless Link Text
-
-```tsx
-// VIOLATION: Generic link text
-<p>
-  To learn more about our services, <a href="/services">click here</a>.
-</p>
-
-// VIOLATION: Repeated "Read more" links
-{posts.map(post => (
-  <article>
-    <h2>{post.title}</h2>
-    <p>{post.excerpt}</p>
-    <a href={post.url}>Read more</a>
-  </article>
-))}
-```
-
-### Missing Page Structure
-
-```tsx
-// VIOLATION: No landmark regions
-function App() {
-  return (
-    <div>
-      <div className="header">...</div>
-      <div className="sidebar">...</div>
-      <div className="content">...</div>
-      <div className="footer">...</div>
-    </div>
-  );
-}
-
-// VIOLATION: Skipped heading levels
-<h1>Page Title</h1>
-<h3>Section</h3>  {/* h2 skipped */}
-<h5>Subsection</h5>  {/* h4 skipped */}
-```

package/plugins/devflow-implement/skills/frontend-design/SKILL.md

@@ -1,254 +0,0 @@
----
-name: frontend-design
-description: This skill should be used when the user asks to "design a component", "pick colors", "improve typography", "fix spacing", "choose a layout", or discusses visual design, CSS, styling decisions, or responsive interfaces. Provides patterns for typography scales, color systems, spacing, and production-grade UI design.
-user-invocable: false
-allowed-tools: Read, Grep, Glob
-activation:
-  file-patterns:
-    - "**/*.tsx"
-    - "**/*.jsx"
-    - "**/*.css"
-    - "**/*.scss"
-    - "**/tailwind.config.*"
-  exclude:
-    - "node_modules/**"
-    - "**/*.test.*"
-    - "**/*.spec.*"
----
-
-# Frontend Design Patterns
-
-Reference for intentional visual design, following Anthropic's 4 Dimensions framework. Focus on deliberate aesthetic choices over default slop.
-
-## Iron Law
-
-> **AESTHETICS MUST HAVE INTENT**
->
-> Every visual choice must be justified. Default styles, copied gradients, and
-> "looks modern" are not justifications. If you cannot explain why a specific
-> font, color, or animation exists, it's design debt. Good design is invisible
-> because it serves purpose, not because it copies trends.
-
-## When This Skill Activates
-
-- Creating or styling UI components
-- Reviewing CSS, Tailwind, or styled-components
-- Discussing typography, color schemes, or layouts
-- Building design systems or component libraries
-- Evaluating visual consistency
-
----
-
-## 1. Typography Intent
-
-### Font Personality Must Match Product
-
-```css
-/* CORRECT: Deliberate choice with rationale */
-/* Product: Developer documentation - needs readability */
-font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
-
-/* VIOLATION: Inter because "everyone uses it" */
-font-family: 'Inter', sans-serif; /* Why? What does it communicate? */
-```
-
-### Clear Hierarchy
-
-```css
-/* CORRECT: Distinct visual hierarchy */
-.heading-1 { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.02em; }
-.heading-2 { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.01em; }
-.body { font-size: 1rem; font-weight: 400; line-height: 1.6; }
-.caption { font-size: 0.875rem; font-weight: 400; color: var(--text-muted); }
-
-/* VIOLATION: No hierarchy - everything similar */
-.text { font-size: 1rem; }
-.text-big { font-size: 1.1rem; }
-```
-
-### Line Height Tuning
-
-```css
-/* CORRECT: Context-appropriate line height */
-.heading { line-height: 1.2; }  /* Tight for short headings */
-.body { line-height: 1.6; }     /* Comfortable for reading */
-.code { line-height: 1.4; }     /* Balanced for code */
-
-/* VIOLATION: Universal line height */
-* { line-height: 1.5; }
-```
-
----
-
-## 2. Color and Theme
-
-### Deliberate Palette
-
-```css
-/* CORRECT: Semantic color system with clear purpose */
-:root {
-  --color-primary: #0066cc;     /* Actions, links - trust/stability */
-  --color-success: #0a6640;     /* Positive outcomes */
-  --color-warning: #b35900;     /* Attention needed */
-  --color-error: #c41e3a;       /* Errors, destructive */
-  --color-neutral-900: #1a1a1a; /* Primary text */
-  --color-neutral-500: #6b7280; /* Secondary text */
-  --color-neutral-100: #f5f5f5; /* Backgrounds */
-}
-
-/* VIOLATION: Random hex values without system */
-.button { background: #4f46e5; }
-.link { color: #3b82f6; }
-.alert { background: #ef4444; }
-```
-
-### Light/Dark as First-Class
-
-```css
-/* CORRECT: Design for both modes intentionally */
-:root {
-  --bg-primary: #ffffff;
-  --text-primary: #1a1a1a;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg-primary: #0f0f0f;
-    --text-primary: #f5f5f5;
-  }
-}
-
-/* VIOLATION: Dark mode as afterthought */
-.dark-mode { filter: invert(1); }
-```
-
----
-
-## 3. Motion and Animation
-
-### State Communication
-
-```css
-/* CORRECT: Animation communicates state change */
-.button {
-  transition: transform 0.1s ease-out, background 0.15s ease;
-}
-.button:active {
-  transform: scale(0.98); /* Feedback: "I received your click" */
-}
-
-/* VIOLATION: Animation for decoration */
-.button {
-  animation: pulse 2s infinite; /* Why is it pulsing? */
-}
-```
-
-### Consistent Timing
-
-```css
-/* CORRECT: Timing scale for consistency */
-:root {
-  --duration-fast: 100ms;   /* Micro-interactions */
-  --duration-normal: 200ms; /* Standard transitions */
-  --duration-slow: 300ms;   /* Complex animations */
-  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-/* VIOLATION: Random durations */
-.modal { transition: 0.35s; }
-.dropdown { transition: 0.2s; }
-.tooltip { transition: 0.15s; }
-```
-
-### Appropriate Duration
-
-| Element | Duration | Rationale |
-|---------|----------|-----------|
-| Hover states | 100-150ms | Immediate feedback |
-| Dropdowns | 150-200ms | Quick but perceptible |
-| Modals | 200-300ms | Significant context change |
-| Page transitions | 300-500ms | Major navigation |
-
----
-
-## 4. Spatial Composition
-
-### Consistent Spacing Scale
-
-```css
-/* CORRECT: Mathematical spacing system */
-:root {
-  --space-1: 0.25rem;  /* 4px */
-  --space-2: 0.5rem;   /* 8px */
-  --space-3: 0.75rem;  /* 12px */
-  --space-4: 1rem;     /* 16px */
-  --space-6: 1.5rem;   /* 24px */
-  --space-8: 2rem;     /* 32px */
-  --space-12: 3rem;    /* 48px */
-}
-
-/* VIOLATION: Magic numbers */
-.card { padding: 18px 22px; margin-bottom: 13px; }
-```
-
-### Whitespace With Purpose
-
-```css
-/* CORRECT: Whitespace creates visual grouping */
-.section { margin-bottom: var(--space-12); }
-.section-header { margin-bottom: var(--space-6); }
-.paragraph { margin-bottom: var(--space-4); }
-
-/* VIOLATION: Uniform spacing (no hierarchy) */
-* + * { margin-top: 1rem; }
-```
-
----
-
-## AI Slop Detection
-
-Flag these patterns - they indicate thoughtless defaults:
-
-| Pattern | Problem |
-|---------|---------|
-| Purple-to-pink gradient | Copied from templates without brand justification |
-| `font-family: Inter` without rationale | Default choice, not intentional |
-| Everything centered | No visual hierarchy or flow |
-| `rounded-xl` on everything | Border radius should vary by context |
-| Shadows on everything | Elevation should be meaningful |
-| Generic "hero section" with gradient | Template copy, not designed |
-| `animate-pulse` on buttons | Meaningless attention grab |
-| Glassmorphism everywhere | Trend following, not purpose |
-
----
-
-## Extended References
-
-For additional patterns and examples:
-- `references/violations.md` - Extended design anti-patterns
-- `references/patterns.md` - Extended correct patterns
-- `references/detection.md` - Grep patterns for finding issues
-
----
-
-## Severity Guidelines
-
-| Severity | Criteria |
-|----------|----------|
-| CRITICAL | No design system (random values everywhere) |
-| HIGH | Inconsistent spacing/typography, broken dark mode |
-| MEDIUM | Missing hover states, poor visual hierarchy |
-| LOW | Could improve animation timing, minor inconsistencies |
-
----
-
-## Checklist
-
-- [ ] Typography choices have documented rationale
-- [ ] Color palette is semantic (not arbitrary hex)
-- [ ] Dark/light modes both intentionally designed
-- [ ] Spacing follows consistent scale
-- [ ] Animations communicate state (not decoration)
-- [ ] No "AI slop" patterns present
-- [ ] Visual hierarchy is clear
-- [ ] Responsive behavior is intentional