Prompt: Social Media Feed Infinite Scroll (FPC006)
Model: Groq-Llama4-Scout | Date: 07/16/2025 | Page Title: Social Media Feed
Prompt Description
Simulate a social media feed (like Twitter/X or Facebook) with posts and **infinite scrolling** to load more posts.
**Page Structure & Features:**
1. **Main Layout:** Header (simple title), Main content area for the feed, Footer (optional).
2. **Post Component:** Each post in the feed should display:
* User Avatar and Name.
* Post Timestamp.
* Post Content (text, maybe a placeholder for an image).
* Action buttons: 'Like' (with count, toggles `aria-pressed`), 'Comment' (no action needed), 'Share' (no action needed).
* Each post identifiable as `data-testid='feed-post-N'`.
* Like button on each post: `data-testid='like-btn-postN'`.
3. **Feed Container (`data-testid='social-feed-container'`):**
* Initially load a set of (e.g., 5-10) posts.
* **Infinite Scroll:** As the user scrolls towards the bottom of the feed container, new posts should be dynamically fetched (simulated by JS, no actual API call needed, just append more generated post elements) and added to the feed.
* A loading indicator (`data-testid='feed-loading-indicator'`) should be visible while new posts are being 'fetched' and appended.
**Technical & Accessibility Requirements:**
* Semantic HTML. Posts could be `<article>` elements.
* The infinite scroll MUST NOT break keyboard navigation or trap focus. Users should still be able to navigate through all loaded posts using the keyboard.
* New content loaded via infinite scroll should be announced to assistive technologies if possible (e.g., using an `aria-live` region that briefly states 'More posts loaded').
* The 'Like' button interaction should be fully accessible.
* The page must be responsive.
* Styling: Tailwind CSS primarily. Custom JS is essential for the infinite scroll logic, post generation, like button state, and loading indicator.
**Testing Identifiers:**
* Feed Container: `data-testid='social-feed-container'`
* An individual Post: `data-testid='feed-post-1'` (example)
* Like button on a post: `data-testid='like-btn-post1'` (example)
* Loading Indicator: `data-testid='feed-loading-indicator'`
* ARIA Live region for new content: `data-testid='feed-update-announcer'` (optional but good)
Key Links & Info
Analysis Timestamp: 07/16/2025 17:53:09
Mobile Screenshot:
Scores for this Prompt
Technical Quality
56.0 / 110.0
(50.91%)
Prompt Adherence
12.0 / 22.0
(54.55%)
Overall Weighted
53.45 %
Technical Quality Breakdown
Page Load Errors (0.0 / 0.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Page Completeness | FAIL |
Page timed out loading at desktop.
|
0.0 / 0.0 | desktop |
HTML Structure & Semantics (9.0 / 10.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| HTML Lang | PASS |
PASS
|
1.0 / 1.0 | mobile |
| Page Title | PASS |
PASS
|
1.0 / 1.0 | mobile |
| Main Tag | PASS |
PASS
|
1.0 / 1.0 | mobile |
| Nav Tag | WARN |
No visible <nav>.
|
0.0 / 1.0 | mobile |
| Footer Tag | PASS |
PASS
|
1.0 / 1.0 | mobile |
| H1 Count | PASS |
PASS
|
1.0 / 1.0 | mobile |
| Heading Order Logic | PASS |
PASS
|
1.0 / 1.0 | mobile |
| Image Alts | PASS |
PASS
|
1.0 / 1.0 | mobile |
| Form Labels | INFO |
No relevant form inputs (INFO).
{
"unlabeled_count": 0
}
|
2.0 / 2.0 | mobile |
CSS Quality (2.0 / 5.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| CSS Variables | WARN |
No :root CSS variables.
|
0.0 / 2.0 | mobile |
| Modern Layout Body/Main | INFO |
Flex/Grid not on body/main.
|
0.0 / 1.0 | mobile |
| Inline Styles | PASS |
Minimal inline styles.
|
1.0 / 1.0 | mobile |
| !important Usage | PASS |
No !important in <style> tags.
|
1.0 / 1.0 | mobile |
JavaScript Health (0.0 / 5.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| JS Console Errors | FAIL |
22 JS error(s).
[ "JS ERROR: file:///Users/jma345/Tesslate/UIGenEval/v4/all_code_outputs/fullpage_challenge/Groq-Llama4-Scout/FPC006_Social_Media_Feed_Infinite_Scroll.html 72 Error: \u003cpath\u003e attribute d: Expected arc flag (\u00270\u0027 or \u0027", "JS ERROR: file:///Users/jma345/Tesslate/UIGenEval/v4/all_code_outputs/fullpage_challenge/Groq-Llama4-Scout/FPC006_Social_Media_Feed_Infinite_Scroll.html 72 Error: \u003cpath\u003e attribute d: Expected arc flag (\u00270\u0027 or \u0027", "JS ERROR: file:///Users/jma345/Tesslate/UIGenEval/v4/all_code_outputs/fullpage_challenge/Groq-Llama4-Scout/FPC006_Social_Media_Feed_Infinite_Scroll.html 72 Error: \u003cpath\u003e attribute d: Expected arc flag (\u00270\u0027 or \u0027", "JS ERROR: file:///Users/jma345/Tesslate/UIGenEval/v4/all_code_outputs/fullpage_challenge/Groq-Llama4-Scout/FPC006_Social_Media_Feed_Infinite_Scroll.html 72 Error: \u003cpath\u003e attribute d: Expected arc flag (\u00270\u0027 or \u0027", "JS ERROR: file:///Users/jma345/Tesslate/UIGenEval/v4/all_code_outputs/fullpage_challenge/Groq-Llama4-Scout/FPC006_Social_Media_Feed_Infinite_Scroll.html 72 Error: \u003cpath\u003e attribute d: Expected arc flag (\u00270\u0027 or \u0027" ] |
0.0 / 5.0 | mobile |
Accessibility (Axe-core) (20.0 / 40.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Axe Violations | PASS |
No violations.
|
20.0 / 20.0 | mobile |
Rendered Color & Contrast (15.0 / 30.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Contrast Check Result | PASS |
All 122 instances meet WCAG AA. (0 only AA, not AAA).
|
15.0 / 15.0 | mobile |
Responsiveness (Viewport & Scroll) (10.0 / 20.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Viewport Meta Tag | PASS |
Configured correctly for responsiveness.
|
4.0 / 4.0 | mobile |
| Horizontal Scrollbar | PASS |
No horizontal scrollbar detected.
|
6.0 / 6.0 | mobile |
Prompt Adherence Breakdown
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Social Feed Container | PASS |
Element '[data-testid='social-feed-container']' present and visible.
Selector:
[data-testid='social-feed-container'] |
2.0 / 2.0 | mobile |
| Initial Posts Loaded (min 5) | PASS |
Count is 20 (Actual: 20, Expected: >= 5).
|
3.0 / 3.0 | mobile |
| Example Like Button | PASS |
Element '[data-testid^='like-btn-post']' present and visible.
Selector:
[data-testid^='like-btn-post'] |
1.0 / 1.0 | mobile |
| Loading Indicator (may be initially hidden) | FAIL |
Element '[data-testid='feed-loading-indicator']' present but NOT visible.
Selector:
[data-testid='feed-loading-indicator'] |
0.0 / 2.0 | mobile |
| Like Button Toggles ARIA | PASS |
All interaction steps/outcomes verified.
|
4.0 / 4.0 | mobile |
| Infinite Scroll Loads More Posts | FAIL |
Interaction setup failed: Unknown setup/cleanup action type: get_element_count
|
0.0 / 8.0 | mobile |
| Loading Indicator Appears During Load (Hard to test precisely) | PASS |
Custom script evaluation result: True (expected true).
Script Eval: True
|
1.0 / 1.0 | mobile |
| ARIA Live Announcer (Optional) | PASS |
Element '[data-testid='feed-update-announcer'][aria-live]' present and visible.
Selector:
[data-testid='feed-update-announcer'][aria-live] |
1.0 / 1.0 | mobile |