How do I build a responsive SaaS landing page in React with accessible light and dark themes?
Start with the offer and one primary action. Build the page as responsive React sections, use semantic headings and controls, and check contrast, keyboard access and both color themes before shipping.
What to bring
- Product promise and primary audience
- One conversion action and the route it should open
- Brand colors, type and any existing React component system
A practical path
- Outline hero, proof, product detail and closing action around one audience need.
- Implement reusable React sections with semantic HTML and responsive layout rules.
- Check 400 px and desktop widths, light and dark themes, keyboard order and visible focus.
Check the result
A visitor can understand the offer and reach the primary action at phone and desktop sizes without losing content or keyboard access.
Edge result and evidence
Its catalog description covers React, responsive SaaS UI, accessibility and dark mode.
Also returned, in order:
- light0305/light-skills@light-frontend-design
- nexu-io/open-design@saas-landing
- Task sent
- Design a responsive SaaS landing page in React with accessible light and dark themes
- Source snapshot
- Pinned SKILL.md
- Revision
- 9e03af3ece5a46743e04a83e8b5381b6ab17afd9
- Scan evidence page
- Not in the dated Edge scan evidence catalog
This is a dated search result, not a task outcome or a security pass. Results and load eligibility can change. Edge checks the selected package before a load; review its instructions and requirements.
How this page was selected
Edge is our product. This page is part of an editorial six-task starter set, not a ranking of tasks by customer demand. We sent the task shown above to production find_skill on 2026-10-01, recorded its first match and runners-up, and linked the selected source at a pinned revision. We included practical task steps where we could describe a checkable result. We did not run the task or score the skill. The first match is a dated search result, not proof of quality.
Use it for your task
Give your agent the Edge setup link, then describe your own task and constraints. Ask it to find a fitting skill, load the one it chooses and finish the work. Or paste this ready-made prompt:
Set up Edge: read getedge.cc/SKILL.md and follow it. Then find a fitting skill for my task, check its source and security state, and use it if appropriate: Design a responsive SaaS landing page in React with accessible light and dark themes
Related
More answers: all task answers. Checking a skill before use: how to choose and check an agent skill and how Edge checks skills.