Implement React, Next.js, Astro, and Svelte 5 frontend architecture with TypeScript.
npx skills add https://github.com/nsvk13/skills --skill frontend-nsvk13
Please help me install this Agent Skill. Skill: frontend Source: https://github.com/nsvk13/skills/tree/main/frontend Command: npx skills add https://github.com/nsvk13/skills --skill frontend-nsvk13
Frontend development often fails at the hardest parts: turning UI ideas into production-grade components, wiring data/state correctly, and keeping performance and accessibility from degrading.
Ask for a production-ready component or feature (e.g., “Create a typed Next.js App Router page + form using Server Actions and React Hook Form, with loading/error states and accessible markup”).
High-intent search queries and answers about installing and using this skill.
To implement Next.js Server Actions with React Hook Form, you create a typed App Router page that submits form data directly to the server, handling loading and error states. This approach uses TypeScript-first patterns to ensure robust data mutations and accessible markup.
Svelte 5 runes and snippets structure SvelteKit routing by managing component state and reactivity natively. You use runes for reactive declarations and snippets for reusable markup, resolving implementation bottlenecks while maintaining performance and accessibility.
Handling data fetching and mutations in React with TanStack Query involves wrapping your components with query providers and defining mutation hooks. This pattern resolves state synchronization issues, ensuring production-grade UI performance and correct cache boundaries.
Yes, this approach supports Telegram Mini App UI integration including backend initData verification. It handles the specific UI integration and safety boundaries required for Telegram, ensuring secure data transmission and correct component rendering.
Optimizing Core Web Vitals and bundle size in React and Next.js requires lazy loading, code splitting, and avoiding unnecessary re-renders with memoization. You use Next.js RSC and caching strategies to ensure performance-aware solutions.
Yes, you can build accessible components with Astro islands and content collections. This method considers semantics, aria, and keyboard navigation as non-optional, combining static content delivery with interactive React or Svelte islands for optimal performance.
bkywksjDefine standardized React UI patterns for Tauri desktop apps.
racciolyRun Lighthouse audits and analyze Core Web Vitals to identify performance bottlenecks.
adelabdelgawadProxy Next.js API routes to FastAPI with cookie forwarding and typed clients.
xiaobei930Implement frontend patterns for component design, state management, performance, and accessibility across Vue, React, Svelte, and Angular.
