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

Frontend Engineering

skill-hiroqt-pixelcrew-frontend-engineering · by hiroqt

Comprehensive guide for modern front-end engineering across all major modern tech stacks (React 19/Next.js App Router, Vue 3/Nuxt 3, Svelte 5 Runes, SolidJS, Astro, Modern Vanilla CSS, TypeScript). Enforces strict UI/UX standards, anti-AI-slop design rules, dynamic typography systems, and WCAG 2.1/2.2 AA/AAA accessibility compliance.

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

Install

$ agentstack add skill-hiroqt-pixelcrew-frontend-engineering

✓ 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-hiroqt-pixelcrew-frontend-engineering)

Reliability & compatibility

✓ Security review passed
0 installs to date
— no reviews yet
● 22d 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 Engineering? Claim this listing to set pricing, connect Stripe payouts, and keep 70% of every sale.
Sign up to claim

About

Frontend Engineering & UI/UX Standards

This skill provides comprehensive instructions, architectural patterns, and strict quality guidelines for building modern, accessible, high-performance web applications across all major front-end tech stacks.

1. Core Engineering Directives

  1. Zero AI Slop: Reject generic AI-generated aesthetic tropes (purple/cyan neon glow mesh gradients on black cards, floating pill eyebrow badges on every header, nested card-in-a-card syndrome, fake neon input glow rings). Design with intentional typography, crisp borders, purposeful hierarchy, authentic whitespace, and structured design tokens.
  2. Dynamic User/Brand-Driven Typography: Select font pairings and modular scales tailored directly to the application domain and user aesthetic preference (Geometric, Humanist, Editorial Serif, Neo-Grotesque, or Developer Mono). Utilize mathematical fluid type scales with CSS clamp(), optimal line measures (45–75ch), and tabular numerals for data dashboards.
  3. WCAG 2.1 / 2.2 AA & AAA Compliance: Semantic HTML first, rigorous contrast ratios (4.5:1 text, 3:1 graphical elements/focus rings, 7:1 AAA where applicable), robust keyboard navigation (:focus-visible, focus trapping in modals/drawers, roving tabindex), full screen reader accessibility (aria-expanded, aria-controls, aria-live, aria-hidden), and @media (prefers-reduced-motion: reduce).
  4. Modern Framework & Styling Mastery:
  • React 19 / Next.js: App Router, Server Components (RSC) vs Client Components boundary, Server Actions, Suspense & Streaming SSR.
  • Vue 3 / Nuxt 3: Composition API (``), Pinia state management, Nitro server engine.
  • Svelte 5 / SvelteKit: Runes ($state, $derived, $effect, $props), Universal load, Form actions.
  • SolidJS / SolidStart: Fine-grained signals, Resource, Suspense.
  • Astro 4+: Islands Architecture, Content Collections, View Transitions.
  • Styling: Modern Vanilla CSS (@layer, Container Queries @container, :has(), Subgrid, CSS variables design token architecture, Nesting).

2. Quick Navigation & Reference Modules

  • [Anti-AI Slop & UI/UX Aesthetic Rules](./references/anti-ai-slop-guidelines.md)
  • [Dynamic Typography System & Font Matrix](./references/typography-system-matrix.md)
  • [WCAG 2.1 / 2.2 Accessibility Audit Checklist](./references/wcag-a11y-audit-checklist.md)
  • [Frameworks, Styling & Component Architecture Guide](./references/frameworks-and-styling-guide.md)

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