skills.rest
Jaylaelike
JaylaelikeCOMMUNITY
Explore all skills by this author →
GitHub

senior-frontend

Scaffold Next.js/React projects and generate components with tests and Storybook.

Updated Sep 6, 2024
Search Tags:#automation#accessibility#React#frontend#scaffolding#Next.js#bundle-analysis
One-click install
npx skills add https://github.com/Jaylaelike/pm25-interactive-thaipbs-app --skill senior-frontend-jaylaelike
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: senior-frontend
Source: https://github.com/Jaylaelike/pm25-interactive-thaipbs-app/tree/main/.claude/skills/senior-frontend
Command: npx skills add https://github.com/Jaylaelike/pm25-interactive-thaipbs-app --skill senior-frontend-jaylaelike

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Frontend teams often struggle to scale React/Next.js apps while maintaining performance, accessibility, and consistent patterns. This Skill provides a curated set of automation scripts, pattern references, and best practices to streamline frontend development.

Core Features & Use Cases

  • Project scaffolding for Next.js/React with TypeScript and Tailwind CSS
  • Component generation with tests and Storybook support
  • Bundle analysis guidance to optimize dependency footprints
  • React patterns for composition, hooks, and performance optimizations
  • Next.js optimization and accessibility/testing guidance
  • Real-world scenarios: building a dashboard, refactoring components, auditing bundle sizes

Quick Start

Use the senior-frontend skill to scaffold a new Next.js app, generate a Button component with test and story, and run a bundle analysis on the project.

Frequently Asked Questions about senior-frontend

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

FAQPage Schema
How do I scaffold a new Next.js project with TypeScript and Tailwind CSS?▼

Scaffolding a new Next.js project involves using script-driven automation to generate a base structure configured with TypeScript and Tailwind CSS, resulting in a standardized React foundation ready for component development.

What's the best way to generate React components with tests and Storybook support?▼

Generating React components with tests and Storybook support is achieved through reusable component templates that automatically include test files and story configurations, ensuring consistent patterns and immediate visual testing capabilities.

How do I analyze bundle sizes in a React or Next.js application?▼

Analyzing bundle sizes in React or Next.js applications requires applying bundle-analysis guidance to evaluate dependency footprints, allowing developers to identify and optimize heavy or redundant imports.

Does this approach work for auditing accessibility in existing Next.js apps?▼

Auditing accessibility in existing Next.js apps is supported through provided reference materials and testing guidance, enabling teams to evaluate and enforce compliance standards across their current component library.

Can I use these patterns to refactor a React dashboard?▼

Refactoring a React dashboard is a supported use case that applies standardized composition and hooks patterns, allowing developers to restructure existing components for better performance and maintainability.

Why does frontend pattern fatigue happen and how do I standardize React patterns?▼

Frontend pattern fatigue happens when teams inconsistently apply React and Next.js methodologies; standardizing these patterns requires adopting curated automation scripts and reference guides to enforce uniform component generation and optimization.

Related Skills

Explore More Software Engineering Skills→
Snowflake-LabsSnowflake-Labs
12

read-ors-configuration

A concise summary of your roleplay character: name,</name> personality, and/or behavior, formatted as a single string sentence. Typically不超过50字，此处省略

Official
Intermediate
Patasse97Patasse97

performance-profiler

Identifies bottlenecks in Node.js, Python, and Go codebases via profiling and bundle analysis.

Community
Advanced
thehivegroup-aithehivegroup-ai

vue-component-standards

Provides Vue 3 component development standards using Composition API, TypeScript, and Tailwind CSS.

Official
Intermediate
korchard333korchard333
46

code-apps

Scaffold Power Apps Code Apps with React, TypeScript, and PAC CLI.

Community
Advanced