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
Newsletter Archive
Newsletter Archive
Turn sent email issues into browsable web pages that new readers can find and read.
What it does
A public archive of past newsletter issues, each with its own permanent page and a subscribe path.
How it works
- 1 Store the sent version of each issue rather than regenerating it. An archive built by re-rendering a template will drift the moment the template changes, and old issues will stop matching what subscribers actually received.
- 2 Convert the email markup to web markup on the way in: strip the table scaffolding, the fixed pixel widths, and the inline styles that only exist to survive an email client, and render the result in the app's normal article styles.
- 3 Reuse the app's existing publishing states rather than adding a second one. An issue should move from sent to archived through the same Draft and Publish States machinery the rest of the content uses.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/newsletter-archive
Help Center
Help Center
Give customers a searchable help site they can read before they open a support ticket.
What it does
A public help site of articles grouped into collections, with search, browse, and a contact fallback.
How it works
- 1 Treat the article as the single source of help content. If the app already has Contextual Help, Knowledge Base Chat, or an AI knowledge base drafting flow, point them at these same records rather than keeping a second copy of the answers that will drift.
- 2 Index articles into the app's existing search rather than standing up a separate search box with its own ranking. Extend Global Search and reuse the existing match highlighting so a result looks the same wherever it appears.
- 3 Give every article a stable slug and every collection an ordered list of articles, and show breadcrumbs from the collection down to the article so a visitor who landed from search knows where they are.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/help-center
Blog
Blog
Publish articles from inside the app to public pages with authors and categories.
What it does
A blog with authored posts, categories, scheduling, and public article and index pages.
How it works
- 1 Scope this honestly. The minimum coherent version is a post with a title, body, author, category, publish state, and a public page at a stable URL, plus an index and a feed. Defer multi-language content, per-post custom layouts, and a general page builder rather than half-building them.
- 2 Do not build a new editor. Extend the app's existing Rich Text Editor or Markdown Editor with whatever a post needs, and inherit its autosave, unsaved-change warning, and undo instead of reinventing them.
- 3 Reuse the app's existing Draft and Publish States and Scheduled Publishing rather than adding a second publish workflow for posts. Reuse SEO Setup for titles, descriptions, and social previews.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/blog
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.