AgentStack
Browse Sign in
Browse Why AgentStack Sell Docs
Sign in
SKILL verified MIT Self-run

Frontend Development

skill-martian56-claude-engineer-frontend-development · by martian56

Use when building or structuring a React/Next.js + TypeScript + Tailwind frontend, choosing libraries, or wiring design tokens. Provides the opinionated blessed-library stack and the React-vs-Next decision, all on-token to DESIGN.md and accessible to WCAG AA.

↗ Repository
— No reviews yet
0 installs
32 views
0.0% view→install

Install

$ agentstack add skill-martian56-claude-engineer-frontend-development

✓ scanned · ✓ verified, works with Claude Code, Cursor, and more.

Security review

✓ Passed

No issues found. Passed automated security review. · v0.1.0 How review works →

  • ✓ Prompt-injection patterns
  • ✓ Secret / credential exfiltration
  • ✓ Dangerous shell & filesystem operations
  • ✓ Untrusted network calls
  • ✓ Known-malicious package signatures

What it can access

  • ✓ Network access No
  • ✓ Filesystem access No
  • ✓ Shell / process execution No
  • ✓ Environment & secrets No
  • ✓ Dynamic code execution No

From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.

View the full security report →

Verified badge

Passed review? Show it. Paste this badge into your README, it links to the public security report.

AgentStack Verified badge Links to your public security report.
[![AgentStack Verified](https://agentstack.voostack.com/badges/verified.svg)](https://agentstack.voostack.com/security/report/skill-martian56-claude-engineer-frontend-development)

Reliability & compatibility

✓ Security review passed
0 installs to date
— no reviews yet
● 3mo ago

Declared compatibility

Claude CodeClaude Desktop

Compatibility is declared by the source manifest. End-to-end runtime verification is coming, see below.

Preview Execution monitoring

We're building live execution health for every listing: tool-call success rate, median latency, uptime, and last-checked timestamps, measured, not self-reported. It isn't live yet, so we don't show numbers we can't stand behind.

How agent discovery & health will work →
Are you the author of Frontend Development? Claim this listing to set pricing, connect Stripe payouts, and keep 70% of every sale.
Sign up to claim

About

Frontend Development

Announce at start: "I'm using claude-engineer:frontend-development to build the frontend on the blessed stack."

React vs Next.js (default decision)

  • Next.js (App Router) for marketing/content sites and content+app hybrids (SEO, RSC, server data).
  • Vite SPA (React) for dashboards/SaaS behind auth and design-system/library work (no SEO need).
  • Rule of thumb: anonymous crawler needs real content, or you need a server data layer → Next.js; everything behind a login and API-bound → Vite SPA.

Blessed libraries (June 2026 defaults - full table + versions in references/frontend-stack.md)

| Need | Default | |---|---| | UI primitives | shadcn/ui (own the code) over Radix/Base UI | | Styling | Tailwind CSS v4 (@theme) + cva + tailwind-merge + clsx | | Server/data state | TanStack Query (or Next server components/actions) | | Client state | Zustand | | Forms + validation | react-hook-form + Zod | | Routing (non-Next) | React Router (TanStack Router if TS-first) | | Tables | TanStack Table | | Charts | Recharts (via shadcn charts) | | Animation | motion (ex-Framer Motion) | | Icons | lucide-react (+ custom typed SVG icons) | | Toasts / cmd palette / DnD / upload | Sonner / cmdk / dnd-kit / react-dropzone + presigned uploads |

Non-negotiables

  1. On-token only - consume DESIGN.md tokens via Tailwind @theme/CSS vars; no hardcoded values (claude-engineer:design-system).
  2. TypeScript strict - full strict flags (see reference); no any escapes.
  3. WCAG AA by construction - semantic HTML, keyboard nav, focus management, ARIA, reduced-motion. This is a hard gate (claude-engineer:testing-and-quality).
  4. Tested - Vitest + React Testing Library for components; Playwright for E2E flows.
  5. Monorepo placement - apps in apps/, shared UI/config in packages/ (claude-engineer:monorepo-and-tooling).

Full detail: read references/frontend-stack.md (project structure, exact versions, tsconfig strict flags, ESLint flat config, token wiring, a11y checklist) on demand.

Red flags - STOP

  • Reaching for a library outside the blessed list without a reason recorded in docs/conventions.md.
  • Inline styles / magic numbers instead of tokens.
  • Building an interactive component that isn't keyboard-operable.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

Install and usage instructions live in the source repository linked above.

Reviews

No reviews yet, be the first.

Write a review

Versions

  • v0.1.0 Imported from the upstream source.

More in Agent Skills