skills.rest
sundarshahi
sundarshahiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-engineer

Builds production web frontends with design systems, typed API clients, i18n, SEO, and accessibility.

1|Updated Jun 24, 2026
Search Tags:#accessibility#React#frontend#openapi#design system#Next.js#Playwright
One-click install
npx skills add https://github.com/sundarshahi/drydock --skill frontend-engineer-sundarshahi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-engineer
Source: https://github.com/sundarshahi/drydock/tree/main/skills/frontend-engineer
Command: npx skills add https://github.com/sundarshahi/drydock --skill frontend-engineer-sundarshahi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Turning a product requirements document and API contracts into a complete, working web frontend requires coordinating framework selection, design systems, components, routing, state management, security headers, and accessibility — this Skill automates that entire build process inside the Drydock pipeline. ## Core Features & Use Cases - Product-driven framework selection: Chooses Astro, Next.js, Vite SPA, or Remix based on the product archetype, or matches an existing brownfield stack. - Full frontend codebase generation: Produces design tokens, UI primitives, layout and feature components, pages with routing and auth guards, typed API clients generated from OpenAPI specs, i18n message catalogs, SEO metadata, and tests. - Functional verification gate: Runs an executed Playwright smoke test of the top-5 user flows, scans for dead interactive elements, and verifies the navigation graph before design polish. - Use Case: Describe a SaaS product with auth, payments, and a dashboard; the Skill reads the BRD and OpenAPI specs, then emits a complete frontend/ codebase with components, pages, tests, and Storybook documentation. ## Quick Start Ask the Drydock orchestrator to build the frontend for your product from the BRD user stories and OpenAPI specs, or invoke the frontend-engineer skill directly with your requirements.

Frequently Asked Questions about frontend-engineer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I choose between Next.js, Astro, Vite, and Remix for a web frontend?▼

Choose by product archetype: Astro for content and marketing sites, Next.js App Router for full-stack SaaS, React with Vite for internal-tool SPAs behind auth, and Remix for form-heavy apps. If an architect's tech-stack.md or an existing brownfield codebase names a framework, that choice wins.

How to generate typed API clients from OpenAPI specs in a React app?▼

Read the OpenAPI 3.1 YAML specs and generate TypeScript types, Zod validation schemas, and endpoint constants into a services layer. Wrap them in React Query hooks with query-key factories, optimistic updates, and runtime response validation.

Does this frontend workflow support accessibility and WCAG compliance?▼

Yes, every component requires keyboard navigation, ARIA roles, visible focus indicators, and WCAG 2.1 AA contrast. axe-core runs in component tests and a full accessibility audit runs in the final testing phase.

Can it match an existing brownfield frontend stack?▼

Yes, in brownfield mode it reads the existing codebase context first and matches the current framework, styling approach, and design system. It adds new components alongside existing ones and never overwrites or introduces a second framework.

Why verify user flows with Playwright instead of code review?▼

Reasoning that a flow works is not proof, so the top-5 user flows are written as Playwright smoke tests and executed against the built app asserting final state. Any failing flow is treated as a critical defect that blocks the design polish phase.

What security defaults are built into the generated frontend?▼

The foundation emits a strict CSP without unsafe-inline, Trusted Types, HSTS with preload, COOP/CORP headers, SRI hashes on external scripts, __Host- prefixed secure cookies, and a DOMPurify sanitizer for all HTML injection. No secrets are exposed in the client bundle.

Related Skills

Explore More Software Engineering Skills→
gleebgleeb

planning-api-design

Draft per-story API specifications with schemas, authentication, and error cases.

Community
Intermediate
ArthTech-AIArthTech-AI

qa

Run full-stack QA checks with pytest, Jest, ruff, TypeScript, and Playwright.

Official
Intermediate
jason23452jason23452

prd-to-product-design

Convert PRDs and repository evidence into a consolidated DESIGN.md design system.

Community
Advanced
markky21markky21

react-nextjs-validator

Audit React/Next.js code for best-practice patterns.

Community
Basic