skills.rest
xmun74
xmun74COMMUNITY
Explore all skills by this author →
WebsiteGitHub

fe-development

Provides frontend architecture and coding standards for TanStack Query-based projects.

Updated Apr 6, 2026
Search Tags:#typescript#architecture#frontend#nextjs#tailwind#fsd#component-patterns
One-click install
npx skills add https://github.com/xmun74/chordlens --skill fe-development
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fe-development
Source: https://github.com/xmun74/chordlens/tree/main/.claude/skills/fe-development
Command: npx skills add https://github.com/xmun74/chordlens --skill fe-development

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This FE development guide standardizes component creation, API integration, and architecture practices to accelerate frontend work while ensuring consistency and safety across the codebase.

Core Features & Use Cases

  • Component patterns: Consistent React components with named exports, strict TypeScript typings, and no default exports for most files.
  • FSD rules & architecture: Enforces Feature-Sliced Design v2.1 structure and TypeScript safety.
  • API integration: Guidelines for server components, TanStack Query usage, and Next.js App Router compliance.
  • Use Case: A frontend team uses the guide to scaffold a new feature with predictable structure and SSR/SSG patterns.

Quick Start

Create a new frontend feature following the guide's rules and ensure components use named exports with server components where appropriate.

Frequently Asked Questions about fe-development

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

FAQPage Schema
How do I structure scalable frontend components in Next.js App Router?▼

To standardize scalable UI components, enforce named exports, use server components where appropriate, and align with Feature-Sliced Design v2.1 architecture. This ensures predictable frontend structure and consistency.

What is Feature-Sliced Design architecture for frontend development?▼

Feature-Sliced Design (FSD) is an architectural pattern that standardizes frontend project structure into predictable layers. It enforces strict TypeScript safety and separation of concerns for scalable component creation.

Can I use default exports for React components in a scalable frontend architecture?▼

No, default exports are restricted for most files. The guide enforces named exports for React components to ensure strict typing and predictable module resolution across the Feature-Sliced Design structure.

How to integrate API fetching with TanStack Query in Next.js server components?▼

Integrate API fetching by following guidelines for Next.js server components and TanStack Query usage. This ensures App Router compliance and proper SSR/SSG patterns during frontend feature scaffolding.

Does this frontend development guide work with Tailwind CSS and TypeScript?▼

Yes, the guide is designed for Next.js 16 App Router projects using TypeScript and Tailwind CSS. It standardizes component composition and API integration across this specific technology stack.

Related Skills

Explore More Software Engineering Skills→
CloakingGhostCloakingGhost

frontend

Guide Next.js 16 frontend development with FSD architecture, TypeScript, Tailwind CSS, and Zustand.

Community
Intermediate
huangjunsen0406huangjunsen0406
77

trellis-check

Run linting, type-checking, and cross-layer data flow analysis before code commits.

Community
Advanced
einja-inceinja-inc
1

frontend-development

Standardize frontend implementation with Next.js, React, and TanStack Query.

Official
Basic
masanao-ohbamasanao-ohba
2

react-architectural-patterns

Codifies React architectural patterns for scalable component organization.

Community
Basic