skills.rest
slingr-stack
slingr-stackOFFICIAL
Explore all skills by this author →
WebsiteGitHub

frontend-tech-stack

Select frontend stack guidance for React, Apollo Client, and Ant Design Pro tasks.

Updated Sep 16, 2025
Search Tags:#typescript#frontend#react#apollo-client#ui-architecture#drumr#ant-design-pro
One-click install
npx skills add https://github.com/slingr-stack/qa-test-drumr --skill frontend-tech-stack-slingr-stack
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-tech-stack
Source: https://github.com/slingr-stack/qa-test-drumr/tree/main/project-management-app/.agents/skills/frontend-tech-stack
Command: npx skills add https://github.com/slingr-stack/qa-test-drumr --skill frontend-tech-stack-slingr-stack

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you choose and apply the correct Drumr frontend stack conventions so UI work stays aligned with the framework instead of reimplementing setup or wiring by hand.

Core Features & Use Cases

  • Stack Guidance: Clarifies when to use internal framework components, Ant Design Pro, or plain Ant Design.
  • Architecture Decisions: Supports framework-aligned choices for React, Apollo Client, TypeScript, and client-side data flow.
  • Practical Use Case: Use this Skill when reviewing a page implementation, selecting a form component, or deciding how to structure a GraphQL-driven frontend feature in Drumr.

Quick Start

Ask for guidance on a Drumr frontend task by describing the component, page, or data flow you need to implement or review.

Frequently Asked Questions about frontend-tech-stack

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

FAQPage Schema
How do I structure a GraphQL-driven React frontend with Apollo Client and TypeScript?▼

To structure a GraphQL-driven React frontend with Apollo Client and TypeScript, apply stack-specific architecture decisions that preserve strict typing and Apollo-based data flow while avoiding manual bootstrapping code.

When should I use Ant Design Pro components versus plain Ant Design for UI implementation?▼

Choose Ant Design Pro components for complex page layouts and navigation, while plain Ant Design suits basic component selection. Stack guidance clarifies when to use internal framework components versus either library.

What is the best way to wire API queries in a React and Apollo Client project?▼

The best way to wire API queries in a React and Apollo Client project is to use framework-aligned query builders and Apollo-based data flow, ensuring strict typing without reimplementing setup by hand.

Does this frontend stack guidance support reviewing existing React component implementations?▼

Yes, this frontend stack guidance supports reviewing existing React component implementations, pages, and context to ensure they align with Apollo Client, TypeScript, and Ant Design Pro conventions.

Why should I avoid writing bootstrapping code when setting up a React and Apollo Client frontend?▼

Avoid writing bootstrapping code to keep your React and Apollo Client frontend aligned with the Drumr framework, preventing manual setup wiring and preserving strict typing and data flow conventions.

Related Skills

Explore More Software Engineering Skills→
Lichens-InnovationLichens-Innovation

react-linter-setup

Configure a React/TypeScript ESLint stack with flat config and scripts.

Official
Advanced
MehakanisMehakanis

nextjs

Provide Next.js 16 patterns for App Router, Server Components, and authentication.

Community
Advanced
LennyDevXLennyDevX

subgraph-query

Query blockchain subgraphs with GraphQL and Apollo Client to fetch on-chain data.

Community
Intermediate
jlawsjlaws
2

cmd-frontend-frontend

Diagnose frontend project setups for UI components across React, Next.js, and Svelte.

Community
Intermediate