qaflow
v0.1.0
Published
Frictionless QA for React apps. Annotate elements, auto-create GitHub Issues, export to AI coding agents.
Maintainers
softwaresheanReadme
QAFlow
Frictionless QA for React apps. Annotate elements, auto-create GitHub Issues, export to AI coding agents.
Why QAFlow?
Traditional QA tools are built for non-technical stakeholders. QAFlow is built for developers with modern AI coding workflows.
| Feature | Traditional Tools | QAFlow | |---------|-------------------|--------| | React component detection | ❌ | ✅ | | File path extraction | ❌ | ✅ | | AI agent export | ❌ | ✅ | | Auto-create GitHub Issues | Manual | ✅ API | | Self-hosted | ❌ | ✅ | | Price | $40-80/mo | Free |
Quick Start
npm install qaflow// app/layout.tsx (Next.js) or App.tsx (Vite/CRA)
import { QAFlow } from 'qaflow';
export default function Layout({ children }) {
return (
<>
{children}
{process.env.NODE_ENV === 'development' && <QAFlow />}
</>
);
}That's it! Press Alt+Q to enable QAFlow.
Usage
- Press Alt+Q to enable QAFlow
- Click "Grab Element" to enter selection mode
- Hover over elements (blue highlight shows what you'll select)
- Click to select an element
- Fill in the annotation form
- Export:
- 📋 Copy for AI → Formatted for Claude Code, Cursor, etc.
- 🐙 Create Issues → Auto-creates GitHub Issues via API
What Gets Captured
- CSS selector - Unique path to the element
- React component name - The owning component (if detectable)
- File path - Source location with line number
- Tag, classes, ID - Basic DOM info
- Text content - First 200 chars
- HTML snippet - First 500 chars
GitHub Integration
Click the GitHub icon to configure:
- Create a Personal Access Token
- Paste and verify
- Select your repository
- Click "Create Issues" → Issues created automatically
Configuration
<QAFlow
config={{
hotkey: 'KeyQ', // Alt+Q to toggle
storageKey: 'qaflow-annotations',
onAnnotationCreate: (annotation) => console.log('Created:', annotation),
}}
/>Next.js App Router
// components/QAFlowWrapper.tsx
'use client';
import dynamic from 'next/dynamic';
const QAFlow = dynamic(
() => import('qaflow').then((mod) => mod.QAFlow),
{ ssr: false }
);
export function QAFlowWrapper() {
if (process.env.NODE_ENV !== 'development') return null;
return <QAFlow />;
}// app/layout.tsx
import { QAFlowWrapper } from '@/components/QAFlowWrapper';
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<QAFlowWrapper />
</body>
</html>
);
}Keyboard Shortcuts
| Key | Action |
|-----|--------|
| Alt+Q | Toggle QAFlow |
| Escape | Cancel selection |
Roadmap
- [x] Element selection with React detection
- [x] GitHub Issues integration (API)
- [x] Copy for AI agents
- [ ] Screenshot capture
- [ ] Session management
- [ ] Browser extension
License
MIT © Shean Johnson