mirror of
https://github.com/RooVetGit/Roo-Code.git
synced 2026-08-28 05:27:24 +00:00
881 lines
No EOL
26 KiB
XML
881 lines
No EOL
26 KiB
XML
<complete_extraction_examples>
|
|
<overview>
|
|
Examples of both documentation extraction and verification workflows demonstrating flexible discovery methods and comprehensive UI/UX analysis.
|
|
</overview>
|
|
|
|
<example name="authentication_system_extraction">
|
|
<scenario>
|
|
Extract comprehensive documentation for a JWT-based authentication system, including technical implementation, UI/UX elements, and user workflows.
|
|
</scenario>
|
|
|
|
<workflow>
|
|
<step number="1">
|
|
<description>Initialize and discover feature using flexible methods</description>
|
|
<tool_use><![CDATA[
|
|
<!-- Method 1: Directory exploration -->
|
|
<list_files>
|
|
<path>src</path>
|
|
<recursive>false</recursive>
|
|
</list_files>
|
|
]]></tool_use>
|
|
<analysis>Look for auth-related directories like auth/, authentication/, or security/</analysis>
|
|
<tool_use><![CDATA[
|
|
<list_files>
|
|
<path>src/auth</path>
|
|
<recursive>true</recursive>
|
|
</list_files>
|
|
]]></tool_use>
|
|
<expected_findings>
|
|
- Auth controllers, services, middleware, models, and routes
|
|
- Login components and forms
|
|
- Session management UI
|
|
</expected_findings>
|
|
</step>
|
|
|
|
<step number="2">
|
|
<description>Analyze code structure and architecture</description>
|
|
<tool_use><![CDATA[
|
|
<list_code_definition_names>
|
|
<path>src/auth</path>
|
|
</list_code_definition_names>
|
|
]]></tool_use>
|
|
<analysis>
|
|
- Identify main classes/functions
|
|
- Map authentication flow
|
|
- Find token generation/validation logic
|
|
- Locate UI components
|
|
</analysis>
|
|
</step>
|
|
|
|
<step number="3">
|
|
<description>Read core implementation files</description>
|
|
<tool_use><![CDATA[
|
|
<read_file>
|
|
<args>
|
|
<file>
|
|
<path>src/auth/auth.controller.ts</path>
|
|
</file>
|
|
<file>
|
|
<path>src/auth/auth.service.ts</path>
|
|
</file>
|
|
<file>
|
|
<path>src/auth/jwt.strategy.ts</path>
|
|
</file>
|
|
<file>
|
|
<path>src/auth/auth.guard.ts</path>
|
|
</file>
|
|
<file>
|
|
<path>src/models/user.model.ts</path>
|
|
</file>
|
|
</args>
|
|
</read_file>
|
|
]]></tool_use>
|
|
</step>
|
|
|
|
<step number="4">
|
|
<description>UI/UX Analysis - Discover UI components</description>
|
|
<tool_use><![CDATA[
|
|
<!-- Method 2: Pattern search for UI components -->
|
|
<search_files>
|
|
<path>src/components</path>
|
|
<regex>(Login|Auth|Session|Password).*\.(tsx?|jsx?)</regex>
|
|
<file_pattern>*.tsx</file_pattern>
|
|
</search_files>
|
|
]]></tool_use>
|
|
<tool_use><![CDATA[
|
|
<read_file>
|
|
<args>
|
|
<file>
|
|
<path>src/components/LoginForm.tsx</path>
|
|
</file>
|
|
<file>
|
|
<path>src/components/SessionManager.tsx</path>
|
|
</file>
|
|
<file>
|
|
<path>src/components/PasswordReset.tsx</path>
|
|
</file>
|
|
</args>
|
|
</read_file>
|
|
]]></tool_use>
|
|
</step>
|
|
|
|
<step number="5">
|
|
<description>UI/UX Analysis - Map user interactions</description>
|
|
<tool_use><![CDATA[
|
|
<search_files>
|
|
<path>src/components</path>
|
|
<regex>onClick|onSubmit|onChange|handleSubmit|validate</regex>
|
|
</search_files>
|
|
]]></tool_use>
|
|
<analysis>
|
|
- Form validation patterns
|
|
- User feedback mechanisms
|
|
- Error handling UI
|
|
- Loading states
|
|
</analysis>
|
|
</step>
|
|
|
|
<step number="6">
|
|
<description>UI/UX Analysis - Visual patterns and accessibility</description>
|
|
<tool_use><![CDATA[
|
|
<search_files>
|
|
<path>src</path>
|
|
<regex>className=|style=|theme\.|aria-|role=</regex>
|
|
<file_pattern>*.tsx</file_pattern>
|
|
</search_files>
|
|
]]></tool_use>
|
|
<tool_use><![CDATA[
|
|
<search_files>
|
|
<path>src/styles</path>
|
|
<regex>\.login|\.auth|\.session</regex>
|
|
<file_pattern>*.css</file_pattern>
|
|
</search_files>
|
|
]]></tool_use>
|
|
</step>
|
|
|
|
<step number="7">
|
|
<description>Extract API endpoints and configuration</description>
|
|
<tool_use><![CDATA[
|
|
<search_files>
|
|
<path>src/auth</path>
|
|
<regex>@(Post|Get)\(['"]\/auth\/[^'"]+['"]|router\.(post|get)\(['"]\/auth\/[^'"]+['"]</regex>
|
|
</search_files>
|
|
]]></tool_use>
|
|
<tool_use><![CDATA[
|
|
<search_files>
|
|
<path>src</path>
|
|
<regex>JWT_SECRET|JWT_EXPIRATION|AUTH_.*|process\.env\.\w*AUTH\w*</regex>
|
|
</search_files>
|
|
]]></tool_use>
|
|
</step>
|
|
|
|
<step number="8">
|
|
<description>Optional: Use semantic search for deeper insights</description>
|
|
<tool_use><![CDATA[
|
|
<!-- Only if pattern searches miss important context -->
|
|
<codebase_search>
|
|
<query>authentication error handling user feedback messages</query>
|
|
</codebase_search>
|
|
]]></tool_use>
|
|
<note>Used when specific patterns don't capture all relevant error handling</note>
|
|
</step>
|
|
|
|
<step number="9">
|
|
<description>Create comprehensive extraction report</description>
|
|
<tool_use><![CDATA[
|
|
<write_to_file>
|
|
<path>EXTRACTION-authentication-system.md</path>
|
|
<content>
|
|
# Authentication System - Feature Extraction Report
|
|
|
|
## Executive Summary
|
|
The authentication system is a JWT-based security implementation that handles user registration, login, session management, and access control. It provides a comprehensive user experience with visual feedback, accessibility features, and robust error handling.
|
|
|
|
## UI/UX Analysis
|
|
|
|
### User Interface Components
|
|
|
|
#### 1. Login Page (`src/components/LoginForm.tsx`)
|
|
**Visual Layout:**
|
|
- Centered card design with shadow (400px width)
|
|
- Company logo at top
|
|
- Form fields with floating labels
|
|
- Primary blue theme (#1976d2)
|
|
|
|
**Interactive Elements:**
|
|
- Email input field
|
|
- Real-time validation (regex: /^[^\s@]+@[^\s@]+\.[^\s@]+$/)
|
|
- Error state: Red border and helper text
|
|
- Success state: Green checkmark icon
|
|
- Password field
|
|
- Show/hide toggle button (eye icon)
|
|
- Minimum 8 characters validation
|
|
- Caps lock warning indicator
|
|
- "Remember me" checkbox with 30-day persistence
|
|
- "Forgot password?" link (underlined on hover)
|
|
- Submit button
|
|
- Disabled state: Gray background until valid input
|
|
- Loading state: Spinner replaces text
|
|
- Success state: Checkmark animation
|
|
|
|
**User Feedback:**
|
|
- Loading overlay with spinner during authentication
|
|
- Error messages appear with slide-down animation
|
|
- Success toast notification (3s duration)
|
|
- Form shake animation on error
|
|
|
|
#### 2. Registration Form (`src/components/RegisterForm.tsx`)
|
|
**Multi-Step Design:**
|
|
- Progress bar showing 3 steps
|
|
- Smooth slide transitions between steps
|
|
- Back/Next navigation buttons
|
|
|
|
**Step 1 - Account Info:**
|
|
- Email field with async availability check
|
|
- Password field with strength meter (5 levels)
|
|
- Password confirmation with match validation
|
|
|
|
**Step 2 - Personal Info:**
|
|
- First/Last name fields
|
|
- Optional phone with format mask
|
|
- Country dropdown with flag icons
|
|
|
|
**Step 3 - Terms & Submit:**
|
|
- Terms of service scrollable text
|
|
- Privacy policy link (opens modal)
|
|
- Checkbox required for submission
|
|
- Review summary before final submit
|
|
|
|
**Visual Feedback:**
|
|
- Field validation on blur
|
|
- Progress saved in localStorage
|
|
- Success confetti animation
|
|
- Auto-redirect countdown (5s)
|
|
|
|
#### 3. Session Management (`src/components/SessionManager.tsx`)
|
|
**Device List UI:**
|
|
- Card-based layout for each session
|
|
- Device icons (FontAwesome)
|
|
- fa-mobile for mobile
|
|
- fa-desktop for desktop
|
|
- fa-tablet for tablet
|
|
- Information displayed:
|
|
- Device name and browser
|
|
- IP address (partially masked)
|
|
- Last active (relative time)
|
|
- Location (city, country)
|
|
|
|
**Interactive Features:**
|
|
- Current device highlighted with blue border
|
|
- Hover state shows "Revoke" button
|
|
- Confirmation modal with device details
|
|
- Bulk selection with checkboxes
|
|
- "Revoke All" with double confirmation
|
|
|
|
### User Experience Elements
|
|
|
|
#### Visual Patterns
|
|
**Theme System:**
|
|
```css
|
|
--primary-color: #1976d2;
|
|
--error-color: #d32f2f;
|
|
--success-color: #388e3c;
|
|
--warning-color: #f57c00;
|
|
--text-primary: rgba(0, 0, 0, 0.87);
|
|
--text-secondary: rgba(0, 0, 0, 0.6);
|
|
```
|
|
|
|
**Animations:**
|
|
- Page transitions: 300ms ease-in-out
|
|
- Button hover: scale(1.02)
|
|
- Error shake: 0.5s horizontal
|
|
- Success checkmark: SVG path animation
|
|
- Loading spinner: 1s rotation
|
|
|
|
**Responsive Breakpoints:**
|
|
- Mobile: < 768px (single column)
|
|
- Tablet: 768px - 1024px
|
|
- Desktop: > 1024px
|
|
|
|
#### Accessibility Features
|
|
**Keyboard Navigation:**
|
|
- Tab order follows visual flow
|
|
- Enter key submits forms
|
|
- Escape closes modals
|
|
- Arrow keys in dropdowns
|
|
|
|
**Screen Reader Support:**
|
|
- ARIA labels on all inputs
|
|
- Live regions for errors
|
|
- Role attributes for custom components
|
|
- Descriptive button text
|
|
|
|
**Visual Accessibility:**
|
|
- 4.5:1 contrast ratio minimum
|
|
- Focus indicators (2px outline)
|
|
- Error icons for colorblind users
|
|
- Scalable fonts (rem units)
|
|
|
|
### User Workflows
|
|
|
|
#### 1. First-Time Registration
|
|
```
|
|
Start → Landing Page → "Get Started" CTA
|
|
↓
|
|
Registration Form (Step 1)
|
|
→ Email validation (async)
|
|
→ Password strength check
|
|
→ Real-time feedback
|
|
↓
|
|
Personal Info (Step 2)
|
|
→ Optional fields clearly marked
|
|
→ Format validation
|
|
↓
|
|
Terms Agreement (Step 3)
|
|
→ Must scroll to enable checkbox
|
|
→ Review summary
|
|
↓
|
|
Submit → Loading → Success
|
|
→ Confetti animation
|
|
→ Welcome email sent
|
|
→ Auto-redirect (5s)
|
|
↓
|
|
Dashboard (First-time tour)
|
|
```
|
|
|
|
#### 2. Returning User Login
|
|
```
|
|
Start → Login Page
|
|
↓
|
|
Enter Credentials
|
|
→ Email autocomplete
|
|
→ Password manager integration
|
|
→ "Remember me" option
|
|
↓
|
|
Submit → Loading (avg 1.2s)
|
|
↓
|
|
Success → Dashboard
|
|
OR
|
|
Error → Inline feedback
|
|
→ Retry with guidance
|
|
→ "Forgot password?" option
|
|
```
|
|
|
|
#### 3. Password Reset Flow
|
|
```
|
|
Login Page → "Forgot password?"
|
|
↓
|
|
Modal Dialog
|
|
→ Email input
|
|
→ Captcha (if multiple attempts)
|
|
↓
|
|
Submit → "Check email" message
|
|
↓
|
|
Email Received (< 1 min)
|
|
→ Secure link (1hr expiry)
|
|
↓
|
|
Reset Page
|
|
→ New password requirements shown
|
|
→ Strength meter
|
|
→ Confirmation field
|
|
↓
|
|
Submit → Success → Login redirect
|
|
```
|
|
|
|
## Technical Details
|
|
|
|
### Core Components
|
|
1. **AuthController** (`src/auth/auth.controller.ts`)
|
|
- REST endpoints with validation decorators
|
|
- Rate limiting middleware
|
|
- CORS configuration
|
|
|
|
2. **AuthService** (`src/auth/auth.service.ts`)
|
|
- JWT token generation/validation
|
|
- Bcrypt password hashing
|
|
- Session management logic
|
|
|
|
3. **Security Implementation**
|
|
- JWT RS256 algorithm
|
|
- Refresh token rotation
|
|
- CSRF double-submit cookies
|
|
- XSS protection headers
|
|
|
|
### API Endpoints
|
|
| Method | Endpoint | Description | Rate Limit |
|
|
|--------|----------|-------------|------------|
|
|
| POST | /auth/register | New user registration | 3/hour |
|
|
| POST | /auth/login | User authentication | 5/min |
|
|
| POST | /auth/refresh | Token refresh | 10/min |
|
|
| POST | /auth/logout | Session termination | None |
|
|
| GET | /auth/profile | Current user data | None |
|
|
| POST | /auth/reset-password | Password reset | 3/hour |
|
|
|
|
### Configuration
|
|
```env
|
|
# Required
|
|
JWT_SECRET=minimum-32-character-secret
|
|
DATABASE_URL=postgresql://...
|
|
|
|
# Optional with defaults
|
|
JWT_EXPIRATION=15m
|
|
REFRESH_TOKEN_EXPIRATION=7d
|
|
BCRYPT_ROUNDS=10
|
|
SESSION_MAX_AGE=30d
|
|
MAX_SESSIONS_PER_USER=5
|
|
```
|
|
|
|
## Non-Technical Information
|
|
|
|
### Business Rules
|
|
1. **Account Creation**
|
|
- Unique email required
|
|
- Password: 8+ chars, mixed case, number, special
|
|
- Email verification within 24 hours
|
|
- Terms acceptance mandatory
|
|
|
|
2. **Session Management**
|
|
- Max 5 concurrent sessions
|
|
- Idle timeout: 30 minutes
|
|
- Absolute timeout: 7 days
|
|
- Device trust for 30 days
|
|
|
|
3. **Security Policies**
|
|
- Account lockout: 5 failed attempts (15 min)
|
|
- Password history: Last 3 not reusable
|
|
- 2FA optional but recommended
|
|
- Suspicious login notifications
|
|
|
|
### Common User Scenarios
|
|
|
|
#### Mobile Experience
|
|
- Touch-optimized buttons (44px min)
|
|
- Biometric login (Face ID/Touch ID)
|
|
- Simplified navigation menu
|
|
- Offline detection with retry
|
|
- Push notification for new sessions
|
|
|
|
#### Error Recovery
|
|
- Network timeout: Auto-retry with backoff
|
|
- Session expired: Smooth re-login flow
|
|
- Form errors: Contextual help text
|
|
- Server errors: Friendly messages with support link
|
|
|
|
### Performance Metrics
|
|
- Login response: 200ms (p50), 500ms (p95)
|
|
- Page load: 1.2s (3G), 400ms (4G)
|
|
- Token validation: < 10ms
|
|
- Session check: < 50ms
|
|
|
|
## Documentation Recommendations
|
|
|
|
### Critical Areas for User Documentation
|
|
1. **Getting Started Guide**
|
|
- Screenshots of each registration step
|
|
- Common email provider settings
|
|
- Password manager setup
|
|
|
|
2. **Troubleshooting Section**
|
|
- "Why can't I log in?" flowchart
|
|
- Browser compatibility matrix
|
|
- Cookie/JavaScript requirements
|
|
|
|
3. **Security Best Practices**
|
|
- How to spot phishing attempts
|
|
- Importance of unique passwords
|
|
- When to revoke sessions
|
|
|
|
### Developer Integration Guide
|
|
1. **API Authentication**
|
|
- Bearer token format
|
|
- Refresh token flow diagram
|
|
- Error response examples
|
|
|
|
2. **SDK Examples**
|
|
- JavaScript/TypeScript
|
|
- Python
|
|
- Mobile (iOS/Android)
|
|
|
|
## Integration Points
|
|
- Email service for password reset and notifications
|
|
- Session storage (Redis optional, in-memory default)
|
|
- Rate limiting middleware
|
|
- CORS configuration for cross-origin requests
|
|
- Logging service for audit trails
|
|
|
|
## Summary for Documentation Team
|
|
This extraction report provides comprehensive details about the authentication system's current implementation. The system offers a complete user experience with visual feedback, accessibility features, and robust security measures. Key areas for user documentation include the multi-step registration process, session management features, and security policies. The technical implementation uses industry-standard JWT tokens with proper security measures.
|
|
</content>
|
|
<line_count>354</line_count>
|
|
</write_to_file>
|
|
]]></tool_use>
|
|
</step>
|
|
</workflow>
|
|
|
|
<key_takeaways>
|
|
<takeaway>Use flexible discovery methods - directory exploration and pattern search are primary tools</takeaway>
|
|
<takeaway>Comprehensive UI/UX analysis is essential for complete documentation</takeaway>
|
|
<takeaway>Document visual elements, interactions, and user feedback mechanisms</takeaway>
|
|
<takeaway>Include accessibility and responsive design considerations</takeaway>
|
|
<takeaway>Semantic search (codebase_search) is optional for deeper insights when needed</takeaway>
|
|
<takeaway>Organize findings to support documentation team's work</takeaway>
|
|
</key_takeaways>
|
|
</example>
|
|
|
|
<example name="documentation_verification_example">
|
|
<scenario>
|
|
Verify user-provided documentation about authentication UI/UX against the actual implementation.
|
|
</scenario>
|
|
|
|
<workflow>
|
|
<step number="1">
|
|
<description>User provides documentation to verify</description>
|
|
<user_input>
|
|
"Please verify our login documentation:
|
|
|
|
'The login form provides a seamless experience with instant validation. Users see a green checkmark when their email is valid. The password field includes a strength indicator. After 3 failed attempts, users must wait 5 minutes before trying again.'"
|
|
</user_input>
|
|
</step>
|
|
|
|
<step number="2">
|
|
<description>Analyze the documentation claims</description>
|
|
<analysis>
|
|
Claims to verify:
|
|
- Instant email validation with green checkmark
|
|
- Password strength indicator on login
|
|
- 3 failed attempts triggers 5-minute wait
|
|
</analysis>
|
|
</step>
|
|
|
|
<step number="3">
|
|
<description>Find login UI components using directory exploration</description>
|
|
<tool_use><![CDATA[
|
|
<list_files>
|
|
<path>src/components</path>
|
|
<recursive>false</recursive>
|
|
</list_files>
|
|
]]></tool_use>
|
|
<tool_use><![CDATA[
|
|
<search_files>
|
|
<path>src/components</path>
|
|
<regex>Login|SignIn|Auth.*Form</regex>
|
|
<file_pattern>*.tsx</file_pattern>
|
|
</search_files>
|
|
]]></tool_use>
|
|
</step>
|
|
|
|
<step number="4">
|
|
<description>Examine login form implementation</description>
|
|
<tool_use><![CDATA[
|
|
<read_file>
|
|
<args>
|
|
<file>
|
|
<path>src/components/LoginForm.tsx</path>
|
|
</file>
|
|
<file>
|
|
<path>src/components/LoginForm.css</path>
|
|
</file>
|
|
</args>
|
|
</read_file>
|
|
]]></tool_use>
|
|
<findings>
|
|
- Email validation exists but shows red X, not green checkmark
|
|
- No password strength indicator on login form (only on registration)
|
|
- Account lockout is after 5 attempts, not 3
|
|
- Lockout duration is 15 minutes, not 5
|
|
</findings>
|
|
</step>
|
|
|
|
<step number="5">
|
|
<description>Verify validation behavior</description>
|
|
<tool_use><![CDATA[
|
|
<search_files>
|
|
<path>src/components</path>
|
|
<regex>validateEmail|emailValid|checkmark|strength.*indicator</regex>
|
|
</search_files>
|
|
]]></tool_use>
|
|
<tool_use><![CDATA[
|
|
<search_files>
|
|
<path>src/auth</path>
|
|
<regex>failed.*attempts|lockout|rate.*limit</regex>
|
|
</search_files>
|
|
]]></tool_use>
|
|
</step>
|
|
|
|
<step number="6">
|
|
<description>Create verification report</description>
|
|
<tool_use><![CDATA[
|
|
<write_to_file>
|
|
<path>VERIFICATION-login-documentation.md</path>
|
|
<content>
|
|
# Login Documentation - Verification Report
|
|
|
|
## Overall Assessment: Needs Significant Updates
|
|
|
|
## Summary
|
|
The login documentation contains several inaccuracies about the UI/UX implementation that could confuse users and lead to poor user experience.
|
|
|
|
## Critical Inaccuracies
|
|
|
|
### 1. Email Validation Feedback
|
|
**Documentation States**: "Users see a green checkmark when their email is valid"
|
|
**Actual Implementation**: Red X icon for invalid emails, no positive feedback
|
|
- Location: `src/components/LoginForm.tsx:45-52`
|
|
- Current behavior: Only shows error states
|
|
- Missing: Success indicator implementation
|
|
- **Impact**: Users don't get positive reinforcement for correct input
|
|
|
|
### 2. Password Strength Indicator
|
|
**Documentation States**: "The password field includes a strength indicator"
|
|
**Actual Implementation**: No strength indicator on login form
|
|
- Location: Checked `src/components/LoginForm.tsx`
|
|
- Strength indicator only exists in `RegisterForm.tsx`
|
|
- Login form has basic password field only
|
|
- **Impact**: Sets incorrect user expectations
|
|
|
|
### 3. Failed Login Attempts
|
|
**Documentation States**: "After 3 failed attempts, users must wait 5 minutes"
|
|
**Actual Implementation**: 5 attempts, 15-minute lockout
|
|
- Location: `src/auth/services/auth.service.ts:234`
|
|
- Code: `MAX_LOGIN_ATTEMPTS = 5`
|
|
- Code: `LOCKOUT_DURATION = 15 * 60 * 1000 // 15 minutes`
|
|
- **Impact**: Users may be confused about actual security policy
|
|
|
|
## UI/UX Elements Found But Not Documented
|
|
|
|
### 1. Loading States
|
|
- Spinner overlay during authentication
|
|
- Button disabled state during submission
|
|
- These improve perceived performance
|
|
|
|
### 2. Remember Me Feature
|
|
- 30-day persistent session option
|
|
- Stored in secure cookie
|
|
- Not mentioned in documentation
|
|
|
|
### 3. Caps Lock Warning
|
|
- Visual indicator when caps lock is on
|
|
- Helps prevent login failures
|
|
- Important accessibility feature
|
|
|
|
## Recommendations
|
|
|
|
### Immediate Corrections Needed
|
|
1. **Email Validation**:
|
|
```
|
|
CORRECT: "The email field shows a red error icon for invalid formats. Valid emails are accepted without visual confirmation."
|
|
```
|
|
|
|
2. **Password Features**:
|
|
```
|
|
CORRECT: "The login form has a standard password field with show/hide toggle. Password strength indicators are only shown during registration."
|
|
```
|
|
|
|
3. **Security Policy**:
|
|
```
|
|
CORRECT: "After 5 failed login attempts, accounts are temporarily locked for 15 minutes to prevent brute force attacks."
|
|
```
|
|
|
|
### Suggested Additions
|
|
1. Document the loading states and visual feedback
|
|
2. Explain the "Remember Me" functionality
|
|
3. Mention the Caps Lock warning feature
|
|
4. Add screenshots of actual UI states
|
|
|
|
## Technical References
|
|
- Login Form Component: `src/components/LoginForm.tsx`
|
|
- Styles: `src/components/LoginForm.css`
|
|
- Auth Service: `src/auth/services/auth.service.ts`
|
|
- Rate Limiting: `src/middleware/rateLimiter.ts`
|
|
|
|
## Visual Discrepancies
|
|
- Documentation implies more visual feedback than implemented
|
|
- Color scheme in docs doesn't match actual theme
|
|
- Missing documentation for error message styling
|
|
|
|
## Conclusion
|
|
The documentation needs updates to accurately reflect the current login experience. The actual implementation is more security-focused (5 attempts, 15-min lockout) but less visually rich (no success indicators) than documented.
|
|
</content>
|
|
<line_count>95</line_count>
|
|
</write_to_file>
|
|
]]></tool_use>
|
|
</step>
|
|
</workflow>
|
|
|
|
<key_takeaways>
|
|
<takeaway>Always verify UI/UX claims against actual component implementation</takeaway>
|
|
<takeaway>Check both visual elements and behavioral logic</takeaway>
|
|
<takeaway>Look for undocumented features that users might expect</takeaway>
|
|
<takeaway>Provide specific corrections with code references</takeaway>
|
|
<takeaway>Consider the impact of inaccuracies on user experience</takeaway>
|
|
</key_takeaways>
|
|
</example>
|
|
|
|
<example name="api_endpoint_extraction">
|
|
<scenario>
|
|
Extract comprehensive API documentation including endpoints, request/response formats, and error handling.
|
|
</scenario>
|
|
|
|
<workflow>
|
|
<step number="1">
|
|
<description>Discover API structure using flexible methods</description>
|
|
<tool_use><![CDATA[
|
|
<!-- Method 1: Look for common API directories -->
|
|
<list_files>
|
|
<path>src</path>
|
|
<recursive>false</recursive>
|
|
</list_files>
|
|
]]></tool_use>
|
|
<tool_use><![CDATA[
|
|
<list_files>
|
|
<path>src/api</path>
|
|
<recursive>true</recursive>
|
|
</list_files>
|
|
]]></tool_use>
|
|
</step>
|
|
|
|
<step number="2">
|
|
<description>Find all API routes using pattern search</description>
|
|
<tool_use><['"`]</regex>
|
|
</search_files>
|
|
]]></tool_use>
|
|
</step>
|
|
|
|
<step number="3">
|
|
<description>Extract request validation schemas</description>
|
|
<tool_use><![CDATA[
|
|
<search_files>
|
|
<path>src</path>
|
|
<regex>@(Body|Query|Param|Headers)\(|joi\.object|yup\.object|zod\.object</regex>
|
|
</search_files>
|
|
]]></tool_use>
|
|
</step>
|
|
|
|
<step number="4">
|
|
<description>Analyze error handling and responses</description>
|
|
<tool_use><![CDATA[
|
|
<search_files>
|
|
<path>src</path>
|
|
<regex>@ApiResponse|response\.status\(|res\.status\(|throw new.*Error</regex>
|
|
</search_files>
|
|
]]></tool_use>
|
|
</step>
|
|
|
|
<step number="5">
|
|
<description>Optional: Semantic search for middleware and auth</description>
|
|
<tool_use><![CDATA[
|
|
<!-- Use when pattern search might miss complex middleware chains -->
|
|
<codebase_search>
|
|
<query>API middleware authentication authorization guards</query>
|
|
</codebase_search>
|
|
]]></tool_use>
|
|
</step>
|
|
|
|
<step number="6">
|
|
<description>Generate API extraction report</description>
|
|
<output>
|
|
- Complete endpoint inventory with methods and paths
|
|
- Request/response schemas with examples
|
|
- Authentication requirements per endpoint
|
|
- Rate limiting and throttling rules
|
|
- Error response formats and codes
|
|
- API versioning strategy
|
|
</output>
|
|
</step>
|
|
</workflow>
|
|
</example>
|
|
|
|
<example name="ui_component_library_extraction">
|
|
<scenario>
|
|
Document a React component library including props, styling, accessibility, and usage patterns.
|
|
</scenario>
|
|
|
|
<workflow>
|
|
<step number="1">
|
|
<description>Discover component structure</description>
|
|
<tool_use><![CDATA[
|
|
<list_files>
|
|
<path>src/components</path>
|
|
<recursive>true</recursive>
|
|
</list_files>
|
|
]]></tool_use>
|
|
</step>
|
|
|
|
<step number="2">
|
|
<description>Analyze component interfaces and props</description>
|
|
<tool_use><![CDATA[
|
|
<search_files>
|
|
<path>src/components</path>
|
|
<regex>interface\s+\w+Props|type\s+\w+Props|export\s+(default\s+)?function|export\s+const</regex>
|
|
<file_pattern>*.tsx</file_pattern>
|
|
</search_files>
|
|
]]></tool_use>
|
|
</step>
|
|
|
|
<step number="3">
|
|
<description>Extract styling and theme usage</description>
|
|
<tool_use><![CDATA[
|
|
<search_files>
|
|
<path>src/components</path>
|
|
<regex>styled\.|makeStyles|className=|sx=|css=</regex>
|
|
</search_files>
|
|
]]></tool_use>
|
|
</step>
|
|
|
|
<step number="4">
|
|
<description>Document accessibility features</description>
|
|
<tool_use><![CDATA[
|
|
<search_files>
|
|
<path>src/components</path>
|
|
<regex>aria-|role=|tabIndex|alt=|htmlFor=</regex>
|
|
</search_files>
|
|
]]></tool_use>
|
|
</step>
|
|
|
|
<step number="5">
|
|
<description>Find usage examples and stories</description>
|
|
<tool_use><![CDATA[
|
|
<search_files>
|
|
<path>src</path>
|
|
<regex>\.stories\.|\.story\.|examples?/|demo/</regex>
|
|
<file_pattern>*.tsx</file_pattern>
|
|
</search_files>
|
|
]]></tool_use>
|
|
</step>
|
|
|
|
<step number="6">
|
|
<description>Create component library report</description>
|
|
<output>
|
|
- Component hierarchy and relationships
|
|
- Props documentation with types and defaults
|
|
- Styling system and customization options
|
|
- Accessibility compliance checklist
|
|
- Interactive examples and code snippets
|
|
- Best practices and anti-patterns
|
|
- Browser compatibility notes
|
|
</output>
|
|
</step>
|
|
</workflow>
|
|
</example>
|
|
|
|
<best_practices>
|
|
<practice name="flexible_discovery">
|
|
<description>Use the most appropriate discovery method</description>
|
|
<guidelines>
|
|
<guideline>Start with directory exploration for well-organized codebases</guideline>
|
|
<guideline>Use pattern search for specific syntax or naming conventions</guideline>
|
|
<guideline>Apply file-based search when you know exact locations</guideline>
|
|
<guideline>Reserve semantic search for complex conceptual queries</guideline>
|
|
</guidelines>
|
|
</practice>
|
|
|
|
<practice name="comprehensive_ui_ux_coverage">
|
|
<description>Ensure complete UI/UX documentation</description>
|
|
<checklist>
|
|
<item>Visual design and layout</item>
|
|
<item>Interactive elements and states</item>
|
|
<item>User feedback mechanisms</item>
|
|
<item>Accessibility features</item>
|
|
<item>Responsive behavior</item>
|
|
<item>Animation and transitions</item>
|
|
<item>Error states and recovery</item>
|
|
<item>Loading and progress indicators</item>
|
|
</checklist>
|
|
</practice>
|
|
|
|
<practice name="verification_thoroughness">
|
|
<description>Verify all aspects of documentation claims</description>
|
|
<checklist>
|
|
<item>Technical accuracy of code examples</item>
|
|
<item>UI element descriptions match implementation</item>
|
|
<item>User workflows reflect actual behavior</item>
|
|
<item>Configuration values are current</item>
|
|
<item>Error messages match code</item>
|
|
<item>Performance claims are realistic</item>
|
|
</checklist>
|
|
</practice>
|
|
</best_practices>
|
|
</complete_extraction_examples> |