Portfolio Grid
Show your projects as a filterable grid, each opening into its own detail page.
What it adds
A filterable grid of project or case-study entries, each with a cover image and its own detail page.
What your agent is told to do
5
What your agent is told to do
5-
1
Give every project a cover image with fixed aspect ratio, generated server-side from whatever the author uploaded. Reuse the app's existing image processing and focal point cropping rather than trimming with CSS.
-
2
Put the active filters in the URL so the grid can be shared, bookmarked, and restored by the back button. If the app already has a filter component, extend it instead of writing grid-specific filter controls.
-
3
Give each project a real detail page at its own URL with its own title and description, not a modal overlay that vanishes on refresh.
-
4
Load images lazily below the fold and reserve their space in advance, so scrolling a long grid does not stutter or shift what the visitor is reading.
-
5
Do not rely on a draft flag in the template alone. Filter unpublished projects out in the query that builds the grid and enforce the same check on the detail page.
Edge cases it handles
8
Edge cases it handles
8- Mixed aspect ratios destroy the rhythm of a grid. Render every cover into one ratio at upload time and keep the original for the detail page.
- A filter combination that matches nothing must say so and offer a way back, ideally by showing which single filter is excluding everything rather than a bare empty grid.
- Returning from a detail page must restore the filters and the scroll position the visitor left. Losing their place after every project is the fastest way to lose them.
- A grid with dozens of projects must not request dozens of full-size images at once. Serve sized variants and load only what is near the viewport.
- Private or unfinished projects must be invisible to logged-out visitors on the grid, on the detail page, in any search index, and in the sitemap.
- Every cover image needs alt text describing the project, and the detail page needs a proper heading, because these pages get shared far more than the grid does.
- A project with no cover image needs a designed fallback tile, not an empty box or a broken image icon.
- Reordering or deleting a project must not shuffle the remaining tiles under the cursor of someone mid-scroll.
Definition of done
9
Definition of done
9- All cover images render at a single aspect ratio with reserved dimensions.
- Active filters appear in the URL and survive sharing, reload, and the back button.
- Returning from a detail page restores both filters and scroll position.
- A filter combination with no matches shows an explanatory empty state.
- Unpublished projects are absent from the grid, the detail route, search, and the sitemap.
- Off-screen images load lazily and the grid does not shift as they arrive.
- Every cover image has descriptive alt text.
- The feature matches the existing design system.
- No existing functionality is broken.
Related features
Reading Progress Bar
Reading Progress Bar
A slim bar showing how far through an article the reader has scrolled.
What it does
A thin progress indicator pinned to the top of article pages, tracking scroll through the body text.
How it works
- 1 Measure progress against the article body element only. Take the top and bottom of the prose, not the height of the document.
- 2 Recalculate the body height when the page reflows: late-loading images, expanded sections, embeds, and font swaps all change the total after first paint.
- 3 Reuse the app's existing Progress Indicator System tokens for the bar's colour and height rather than introducing a new accent, and keep it visually distinct from Route Change Progress so the two are not confused.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/reading-progress-bar
Press Kit
Press Kit
Give journalists your logos, colours, screenshots, and boilerplate on one public page.
What it does
A public page of downloadable brand assets, colour values, screenshots, and approved boilerplate copy.
How it works
- 1 Serve every asset through the app's existing file download path so that access, headers, and content types are handled the same way as everywhere else, rather than linking directly at raw storage.
- 2 Store the correct format and media type per asset and derive the filename and extension from the stored record, never from the label an author typed.
- 3 Present each logo variant on the background it is designed for, and reuse the app's theme-aware asset switching so the page shows the right variant in light and dark rather than a washed-out logo on the wrong panel.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/press-kit
FAQ Section
FAQ Section
Add an expandable list of questions and answers to any page, in the order you choose.
What it does
A reorderable set of question and answer pairs rendered as an accessible expand-collapse list on any page.
How it works
- 1 Build it on real disclosure semantics with a button that toggles its own panel, so keyboard and screen reader users get the behaviour for free.
- 2 Give every question a stable anchor derived from its text and keep it after edits, so a support reply can link straight to one answer.
- 3 Allow answers to contain formatted text, lists, and links, and reuse the app's existing content editor and its sanitisation rules rather than accepting raw markup.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/faq-section
How it works
-
1
Copy the link
Grab the Markdown instruction URL for this feature.
-
2
Give it to your AI
Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.
-
3
It inspects, then implements
Your agent reads your existing app first, then adds the feature to fit it.
Works with your stack
These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.
Need it tighter than that? Customize the feature and tell it exactly what you're running.